ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

Ajax核心对象

XMLHttpRequest

创建 XMLHttpRequest 对象的语法如下:

var xhr = new XMLHttpReuqest();

Ajax类型

• get

     * 更简单更快
     * url添加参数
     * 可以缓存并可在浏览器直接访问接口
     * 根据浏览器有最大字符限制（chrome8000左右）

• post

     * 数据量更大更安全
     * data参数传递

• put

• delete

Ajax请求流程

• 实例化对象

• 设置回调函数

• 调用open方法建立连接

• 向服务器发送数据

• 响应状态处理

Ajax请求方法／属性

• open()

• send()

• onreadystatechange()

readyState:

• 0：请求未初始化（调用open()之前）

• 1：请求已提出（调用send()之前）

• 2：请求已发送（已经可以从响应得到内容头部）

• 3：请求处理中（响应中，部分数据可用，服务器未完全响应）

• 4：请求已完成（得到响应结果，可进行客户端处理）

Status:

200: 请求成功（OK）

201: 请求创建（Created）

202: 请求已接受（Accepted）

301: 永久重定向

302: 临时重定向

304: 未修改使用缓存

400: 请求参数有误

403: 请求禁止（forbidden）

404: 请求不存在（Not Found）

500: 服务器错误

原生JS实现XMLHttpRequest：

function GetXMLHttpRequest () {
    var xmlHttp;
    try{
        xmlHttp=new XMLHttpRequest();
    }catch(e){
        try{
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//IE6以上
        }catch(e){
            try{
                xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");//IE6以下
            }catch(e){
                alert("您的浏览器不支持AJAX！");
         　　    return false;
            }
        }
    }
    return xmlHttp;
}

function request(type, url, callback, data){
    var xmlHttp=GetXMLHttpRequest（）;
    xmlHttp.open(type,url,true);//异步请求
    if(type.toUpperCase() == 'GET') {
         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 添加http头，发送信息至服务器时内容编码类型
    }
    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState ==4 && (xmlHttp.status == 200 || xmlHttp.status == 304)){
            callback && callback.call(this, xmlHttp.responseText); 
        }
    }
    xmlHttp.send(data);//发送请求
}
request('GET','www.baidu.com',function(res){
    //处理返回数据
});

jQuery Ajax

写法：

$.ajax(options),option为对象参数

options:

参数名	类型	描述
url	string	请求地址
type	string	请求类型（GET，POST，PUT，DELETE），默认GET
timeout	Number	超时时间
async	Boolen	异步（true）或同步（false），默认true异步请求
data	Object，string	请求参数数据，
dataType	String	预期响应数据类型，不指定将自动根据HTTP的MIME信息返回responseXML或responseText，可用值： “xml”，‘html’，‘script’，‘json’，‘jsonp’
contentType	String	（默认："application/x-www-form-urlencoded"）
success	Function	请求成功后执行的回调函数，两个参数 返回数据，返回状态。 function(data,status){}
error	Function	请求失败执行的回调函数，有三个参数 XMLHttpRequest请求对象， 错误信息，捕获的错误对象
headers	Object	自定义请求头参数，beforeSend之前发送
beforeSend	Function	发送请求前可修改XMLHttpRequest对象的函数，如添加自定义HTTP头
complete	Function	请求完成（成功或失败）后执行的回调函数，参数：XMLHttpRequest对象，成功信息字符串
done	Function	jquery1.5之后成功回调函数，实现promise
fail	Function	jquery1.5之后失败回调函数，实现promise
always	Function	jquery1.5之后完成回调函数，实现promise
then	Function	jquery1.5之后实现promise的执行队列函数

ajax请求中断

flag标记请求状态，执行abort()方法

相关核心知识

http协议：

• 1.0：短连接

• 1.1：长连接（开始支持）

参考 链接：🔗https://segmentfault.com/a/1190000011145364