web程序设计 第六课 - javascript基础4

Web程序设计(考研)

Ajax

简介

AJAX（Asynchronous Javascript And XML”（异步JavaScript和XML）是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

请求阶段

实例化XHR对象

创建一个ajax对象，用于与服务器异步通信

var xhr = new XMLHttpRequest();

向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xhr.open("GET","ajax_info.txt",true);
xhr.send(null);

注意：对于POST请求我们要设置头部信息

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");  

响应

1.XHR的状态：xhr.readyState有5种状态分别如下：

• 0：已初始化XHR对象，但是没有调用open方法
• 1：已调用open方法，但是没有调用send方法，服务器连接已建立
• 2：已经调用send方法，服务端请求已接收
• 3：数据正在传输中，还没有完成，请求处理中
• 4：数据已经传输完毕，请求已完成，且响应已就绪

2.XHR状态监听事件：
onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。

xhr.onreadyState = function() {
    if(xhr.readyState === 4) {
      //....
    }
}

3.XHR响应状态码xhr.status

• 1XX: 这一类型的状态码，代表请求已被接受，需要继续处理。
• 2XX: 这一类型的状态码，代表请求已成功被服务器接收、理解、并接受
• 3XX: 这类状态码代表需要客户端采取进一步的操作才能完成请求。通常，这些状态码用来重定向，后续的请求地址（重定向目标）在本次响应的 Location 域中指明.
• 4XX: 这类的状态码代表了客户端看起来可能发生了错误，妨碍了服务器的处理。
• 5XX: 这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理

4.XHR服务器响应内容获取：

• responseText：responseText 属性返回字符串形式的响应
• responseXML：如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性

JSON

json是一种数据格式，和js中的对象一样。例如：

{
    "name": "caelumtian",
    "age": 22
}
#### JSON.parse  
将后端接受到的字符串，转换为对象格式  
```javascript  
var data = xhr.responseText;
var obj = JSON.parse(obj);  
<div class="md-section-divider"></div>

附录

1.完整的ajax请求程序

var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4) {
        if((xhr.status >= 200 || xhr.status < 300) && xhr.status === 304) {
            console.log(xhr.responseText);
        }
    }
}
xhr.send(null);

2.对于异步的理解：
首先区分同步请求和异步请求
同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。
概念分析
同步通信方式要求通信双方以相同的时钟频率进行，而且准确协调，通过共享一个单个时钟或定时脉冲源保证发送方和接收方的准确同步，效率较高；
异步通信方式不要求双方同步，收发方可采用各自的时钟源，双方遵循异步的通信协议，以字符为数据传输单位，发送方传送字符的时间间隔不确定，发送效率比同步传送效率低。