jQuery操作Ajax

传统的Ajax是通过XMLHttpRequest实现的，不仅代码复杂，而且浏览器兼容问题也比较多。

jQuery中通过对Ajax操作的封装，极大地简化了Ajax操作的开发过程。

• 参数url表示待请求页面的URL地址。
• data表示传递的参数。
• 参数fn表示请求成功时，执行的回调函数。
• 参数type用于设置服务器返回的数据类型，如XML、JSON、HTML、TEXT等。
• 参数options用于设置Ajax请求的相关选项。

$.post('index.php', {'id': 2, 'name': 'JS'}, function(msg) {
  console.log(msg.id + '-' + msg.name);    // 输出结果：2-JS
}, 'json');

在jQuery中对Ajax的操作方法中，$.ajax(url,[options])是底层方法。

通过该方法的options参数，可以实现$.get()、$.post()、$.getJSON()和$.getScript()方法同样的功能。

下面列举$.ajax()方法的3种常用方式。

$.ajax('index.php');

$.ajax('index.php',{
  data: {'book': 'PHP', 'sales': 2000},  // 要发送的数据
  success:function(msg){// 请求成功后执行的函数
       alert(msg);
  }
});

$.ajax({
 type: 'GET
 url: 'index.php', 
 data: {'id': 2, 'name': 'JS'},
 success: function(msg) {
     console.log(msg);
  }
});


//等价于下列代码
$.ajaxSetup({
  type: 'GET',
  url: 'index.php',
  data:{'id': 2, 'name': 'JS'},
  success: function(msg) {
   alert(msg);
  }
});
$.ajax();

在jQuery中还为操作Ajax额外的提供了一些辅助的函数以及相关的Ajax事件处理方法，方便开发。

//序列化对象
var data = {'id': 2, 'name': 'Lucy', skill: ['PHP', 'JS']};
var seri_data = $.param(data);
var deseri_data = decodeURIComponent(seri_data);
// 输出结果：id=2&name=Lucy&skill%5B%5D=PHP&skill%5B%5D=JS
console.log(seri_data); 
// 输出结果：id=2&name=Lucy&skill[]=PHP&skill[]=JS
console.log(deseri_data);

//序列化表单数据
 $('input[type=button]').on('click', function () {
    console.log($('form').serialize());
    console.log($('form').serializeArray());
  });

Ajax各个事件处理的先后顺序为ajaxStart() > ajaxSend() > ajaxSuccess()、ajaxError() > ajaxComplete() > ajaxStop()。

根据Ajax请求是否发生错误在Ajax发送后执行ajaxSuccess()还是ajaxError()方法进行相关的处理。

 $(document).ajaxError(function() {
  console.log('ajaxError');
});
$.post('index.php', {'id': 2, 'name': 'JS'}, function(msg) {
  console.log(msg.id + '-' + msg.name);
}, 'xml');