Ajax笔记

Ajax 的全称为 Asynchronous JavaScript and XML ，使用Ajax技术，可以实现无刷新状态更新页面（页面的局部更新），并且实现异步提交，提升了用户的体验。

jQuery对Ajax做了大量的封装，对于封装的方式，jQuery采用了三层封装：
- 最底层：$.ajax() 全局方法。
- 第二层：load()、$.get()和$.post()，其中load()为局部方法。
- 第三层：$.getScript() 和 $.getJSON()。

1. $.ajax()

在jQuery中，$.ajax()是所有Ajax方法中最底层的方法，所有其他方法都是基于$.ajax()方法的封装。

$.ajax()只有一个参数，它是键值对的json对象。

下面是关于该json参数的说明：

键	值的类型	值的说明
url	字符串	请求的url地址
type	字符串	请求方式：get或post，默认为get
timeout	数值	设置请求超时的时间（毫秒）
data	字符串或对象	发送到服务器的数据，字符串的键值对或json键值对
dataType	字符串	指定服务器返回的数据类型，如html、xml、json、text等
success	函数	请求成功后，执行的回调函数
…	…	…

$.ajax({
    url:'test.php',
    type:'POST',
    data:'id=1&name=lisi',
    success:function(data){
        alert(data);
    }
});

2. load()

将请求页面的内容（请求的数据）加载到调用该方法的元素内部。

三个参数：

• 请求页面的url地址，类型为字符串。必选参数。
• 向请求页面发送的数据，类型为json对象或字符串。可选参数。
• 请求成功或失败后执行的回调函数。可选参数。

在a.html中加载b.html中的内容，只需一个url即可。

$('#box').load('b.html'); // 将b.html的内容加载到id=box的元素内部

如果想对载入的HTML代码进行筛选，可以在url参数后面跟一个选择器。

$('#box').load('b.html .my'); // 只加载class=my的元素

如果请求的是php文件，还可以向服务器发送数据。提交数据的方式有两种：get和post，默认为get。

$('#box').load('test.php'); // 加载php文件的输出内容

$('#box').load('test.php?id=1&name=ccc'); // 加载php文件的输出内容（以get方式向php文件传递数据），请求方式为get

$('#box').load('test.php',{id:1,name:'ccc'}); // load方法传递了两个参数，url和json数据，这种请求的方式为post

在Ajax数据载入完毕后，执行回调函数（第三个参数）。回调函数有三个可选参数：response（服务器响应的数据）、status（请求的结果状态）、XMLHttpRequest对象。

$('#box').load('test.php',{id:1,name:'ccc'},function(response,status,xhr){
    alert('返回的数据为：'+response+'，状态为：'+status+'，HTTP状态码为：'+xhr.status);
});

关于回调函数参数的说明：

• 第一个参数表示服务器返回的数据。
• 第二个参数表示请求的结果状态，如果请求成功则为success；请求失败则为error。
• 第三个参数表示XMLHttpRequest对象，该对象有多个属性（其实，前两个参数的值也包含在该对象的属性值中，只不过它们会经常用到，所以单独提出来了）。

3. $.get()和$.post()

$.get()和$.post()是全局方法，无须指定元素，而load()是局部方法，需要一个包含元素的jQuery对象作为前缀。

对于用途而言，load()适合于静态文件的异步获取，而对于需要传递数据到服务器的情况，$.get()和$.post()更加合适。

$.get()方法有四个参数，前面三个参数和load()一样，第四个参数为type，可以指定服务器返回的数据类型：xml、html、script、json、jsonp和text。第一个参数为必选参数，后面三个为可选参数。

说明： 第四个参数可以指定异步请求返回的数据格式，一般情况下，该参数是智能判断的，无须主动设置。如果设置了，则会强制按照指定的类型格式转换。

$.get('test.php?id=1',function(data){ alert(data); });    
// 直接在url后加上要发送的数据，这时就不用通过第二个参数发送数据

$.get('test.php','id=1',function(data){ alert(data); });   
// 通过第二个参数发送数据，数据会自动加到url的后面，第二个参数的格式为字符串（键值对）

$.get('test.php',{id:1},function(data){ alert(data); });   
// 通过第二个参数发送数据，数据会自动加到url的后面，第二个参数的格式为json（键值对）

上面三种写法都可以，实现的功能也一样。请求的方式都是get，返回的数据格式都是html类型的。回调函数中只传递了一个参数，用于获取服务器返回的数据。$.get()中回调函数的用法和load()一样。

$.post()方法也有四个参数，用法和$.get()相同，只不过$.post()不支持url问号传递数据的方式。

$.post('test.php', 'id=1', function(data){ alert(data); });    
// 使用字符串形式的键值对传参，数据会自动转换为http消息实体进行传递

$.post('test.php', {id:1}, function(data){ alert(data); });    
// 使用json传参，数据会自动转换为http消息实体进行传递

第四个参数（指定返回数据的类型格式）的用法：

$.post('test.php','id=1',function(data){ alert(data); },'html');      
// 指定数据格式为html，PHP文件返回的数据是纯文本，默认是html或text

$.post('test.php','id=1',function(data){ alert(data); },'json');
// 请求的是php文件，将文件中的数据强制按照json数据格式转换后返回
// 如果php文件输出的内容为json格式的字符串，则获取的数据是json对象；否则，获取不到内容。

$.post('test.xml',function(data){ alert(data); },'xml');
// 请求的是xml文件，返回的数据是xml对象

$.post('test.json',function(data){ alert(data); });        
// 请求的是json文件，返回的数据是json对象

4. $.getScript() 和 $.getJSON()

jQuery提供了一组用于特定文件异步加载的方法：$.getScript() ，用于加载特定的js文件；$.getJSON()，用于专门加载JSON文件。

$.getJSON() 是专门用于处理json文件的。使用方法和上面的类似。

$.getJSON()('test.json',function(data){ alert(data); });

$.getScript() 用于异步加载js文件，一般只需要一个参数就够了。

有时，我们希望在特定的情况下才加载某个js文件，而不是一开始就把所有的js文件都加载了，这时，我们就可以用到$.getScript()方法。

$.getScript('test.js');

5. 表单序列化

Ajax用的最多的地方是表单操作，但将表单的数据逐一获取，操作起来比较麻烦。为此，jQuery提供了一个表单元素序列化方法serialize()。

$('form').serialize();   
// 返回值为表单元素的序列化字符串，形式如：'username=lisi&password=123'（会对字符串进行一定的编码）

$.ajax({
    url:'test.php',
    type:'POST',
    data:$('form').serialize(),
    success:function(data){
        alert(data);
    }
});

serialize()不仅可以序列化整个表单的内容，还可以单独序列化单选框、复选框和下拉列表等的内容。

$(':radio').serialize();   
// 返回值为键值对的字符串，会进行一定的编码

var str=decodeURIComponent($(':radio').serialize()); console.log(str); 
// 利用decodeURIComponent()函数进行解码

除了serialize()，还有serializeArray()方法，返回的是json对象。

var obj=$(':radio').serializeArray();
alert(obj[0].name+'='+obj[0].value);

$.param()方法，可以将json对象转换为字符串形式的键值对。

var obj={id:1,name:'lisi'};
var str=$.param(obj);
alert(str);

6. ajaxStart()事件和ajaxStop()事件

在用Ajax异步请求数据时，可能会出现请求时间较长的问题，用户就会变得不耐烦而关闭网页。

如果在请求期间能给用户一些提示，如“正在努力加载中…”，用户体验就会好一些。

• ajaxStart()事件 请求开始时触发
• ajaxStop()事件 请求结束时触发

// 加载提示的显示和隐藏
$('.loading').ajaxStart(function(){
    $(this).show();
}).ajaxStop(function(){
    $(this).hide();
});

注意： 以上代码在jQuery1.8及以后的版本中不再生效，新版本中，ajaxStart()和ajaxStop()必须绑定在document元素上。

$(document).ajaxStart(function(){
    $(.loading).show();
}).ajaxStop(function(){
    $(.loading).hide();
});

如果请求时间太长，可以设置超时时间。

$.ajax({
    timeout:8000
});

如果某个ajax不想触发上述两个全局事件，可以设置取消。

$.ajax({
    global:false
});

7. 错误处理

当Ajax请求发生错误时，我们可以进行一定的处理。

$.ajax({
    url:'test.php',
    type:'POST',
    data:$('form').serialize(),
    success:function(data){
           alert(data);
    },
    error:function(xhr,errorText,errorType){
           alert(xhr.status+':'+xhr.statusText);
    }
});

$.post()使用error()方法，进行错误处理。

$.post('test.php').error(function(xhr,errorText,errorType){
    alert(xhr.status+':'+xhr.statusText);
});

$.post()还可以使用全局事件ajaxError()，进行错误处理。

// Ajax请求错误时触发该事件
$(document).ajaxError(function(e,xhr,settings,errorType){
    alert(xhr.status+':'+xhr.statusText);
});

8. 和Ajax相关的全局事件

jQuery对于Ajax操作提供了很多全局事件，如ajaxStart()、ajaxStop()、ajaxError()，除了这些，还有一些其他的全局事件。

• ajaxSend() 发送请求之前触发。
• ajaxSuccess() 请求成功时触发。对应的局部方法为success()。
• ajaxComplete() 请求完成后触发。对应的局部方法为complete()。

$(document).ajaxSend(function(){
    alert('发送请求之前触发');
}).ajaxSuccess(function(){
    alert('请求成功时触发');
}).ajaxComplete(function(){
    alert('请求完成后触发');
});

注意： 全局事件都是要绑定在document元素上，所有的Ajax请求都会触发到。而局部方法，只针对某个指定的Ajax请求。

在jQuery1.5版本以后，局部方法success()、error()和complete()，可以用done()、fail()和always()取代。

9. json和jsonp

在同一个域下，$.ajax()异步请求是可以轻松实现的。但如何实现Ajax的跨域访问？（一个服务器的文件，访问另一个服务器中的文件）

如何实现Ajax的跨域访问？有以下几种方式：

这里，都以获取json数据为例。

• 通过$.ajax()中的参数dataType，设置dataType:’jsonp’。

  $.ajax({
      url:'http://www.li.cc/test.php', // test.php输出的内容为json格式的字符串
      dataType:'jsonp',
      success:function(data){
          alert(data);
      }
  });

• 通过在url地址中加上一个callback参数。

  $.ajax({
      url:'http://www.li.cc/test.php?callback=?', 
      dataType:'json',
      success:function(data){
          alert(data);
      }
  });
  
  $.getJSON('http://www.li.cc/test.php?callback=?',function(data){
      alert(data);
  });

• 通过$.ajax()中的参数jsonp，设置jsonp:’callback’。

  $.ajax({
      url:'http://www.li.cc/test.php', 
      jsonp:'callback',
      success:function(data){
          alert(data);
      }
  });

10. jqXHR对象

$.ajax()之类的全局方法，返回的对象就是jqXHR对象。之前，我们讲过的局部方法：success()、complete()和error()就是jqXHR对象调用的。

在jQuery1.5版本以后，局部方法success()、error()和complete()，可以用done()、fail()和always()取代。

获取jqXHR对象。

var jqXHR=$.ajax({
        url:'test.php',
        type:'POST',
        data:$('form').serialize()
    });

jqXHR.success(function(data){
    alert(data);
});

使用jqXHR对象的连缀方式和$.ajax()的传参方式相比，有两大好处：

• 可连缀操作，可读性大大提高。
• 可多次执行同一个局部方法。

jqXHR.done(function(data){
    alert(data+'1');
}).done(function(data){
    alert(data+'2');
});

jqXHR.done(function(data){
    alert(data+'3');
});