原生Ajax

语法:

1. 发送请求:

1.1. 创建xhr对象

new xhrRequest()

1.2. 设置请求行

如: xhr.open("GET","ajax_info.txt",true);

3.1. 说明:

1. 第三个参数为是否异步, 通常选true

1.3. 设置请求头

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.setRequestHeader("name","key");

说明:

1. 该方法可多次调用, 每调用一次, 就为请求头增加一对键值对

1.4. 设置请求体并发送请求:

xhr.send("fname=Henry&lname=Ford");

1.5. 实例:

1. 发送get请求

xhr.open("GET","ajax_info.txt",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send();

1. 发送POST请求

xhr.open("POST","/try/ajax/demo_post2.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fname=Henry&lname=Ford");

send方法中填写请求体

2. 处理响应:

2.1. 请求阶段:

xhr.readyState 存有 xhrRequest 的状态。从 0 到 4 发生变化。

• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪(我们通常等待这个阶段)

2.2. 响应状态:

child::http 状态码 xhr.status

1. 200: “OK”
2. 200到300都表示请求成功
3. 404: 未找到页面

2.3. 获取响应体

xhr对象中的属性:

1. responseText
   1. 获得字符串形式的响应数据。
2. responseXML
   1. 获得 XML 形式的响应数据。

2.4. 响应函数

https://www.runoob.com/ajax/ajax-xhrrequest-onreadystatechange.html xhr.onreadystatechange=callback 用以存储函数（或函数名），每当 xhr.readyState 属性改变时，就会调用xhr.onreadystatechange。

2.5. 实例:

xhr.onreadystatechange=function()
{
    if (this.readyState==4 && this.status>=200 && this.status<=300)
    {
        document.getElementById("myDiv").innerHTML=this.responseText;
    }
}