Ajax

一、什么是Ajax

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面

二、Ajax的原生写法

1、XMLHttpRequest对象

XMLHttpRequest 对象用于在后台与服务器交换数据，能够在不重新加载页面的情况下更新网页，在页面已加载后从服务器请求数据，在页面已加载后从服务器接收数据，在后台向服务器发送数据。所以XMLHttpRequest对象是Ajax技术的核心所在

2、执行步骤

流程图

image
工作流程

1、创建兼容性XHR对象 → 2、初始化请求 →3 、发送请求 → 4、接收数据 → 5、解析数据 → 6、完成

三、流程详解

1、创建兼容性XHR对象

XMLHttpRequest对象兼容IE7+，Chrome，FireFox等浏览器。如果不需要兼容IE7以下版本的浏览器，直接使用XMLHttpRequest构造函数即可

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n26" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">var xhr = new XMLHttpRequest();</pre>
在IE7以下版本的浏览器中对这个对象是采用ActiveX插件的方式来实现的。在IE浏览器中可能会遇到三种不同版本的XHR对象，即MSXML2.XMLHttp,MSXML2.XMLHttp.3.0,MSXML2.XMLHttp.6.0，要使用MSXML库中的XHR对象的话

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n29" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">var xhr = new ActiveXObject('Microsoft.XMLHttp');</pre>
完整代码

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n32" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">function getXHR(){
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(e){
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return XHR;
}</pre>

2、设置回调函数

通过XMLHttpRequest对象的onreadystatechange属性设置回调函数，用于当请求成功后接收服务器端返回的数据

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n37" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">xhr.onreadystatechange=function(){
case 0 :
//alert("请求未初始化");
break;
case 1 :
//alert("请求启动，尚未发送");
break;
case 2 :
//alert("请求发送，尚未得到响应");
break;
case 3 :
//alert("请求开始响应，收到部分数据");
break;
case 4 :
alert("请求响应完成得到全部数据");
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
var data = xhr.responseText;
alert(data);
}else {
alert("Request was unsuccessful : " + xhr.status + " " + xhr.statusText);
}
break;
}</pre>
常用的属性说明

1、readyState状态信息

状态码说明

0 请求未初始化

1 服务器连接已建立

2 请求已接收

3 请求处理中

4 请求已完成，且响应已就绪

状态码	说明
0	请求未初始化
1	服务器连接已建立
2	请求已接收
3	请求处理中
4	请求已完成，且响应已就绪

2、 responseText 作为响应主体被返回的文本

responseText属性返回从服务器接收到的字符串，该属性为只读。如果本次请求没有成功或者数据不完整，该属性就会等于null。如果服务器返回的数据格式是JSON，就可以使用responseText属性。

var data = ajax.responseText; data = JSON.parse(data);

4、statusText 响应HTTP状态

状态码说明

200 服务器正常响应

400 错误的请求

403 没有访问权限

404 请求的资源不存在

500 服务器内部错误

状态码	说明
200	服务器正常响应
400	错误的请求
403	没有访问权限
404	请求的资源不存在
500	服务器内部错误

3、初始化对象

通过XMLHttpRequest对象的open()方法，传入参数完成初始化XMLHttpRequest对象的工作

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n89" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">xhr.open('GET','url');
xhr.open('POST','url');</pre>
说明
- method
  
  Http请求方式，选择发送Http get 请求，因此参数为get，支持get跟post请求
- url
  
  要请求服务器的url路径
- async
  
  是否以异步的方式发送，true为异步，false为同步，默认为true
  
  同步：会停留并等待服务器发送回复然后再继续
  
  <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n103" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;"> /* 开发中不要使用同步 */
  var xhr = new XMLHttpRequest();
  console.log("1、实例化");
  xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
  console.log("4、请求数据完成");
  console.log(this.responseText);
  }
  };
  console.log("2、监听设置完成");
  xhr.open("GET", "/web/ajax", false);
  console.log("3、初始化配置!!!");
  xhr.send();
  console.log("5、请求发送完成!!!");</pre>
  
  异步：允许页面继续其进程并处理可能的回复
  
  <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n105" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;"> var xhr = new XMLHttpRequest();
  console.log("1、实例化");
  xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
  console.log("5、请求数据完成");
  console.log(this.responseText);
  }
  };
  console.log("2、监听设置完成");
  xhr.open("GET", "/web/ajax", true);
  console.log("3、初始化配置!!!");
  xhr.send();
  console.log("4、请求发送完成!!!");</pre>

4、发送请求

1、概要

send方法用于实际发出HTTP请求。如果不带参数，就表示HTTP请求只包含头信息，也就是只有一个URL，典型例子就是GET请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是POST请求。

2、参数

1、void send();

2、void send(String data);

3、void send(FormData data);

4、void send(ArrayBufferView data);

5、void send(Blob data);

6、void send(Document data);

3、参数详解

1、FormData

构造表单数据

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n123" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">var formData = new FormData();
formData.append('username', '张三');
formData.append('email', 'zhangsan@163.com');
var xhr = new XMLHttpRequest();
xhr.open("POST", "/register");
xhr.send(formData);</pre>

上面的代码构造了一个formData对象，然后使用send方法发送。它的效果与点击下面表单的submit按钮是一样的。

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n125" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;"><form id='register' name='register' action='/register'>
<input type='text' name='username' value='张三'>
<input type='email' name='email' value='zhangsan@163.com'>
<input type='submit'>
</form> </pre>
现有表单构造生成

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n128" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">var form = document.querySelector("form");
var request = new XMLHttpRequest();
request.open("POST", "/rigesiter");
request.send(new FormData(form));</pre>
FormData对象还可以对现有表单添加数据javascript

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n131" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">function sendForm(form) {
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open('POST', "/rigester", true);
xhr.onload = function(e) {
// ...
};
xhr.send(formData);
return false;
}
var form = document.querySelector('#register');
sendForm(form);</pre>
FormData对象也能用来模拟File控件，进行文件上传。

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n134" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">function uploadFiles(url, files) {
var formData = new FormData();
for (var i = 0, file; file = files[i]; ++i) {
formData.append(file.name, file); // 可加入第三个参数，表示文件名
}
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.onload = function(e) { ... };
xhr.send(formData); // multipart/form-data
}
document.querySelector('input[type="file"]').change(function() {
uploadFiles('/upload', this.files);
return false;
});</pre>

2、String

传递键值对

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n140" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">function getData(url) {
var formData = new FormData();
for (var i = 0, file; file = files[i]; ++i) {
formData.append(file.name, file); // 可加入第三个参数，表示文件名
}
var xhr = new XMLHttpRequest();
xhr.open('POST', url);
xhr.onload = function(e) { ... };
xhr.send("uid=1"); //application/x-www-form-urlencoded
}</pre>
传递多个键值对

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n143" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">function getData(url) {
var formData = new FormData();
for (var i = 0, file; file = files[i]; ++i) {
formData.append(file.name, file); // 可加入第三个参数，表示文件名
}
var xhr = new XMLHttpRequest();
xhr.open('POST', url);
xhr.onload = function(e) { ... };
xhr.send("page=1&size=10"); //application/x-www-form-urlencoded
}</pre>

# Ajax