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()方法

Ajax核心对象

Ajax类型

Ajax请求流程

Ajax请求方法／属性

readyState:

Status:

原生JS实现XMLHttpRequest：

jQuery Ajax

写法：

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

options:

ajax请求中断

相关核心知识