ajax

异步加载

ajax

发送请求

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

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行。

XMLHttpRequest 只是实现 Ajax 的一种方式。

本项目中主要采用了jQuery(js库)中的ajax方法实现异步加载，这里只介绍jQuery中的ajax方法

$.ajax()的用法主要有两种。

$.ajax(url[, options])
$.ajax([options])

上面代码中的url，指的是服务器网址，options则是一个对象参数，设置Ajax请求的具体参数。

$.ajax({
  async: true,
  url: '/url/to/json',
  type: 'GET',
  data : { id : 123 },
  dataType: 'json',
  timeout: 30000,
  success: successCallback,
  error: errorCallback,
  complete: completeCallback,
  statusCode: {
        404: handler404,
        500: handler500
  }
})
 
function successCallback(json) {
    $('<h1/>').text(json.title).appendTo('body');
}
 
function errorCallback(xhr, status){
    console.log('出问题了！');
}
 
function completeCallback(xhr, status){
    console.log('Ajax请求已结束。');
}

ajax方法可以有多个参数，以下仅介绍较常用参数

• async：该项默认为true，如果设为false，则表示发出的是同步请求。

• beforeSend：指定发出请求前，所要调用的函数，通常用来对发出的数据进行修改。

• cache：该项默认为true，如果设为false，则浏览器不缓存返回服务器返回的数据。注意，浏览器本身就不会缓存POST请求返回的数据，所以即使设为false，也只对HEAD和GET请求有效。

• complete：指定当HTTP请求结束时（请求成功或请求失败的回调函数，此时已经运行完毕）的回调函数。不管请求成功或失败，该回调函数都会执行。它的参数为发出请求的原始对象以及返回的状态信息。

• contentType：发送到服务器的数据类型。

• context：指定一个对象，作为所有Ajax相关的回调函数的this对象。

• crossDomain：该属性设为true，将强制向相同域名发送一个跨域请求（比如JSONP）。

• data：向服务器发送的数据，如果使用GET方法，此项将转为查询字符串，附在网址的最后。

• dataType：返回值类型，服务器返回的数据类型，可以设为text、html、script、json、jsonp和xml。

• error：请求失败时的回调函数，函数参数为发出请求的原始对象以及返回的状态信息。

• headers：指定HTTP请求的头信息。

• ifModified：如果该属性设为true，则只有当服务器端的内容与上次请求不一样时，才会发出本次请求。

• password：指定HTTP认证所需要的密码。

• statusCode：值为一个对象，为服务器返回的状态码，指定特别的回调函数。

• success：请求成功时的回调函数，函数参数为服务器传回的数据、状态信息、发出请求的原始对象。

• timeout: 等待的最长毫秒数。如果过了这个时间，请求还没有返回，则自动将请求状态改为失败。

• type：向服务器发送信息所使用的HTTP动词，默认为GET，其他动词有POST、PUT、DELETE。

• url：服务器端网址。这是唯一必需的一个属性，其他属性都可以省略。

• username：指定HTTP认证的用户名。

• xhr：指定生成XMLHttpRequest对象时的回调函数。

  这些参数之中，url可以独立出来，作为ajax方法的第一个参数。也就是说，上面代码还可以写成下面这样。

$.ajax('/url/to/json',{
  type: 'GET',
  dataType: 'json',
  success: successCallback,
  error: errorCallback
})

返回值

ajax方法返回的是一个deferred对象，可以用then方法为该对象指定回调函数

$.ajax({
  url: '/data/people.json',
  dataType: 'json'
}).then(function (resp){
    //对返回数据进行处理
  console.log(resp.people);
})

抛开方便的ajax方法，jQuery还提供了大量扩展，极大的简化了js编程，值得一学。

打赏