ajax(异步js和xml) - Githubissues

AJAX全称： Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

用于创建快速动态网页
通过ajax实现网页异步刷新

1. 创建XMLHttpRequest对象

var xhr;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xhr=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

2. 请求

xhr.open("GET","ajax_info.txt",true);  //arg1:请求类型；arg2:请求url；arg3：是否异步
xhr.send();  //将请求数据发送到服务器，请求类型为post时，需上传所传送参数

2.1 请求类型

get请求类型，上传参数是追加到URL后面；
post请求类型，上传参数是通过send方法传送的；
当使用get请求时，可能会得到缓冲中的数据，为避免拿到缓冲数据，可以给url添加一个唯一的id，比如时间戳或随机数;post请求不会从缓冲中拿数据；
当使用post请求传送表单数据时，需设置Content-Type头部信息xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
在XMLHttpRequest2中，使用FormData对象传送表单数据，可以不用设置请求头信息，xhr.send(new FormData(form))；
传送的数据最好经过encodeURIComponeng编码之后传送，防止不合法字符导致请求错误；

2.2 是否异步

async=false 接受到响应后，首先检查status属性，不需要检查readystatus属性的变化值
```
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
    //do
}else{
    //else
}
```
因为是同步，所以以上代码直接写在send()方法后面
async=true 异步请求，需要检测readystatus属性的变化值
- 0:未初始化，尚未调用open方法
- 1:启动，已经调用open方法，但未调用send方法
- 2:发送，已经调用send方法，尚未接收到响应
- 3:接收，已经接受到部分响应数据
- 4:完成，成功接受到全部响应数据因为readystatus值时刻在变化，所以在创建对象之后就开始监听值变化
```
var xhr = xxx;
xhr.onreadystatuschange = function(){
if(xhr.readystatus === 4){
    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
        //do
    }else{
        //else
    }
}
}
```

3. 响应

响应的数据会自动填充到xhr对象的属性：responseText/responseXML

msforest / notebook

ajax(异步js和xml) #13

1. 创建XMLHttpRequest对象

2. 请求

3. 响应