jQuery中的AJAX

原生ajax的使用流程太繁琐了, 为了更加方便的发送ajax请求, 并且处理响应数据, jQuery中为我们封装了一个 ajax 方法, 可以很方便的实现上述需求。

$.ajax()

语法：$.ajax([settings])

常用参数：

• url String 默认值: 当前页地址。发送请求的地址

• type String 请求方式 (“POST” 或 “GET”)， 默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

• async Boolean 默认为true，表示是否使用异步请求

• contentType 同上文的ajax

• data String 发送到服务器的数据

• beforeSend 发送请求前执行的函数，如果此事件返回 false，可以取消 ajax 请求

• dataType 预期服务器返回的数据类型。如果不指定，会自动识别返回的数据

• success 请求成功后的回调函数。参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。

• error 请求失败时调用的函数。参数：XHR 对象、错误信息（null、timeout、error、notmodify和parsererror）

• complete(XHR, TS) 请求完成后的回调函数，无论请求成功还是失败都会执行。参数是 XMLHTTPRequest 对象和一个描述请求类型的字符串

• jsonp String 在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 “callback=?” 这种 GET 或 POST 请求中 URL 参数里的 “callback” 部分，比如 {jsonp:’onJsonPLoad’} 会导致将 “onJsonPLoad=?” 传给服务器。

• jsonpCallback String 为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。

$.ajax({
    type:'get',
    url:'http://www.bufantec.com/api/douban/movie/in_theaters',
    data:{
        start:1,
        limit:10
    },
    success:function(res){
        // 参数res就是服务器返回的数据
        // 进行数据渲染
    }
})

快捷方法

$.get() $.post()，它们分别是get和post方法的简化版，结构：$.get(url,[data],[callback],[type])带中括号的参数可以省略，两个方法的结构一致

回调函数 callback 有两个参数：data 代表返回的内容；textstatus 代表请求状态，其值可能是success、error、notmodify、timeout其中一种。

/* 假设有一个test.json文件
{
    “name”: “zhangsan"，
       "age": 24,
       "tel": "123456789"
}
*/
$.ajax({
    url: "./test.json",
    type: "get", // 默认，可以不写
    success: function (res){
        console.log(res); // 成功后返回的文本
    },
    error: function (err){
        console.log(err); // 失败后返回的原因
    }
})

// 换成 get 方法
$.get("./test.json", function (data,textstatus){
    console.log(res);
})