学习JavaScript（2）AJAX基础

---

前言

内容参考红宝书JavaScript高级程序设计第三版第二十一章

---

一、AJAX

AJAX是对Asynchronous JavaScript + XML的简写。这一技术能够向服务器请求额外的数据而无须卸载页面

AJAX技术的核心是XMLHttpRequest对象（简称XHR）。能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据。也就是说可以使用XHR对象取得新数据，然后再通过DOM将新数据插入到页面中。

二、XMLHttpRequest对象

大部分主流浏览器都支持原生的XHR对象，在这些浏览器中创建XHR对象如下

let xhr = new XMLHttpRequest();

1.open()

使用XHR对象时，要调用的第一个方法时open()，它接受三个参数：要发送的请求的类型(“get”,“post”)、请求的URL和表示是否异步发送请求球的布尔值

URL相对于执行代码的当前页面，调用open（）方法并不会正真发送请求，而是启动一个请求以备发送

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

2.send()

如果要发送特定的请求，必须调用send()方法。

xhr.open("get","example.txt",false);
xhr.send(null);

send()方法接收一个参数，即要作为请求主题发送的数据。如果不需要通过请求主体发送数据，则必须传入null。调用send()后，请求就会备分配到服务器。

3.XHR对象属性

1)responseText:作为响应主体被返回的文本
2)responseXML:如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保存包含着响应数据的XML DOM文档
3)status:响应的HTTP状态
4)statusText:HTTP状态的说明

在接收到响应后，第一步是检查status属性，以确定响应已经成功返回。
一般来说，可以将HTTP状态码为200作为成功标志。
此外，状态码为304表示请求的资源并没有被修改，可以直接使用浏览器中的缓存版本，响应也是有效

let xhr = new XMLHttpRequest();

xhr.open("get","example.txt",false);
xhr.send(null);

if((xhr.status >= 200 && xhr.status < 300) || xhr.status ==304){
    console.log(xhr.responseText);
}else{
    console.log("request was unsucessful: " + xhr.status);
}

5)readyState:该属性表示请求/响应过程的当前活动阶段
0：未初始化（未调用open()方法）
1：启动（已经调用open()方法，未调用send()方法）
2：发送（已经调用send()方法，但尚未接受到响应）
3：接收（已经接收到部分响应数据）
4：完成（已经接收到全部响应数据）

只要readyState属性的值由一个值变成另一个值，都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。通常我们只需要判断4阶段的值，因为这个时候数据都已经就绪。

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(xhr.readyState ==4){
        if((xhr.status >=200 && xhr.status <300) || xhr.status ==304){
            console.log(xhr.responseText);
        }else{
            console.log("request was unsucessful: " + xhr.status);
        }
    }
}
xhr.open("get","example.html",false);
xhr.send(null);

三、实例应用

运用chrome浏览器控制台试验baidu。记得要同源（打开百度网站，引用的url就是同网址）

---

总结

个人学习笔记，每天进步一点