jQuery--Ajax

http://edu.51cto.com/lesson/id-15870.html

jquery中对Ajax进行封装：

最底层封装：$.ajax()这是个全局方法；

第二层封装：.load()/.get()/.post()；局部方法，由jquery对象调用

最高层：$.getScript()/$.getJSON()；

一、.load()方法

格式：.load(urlString, data, callback);

注意：

1、data（格式为：{key:'value'}）, callback(格式为：function(){})；

2、data和callback参数可选，如果没有data数据，则默认使用get方法，当data数据存在时，使用post方法；

3、get方法传递参数的方法是在url后直接跟键值对如“?key=value”；

使用范围：

适合静态页面的获取。

使用方法：

//HTML

<input type="button" value="异步获取数据" />

<div id="box"></div>

//jQuery

$('input').click(function () {

$('#box').load('test.html');

});

//带选择器的 url，注意：该方法首先从服务器读取整个test.html文件，然后再过滤出.my的元素放入到#box容器中。

$('input').click(function () {

$('#box').load('test.html .my');

});

//不传递 data，则默认 get 方式

$('input').click(function () {

$('#box').load('test.php?url=ycku');

});

//传递 data，则为 post 方式

$('input').click(function () {

$('#box').load('test.php', {

url : 'ycku'

});

});

在ajax数据载入完毕后，执行回调函数，其有三个参数

$('input').click(function () {

$('#box').load('test.php', {

url : 'ycku'

}, function (response, status, xhr) {

alert('返回的值为：' + response + '，状态为：' + status + '，

状态是：' + xhr.statusText);

});

});

注意：如果ajax成功执行，则status值为success；否则为error。

xhr是一个XMLHttpRequest对象可以调用其相关属性：

二、$.get()/$.post()

$.get()

格式：$.get(urlString, data, callback, type);

注意：

1、data（格式为：{key:'value'}）, callback(格式为：function(){})；

2、type值为： xml、html、script、json、jsonp 和 text。

使用范围：

$.post()用法和$.get()类似。

三、$.getScript()和$.getJSON()

$.getScript()用于加载特定的javascript文件；

$.getJSON()专门加载JSON文件；

使用方法：

//点击按钮后再加载 JS 文件

$('input').click(function () {

$.getScript('test.js');

});

$.getJSON()方法是专门用于加载 JSON 文件的，使用方法和之前的类似。

$('input').click(function () {

$.getJSON('test.json', function (response, status, xhr) {

alert(response[0].url);

});

});

四、$.ajax

最底层方法，其他方法都基于该方法调用。

格式：$.ajax(params);//params是以{key:'value'}的格式出现

五、表单序列化

方法： $('form').serialize()会智能获取指定表单中的所有元素，自动转换为字符串，字符串格式为name1=value1&&name2=value2

使用方法：

//使用.serialize()序列化表单内容

$('form input[type=button]').click(function () {

$.ajax({

type : 'POST',

url : 'test.php',

data : $('form').serialize(),

success : function (response, status, xhr) {

alert(response);

}

});

JSON数据序列化：.serializeArray()，转换后的json对象格式为{name1:'value1, name2:'value2''}

如果多个ajax方法的参数都是相同的，可以使用$.ajaxSetup({})方法事先设置好，当程序使用$.ajax()方法时就无需在设置这些参数了。

$.param(obj)方法可以将一个对象{key:value}转化为字符串键值对key=value。

--------------------------------------------------------------------------------------ajax进阶------------------------------------------------------------------------------------------------------

一、加载请求

全局事件：

$(document).ajaxStart()
在ajax请求开始时触发；

$(document)..ajaxStop()
在所有ajax请求结束后激活；

使用方法：

$(document).ajaxStart(function () {

$('.loading').show();

}).ajaxStop(function () {

$('.loading').hide();

});

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

$.ajax({

timeout : 500

});

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

$.ajax({

global : false

});

二、错误处理

//$.ajax()使用属性提示错误

$.ajax({

type : 'POST',

url : 'test1.php',

data : $('form').serialize(),

success : function (response, status, xhr) {

$('#box').html(response);

},

error : function (xhr, errorText, errorStatus) {

alert(xhr.status + ':' + xhr.statusText);

}

});

//$.post()使用连缀.error()方法提示错误，连缀方法将被.fail()取代

$.post('test1.php').error(function (xhr, status, info) {

alert(xhr.status + ':' +xhr.statusText);

alert(status + ':' + info);

});

//$.post()使用全局.ajaxError()事件提示错误

$(document).ajaxError(function (event, xhr, settings, infoError)
{

alert(xhr.status + ':' +xhr.statusText);

alert(settings+ ':' + info);

});

三、请求全局事件

$(document).ajaxStart();

$(document).ajaxStop();所有请求完成后触发

$(document).ajaxError();任何请求发生错误时触发，对应一个局部方法.error()

$(document).ajaxSuccess();任何请求成功完成后触发，对应一个局部方法.success()

$(document).ajaxComplete();任何请求完成后即触发，对应一个局部方法.complete()

$(document).ajaxSend();在请求发送之前触发，对应一个属性beforeSend

对于一些全局事件方法的参数，大部分为对象，而这些对象有哪些属性或方法能调用，

可以通过遍历方法得到。

//遍历 settings 对象的属性

$(document).ajaxSuccess(function (event, xhr, settings) {

for (var i in settings) {

alert(i);

}

});

//$.post()请求完成的局部方法.complete()

$.post('test.php', $('form').serialize(), function (response, status, xhr) {

alert('成功');

}).complete(function (xhr,status) {

alert('完成');

});

//$.post()请求完成的全局方法.ajaxComplete()

$(document).ajaxComplete(function (event, xhr, settings) {

alert('完成');

});

//$.post()请求发送之前的全局方法.ajaxSend()

$(document).ajaxSend(function (event, xhr, settings) {

alert('发送请求之前');

});

//$.ajax()方法，可以直接通过属性设置即可。

$.ajax({

type : 'POST',

url : 'test.php',

data : $('form').serialize(),

success : function (response, status, xhr) {

$('#box').html(response);

},

complete : function (xhr, status) {

alert('完成' + ' - ' + xhr.responseText + ' - ' + status);

},

beforeSend : function (xhr, settings) {

alert('请求之前' + ' - ' + xhr.readyState + ' - ' + settings.url);

}

});

注：jQuery1.5后，使用.success()、.error()和.complete()连缀的方法可以使用.done(), .fail()和.always()取代。

四、JSON和JSONP

如果在同一个域下，$.ajax()方法只要设置 dataType 属性即可加载 JSON 文件。

//$.ajax()加载 JSON 文件

$.ajax({

type : 'POST',

url : 'test.json',

dataType : 'json',

success : function (response, status, xhr) {

alert(response[0].url);

}

});

如果想跨域操作文件的话，我们就必须使用 JSONP。

//$.ajax()方法跨域获取 JSON

$.ajax({

url : 'http://www.li.cc/test.php?callback=?',

dataType : 'jsonp',

success : function (response, status, xhr) {

console.log(response);

alert(response.a);

}

});

五、jqXHR对象

//获取 jqXHR 对象，查看属性和方法

var jqXHR = $.ajax({

type : 'POST',

url : 'test.php',

data : $('form').serialize()

});

for (var i in jqXHR) {

document.write(i + '<br />');

}

注意：如果使用 jqXHR 对象的话，那么建议用.done()、.always()和.fail()代

替.success()、.complete()和.error()。以为在未来版本中，很可能将这三种方法废弃取消。

//成功后回调函数

jqXHR.done(function (response) {

$('#box').html(response);

});

使用 jqXHR 的连缀方式比$.ajax()的属性方式有三大好处：

1.可连缀操作，可读性大大提高；

2.可以多次执行同一个回调函数；

3.为多个操作指定回调函数；

//同时执行多个成功后的回调函数

jqXHR.done().done();

//多个操作指定回调函数

var jqXHR = $.ajax('test.php');

var jqXHR2 = $.ajax('test2.php');

$.when(jqXHR, jqXHR2).done(function (r1,r2) {

alert(r1[0]);

alert(r2[0]);

});