2019-11-30 2019-11-30

学习Ajax ajax即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式[网页]应用的网页开发技术。使用ajax,可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
在现代浏览器上写AJAX主要依靠XMLHttpRequest对象，例：

var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象request.onreadystatechange = function () { // 状态发生变化时，函数被回调 if (request.readyState === 4) { // 成功完成 // 判断响应结果: if (request.status === 200) { // 成功，通过responseText拿到响应的文本: return success(request.responseText); } else { // 失败，根据响应码判断失败原因: return fail(request.status); } } else { // HTTP请求还在继续... } }

对于低版本的IE，需要换一个ActiveXObject对象,例：

var request = new ActiveXObject('Microsoft.XMLHTTP'); // 新建Microsoft.XMLHTTP对象request.onreadystatechange = function () { // 状态发生变化时，函数被回调 if (request.readyState === 4) { // 成功完成 // 判断响应结果: if (request.status === 200) { // 成功，通过responseText拿到响应的文本: return success(request.responseText); } else { // 失败，根据响应码判断失败原因: return fail(request.status); } } else { // HTTP请求还在继续... } }

使用XMLHttpRequest对象实现ajax
1：创建一个XHR对象，也叫实例化一个XHR对象，因为XMLHTTPRequest()是一个构造函数。下面是创建XHR对象的兼容写法

var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); }

发送请求
open()
在使用XHR对象时，要调用的第一个方法是open()，如下所示，该方法接受3个参数

xhr.open("get","example.php", false);

1、open()方法的第一个参数用于指定发送请求的方式，这个字符串，不区分大小写，但通常使用大写字母。"GET"和"POST"是得到广泛支持的

"GET"用于常规请求，它适用于当URL完全指定请求资源，当请求对服务器没有任何副作用以及当服务器的响应是可缓存的情况下

"POST"方法常用于HTML表单。它在请求主体中包含额外数据且这些数据常存储到服务器上的数据库中。相同URL的重复POST请求从服务器得到的响应可能不同，同时不应该缓存使用这个方法的请求

2、open()方法的第二个参数是URL，该URL相对于执行代码的当前页面，且只能向同一个域中使用相同端口和协议的URL发送请求。如果URL与启动请求的页面有任何差别，都会引发安全错误
3、open()方法的第三个参数是表示是否异步发送请求的布尔值，如果不填写，默认为true，表示异步发送
【2019-11-30】注：如果请求一个受密码保护的URL，把用于认证的用户名和密码作为第4和第5个参数传递给open()方法
send() send()方法接收一个参数，即要作为请求主体发送的数据。调用send()方法后，请求被分派到服务器
如果是GET方法，send()方法无参数，或参数为null；如果是POST方法，send()方法的参数为要发送的数据。
服务器响应
如需获得来自服务器的响应，可以使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText 属性
如果来自服务器的响应并非 XML，可以使用 responseText 属性。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML 属性
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：

xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0; i "; } document.getElementById("myDiv").innerHTML=txt;

在响应时：
如果接受的是同步响应，则需要将open()方法的第三个参数设置为false，那么send()方法将阻塞直到请求完成。一旦send()返回，仅需要检查XHR对象的status和responseText属性即可。
如果需要接收的是异步响应，这就需要检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下：

0(UNSENT):未初始化。尚未调用open()方法
1(OPENED):启动。已经调用open()方法，但尚未调用send()方法
2(HEADERS_RECEIVED):发送。己经调用send()方法，且接收到头信息
3(LOADING):接收。已经接收到部分响应主体信息
4(DONE):完成。已经接收到全部响应数据，而且已经可以在客户端使用了

注：只要readyState属性值由一个值变成另一个值，都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。