文章目录
1.AJAX是什么
- AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
- AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
- AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
- 创建XMLHttpRequest对象,也就是创建一个异步调⽤用对象
- 创建⼀一个新的HTTP请求,并指定该HTTP请求的⽅方法,URL及验证信息
- 设置响应HTTP请求状态变化的函数
- 发送HTTP请求.
- 获取异步调⽤用返回的数据
- 使⽤用JavaScript和DOM实现局部刷新
注意：光理论是不够的，在此送大家2020最新企业级 Vue3.0/Js/ES6/TS/React/node等实战视频教程，点击此处免费获取，小白勿进哦
AJAX是基于现有的Internet标准，并且联合使用它们：
-
XMLHttpRequest 对象 (异步的与服务器交换数据)
-
JavaScript/DOM (信息显示/交互)
-
CSS (给数据定义样式)
-
XML (作为转换数据的格式)
AJAX应用程序与浏览器和平台无关的！
优点
-
不需要插件的⽀持，原⽣ js 就可以使⽤
-
⽤户体验好（不需要刷新⻚⾯就可以更新数据）
-
减轻服务端和带宽的负担
缺点：
- ajax不不⽀支持浏览器器back按钮。
- 安全问题 AJAX暴暴露露了了与服务器交互的细节。
- 对搜索引擎的⽀支持⽐比较弱。
- 破坏了了程序的异常机制。
五个步骤
1.创建对象
2.初始化请求
3.设置http头信息
4.指定回调函数
5.发送请求
var xhr =null;//创建对象
if(window.XMLHttpRequest){ xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} xhr.open(“方式”,”地址”,”标志位”);//初始化请求
xhr.setRequestHeader(“”,””);//设置http头信息
xhr.onreadystatechange =function(){}//指定回调函数
xhr.send();//发送请求
2.创建XMLHttpRequest对象
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
创建 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
variable=new ActiveXObject("Microsoft.XMLHTTP");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//创建爱你XMLHttpRequest对象
function createXMLHttpRequest(){
var xhr=null;
if (window.ActiveXOBject){//IE浏览器创建方式
xhr=new ActiveXOBject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){//非ie浏览器或IE7以上版本
xhr=new XMLHttpRequest();
}
if(!(xhr)){//异常，创建对对象失败
window.alert("创建XMLHttpRequest异常");
}
return xhr;
}
</script>
</head>
<body>
</body>
</html>
3.向服务器发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法
第一个open方法其实是配置ajax必要的信息，第二个send才是真正的发起请求到服务器
- xmlhttp.open(“GET”,“ajax_info.txt”,true);
- xmlhttp.send();
同步or异步?
false同步執行，程序会暂停在那儿等待结果返回
true异步执行，不阻碍后续代码的执行
同步：阻塞的 -张三叫李四去吃饭，李四一直忙得不停，张三一直等着，直到李四忙完两个人一块去吃饭 =浏览器向服务器请求数据，服务器⽐较忙，浏览器一直等着（⻚面白屏），直到服务器返回数据，浏览器才能显示页面
异步：⾮阻塞的 -张三叫李四去吃饭，李四在忙，张三说了一声然后自己就去吃饭了，李四忙完后自己去吃 =浏览器向服务器请求数据，服务器比较忙，浏览器可以自如的干原来的事情（显示页面），服务器返回 数据的时候通知浏览器一声，浏览器把返回的数据再渲染到⻚面，局部更新
这样就会导致浏览器出现假死状态，影响界面的加载。所以这个属性基本上不推荐使用了，为了解决这个问题，现代浏览器都是通过Promise Api来进行操作。
get or post？
GET：⼀般⽤用于信息获取，使⽤用URL传递参数，对url地址的长度有限制，对所发送信息的数量量也有限制，⼀般在2000个字符，有 的浏览器器是8000个字符
请求的参数都暴露在url地址中，如果传递中文参数需要自己进行编码操作，安全性比较低
POST：⼀般⽤用于提交数据，没有数据长度的限制，对所发送的信息没有限制，提交的数据内容都存在于http请求体中，数据不会暴露在url地址中
在以下情况中，请使用 POST 请求：
- ⽆法使用缓存⽂件（更新服务器上的⽂件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输⼊时，POST 比 GET 更稳定也更可靠
一个简单的 GET 请求：
xmlhttp.open("GET","请求地址",true);
xmlhttp.send();
加粗样式一个简单 POST 请求：
xmlhttp.open("POST","请求地址",true);
xmlhttp.send();
如果需要像 HTML 表单那样 POST 数据，使用 setRequestHeader() 来添加 HTTP 头。
然后在 send() 方法中规定希望发送的数据
4.服务器响应
如需获得来自服务器的响应使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
如果来自服务器的响应并非 XML，使用 responseText 属性
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，使用 responseXML 属性
请求 cd_catalog.xml 文件，并解析响应：
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;
5.onreadystatechange 事件
- 当请求被发送到服务器时，我们需要执行一些基于响应的任务。
- 每当 readyState 改变时，就会触发 onreadystatechange 事件。
- readyState 属性存有 XMLHttpRequest 的状态信息。
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
注意： onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。
使用回调函数
回调函数是一种以参数形式传递给另一个函数的函数。
如果你的网站上存在多个 AJAX 任务，那么应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：
function myFunction()
{
loadXMLDoc("/try/ajax/ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
注意：最后送大家2020最新企业级 Vue3.0/Js/ES6/TS/React/node等实战视频教程，点击此处免费获取，小白勿进哦