Ajax学习

XMLHttpRequest 对象

①Ajax 的核心是 XMLHttpRequest 对象。

②XMLHttpRequest 对象作用：和服务器交换数据，以至于可以更新部分网页的内容，而不需要重新加载整个页面。

创建 XMLHttpRequest 对象

现代浏览器（Chrom、IE7+、Firefox、Safari 以及 Opera）：

variable = new XMLHttpRequest();

老版本的 浏览器（IE5 和 IE6）：

variable = new ActiveXObject("Microsoft.XMLHTTP");

创建对象示例：

var xhttp;
//判断是否为现代浏览器
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();//现代浏览器
    } else {
     xhttp = new ActiveXObject("Microsoft.XMLHTTP");//老版浏览器
}

XMLHttpRequest 对象方法

• abort()——取消当前请求
• getAllResponseHeaders()——返回头部信息
• getResponseHeader()——返回指定头部信息
• open(method, url, async)——method：请求类型；url：服务器上文件的地址；async：是否异步
• send()：GET方式发送请求到服务器
• send(string)：POST方式发送请求到服务器
• setRequestHeader(header, value)：向请求添加 HTTP 头部，header：规定头部名称，value：规定头部值

XMLHttpRequest 对象属性

• onreadystatechange：定义当 readyState 属性发生变化时被调用的函数（定义当请求接收到应答时所执行的函数）
• readyState：保存 XMLHttpRequest 的状态（0: 请求未初始化，1: 服务器连接已建立，2: 请求已接收，3: 正在处理请求，4: 请求已完成且响应已就绪）
• responseText：以字符串返回响应数据
• responseXML：以XML数据格式响应数据
• statusText：返回状态文本（比如 "OK" 或 "Not Found"）

Ajax请求——同服务器交换数据

• 向服务器发送请求（open() 和 send() 方法）

xhttp.open(method, url, async);
xhttp.send();

AJAX - 服务器响应

• 每当 readyState 发生变化时就会调用 onreadystatechange 函数。
• 当 readyState 为 4，status 为 200 时，响应就绪。

xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            
       }
    };