Ajax基础

1 概要

异步JavaScript和XML(Asynchronous Javascript And XML,Ajax)就是使用js来收发来自web服务器的数据，且无需重载整个页面的技术。

注 ：xml是浏览器和服务器彼此通信的格式。

2 XMLHttpRequest 对象

XMLHttpRequest 是浏览器的内置对象

2.1 基础

2.1.1 创建 XMLHttpRequest 对象

//可用于连接、请求和接受服务器中的数据
var request = new XMLHttpRequest(); 

2.1.2 XMLHttpRequest 对象主要方法

初始化XMLHttpRequest 对象

request.open("GET",url,async);
//参数一:表示请求类型的字符串，"GET"/"POST"
//参数二:请求目标的url
//参数三:表示是否以异步模式发出，true为异步(默认值，常用)，false为同步

发送请求

request.send(null);
//send()方法必须接受一个参数，表示要发送的数据，也可以是null

用于设置请求头

setRequestHeader(header,value)   
# header:请求头的key
# value:请求头的value

获取所有响应头

getAllResponseHeaders()
#返回值：所有响应头数据

获取响应头指定的header的值

getResponseHeader(header)
#header：响应头的key（字符串类型）
#返回值：响应头中指定的header对应的值

终止请求

abort()

2.1.3 XMLHttpRequest 对象主要属性

Number : readyState      每个值表示生存期中的特定状态。eg：0，1，2，3，4
Function : onreadystatechange         当readyState的值改变时自动触发执行其对应的函数（回调函数）
String : responseText         服务器返回的数据（字符串类型）
XmlDocument : responseXML        服务器返回的数据（xml对象）
Number : status         状态吗 eg：200，400
String : statusText        状态文本（字符串） eg：OK，NotFound

2.1.4 get/post请求简单实现

<script>
    function SubmitForm() {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/login", true);
        xhr.onreadystatechange = func;
        xhr.send()
        function func() {
            if (xhr.readyState == 4) {
                console.log(xhr.responseText);
            }
        }
    }
</script>

<script>
    function SubmitForm() {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/login", true);
        xhr.onreadystatechange = func;
        //在使用post提交数据时要设置请求头
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
        xhr.send()
        function func() {
            if (xhr.readyState == 4) {
                console.log(xhr.responseText);
            }
        }
    }
</script>

2.2 同步请求

以同步模式发出的请求会暂停所有js代码的执行，直到从服务器获得响应为止。其应用代码比较简洁：

var request =new XMLHttpRequest();
request.open("GET","",false);
request.send(null);

var status =request.status;
//XMLHttpRequest的status属性，包含与服务器响应一起发送的http状态码

if(status ==200){
    alert("The text file was found");
}else {
    alert("code:"+status);
}

2.3 异步请求

大多数情况下都使用异步请求，它允许 XMLHttpRequest 对象等待服务器的响应的同时，浏览器继续执行js代码。

在异步请求中， XMLHttpRequest 对象提供了 readyState 属性，该属性包含一个数值，每个数值都表示请求生存期中的特定状态：

数值	注释
0	已创建对象，但未调用open()方法
1	已调用open()方法，但未发送请求
2	已发送请求，标题和状态已接收并可用
3	接收到来自服务器的响应
4	接收完请求数据

当 readyState 发生变化的时候，都会触发onreadystatechange事件

var request =new XMLHttpRequest();

function reqReadyStateChange() {
    if(request.readyState == 4){    //浏览器知道服务器已经收到自己的请求
        
        var status =request.status;
        if(status == 200){
            alert(request.responseText);  //返回文本的数据
        }else {1720
            alert("code:"+status);
        }
    }
    
request.open("GET",url);
request.onreadystatechange = reqReadyStateChange;
request.send(null);
}

3 自定义HttpRequest模块

创建HttpRequest模块

//定义一个 HttpRequest 引用类型（类）
function HttpRequest(url, callback) {
    this.request = new XMLHttpRequest();
    this.request.open("GET", url);

    var tempRequest = this.request;  
    //this指向的是XMLHttpRequest对象，而不是reqReadyStateChange函数
    
    function reqReadyStateChange() {
        //在函数中又定义了一个函数
        if (tempRequest.readyState == 4) {
            if (tempRequest.status == 200) {
                callback(tempRequest.responseText);
            } else {
                alert("An error occurred trying to contact the server.");
            }
        }
    }
    
    this.request.onreadystatechange = reqReadyStateChange;
}

HttpRequest.prototype.send = function () {   //重构一个不需要参数的send()方法
    this.request.send(null);
};

使用以上自定义的模块

//创建一个函数用于显示接收到的数据
function handleData(text){
    alert(text);
}

var request = new HttpRequest("http://localhost:63342/123.txt",handleData);
request.send();