Ajax和jQuery中的使用

Ajax全称为“Asynchronous JavaScript and XML” (异步JavaScript和XML),它可以使浏览器不刷新而更新页面数据。Ajax的优势:

  1. 不需要插件支持。
  2. 优秀的用户体验。
  3. 提供Web程序的性能。
  4. 减轻服务器和宽带负担。

Ajax过程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象

request.onreadystatechange = function () { // 状态发生变化时,函数被回调
if (request.readyState === 4) { // 成功完成
// 判断响应结果:
if (request.status === 200) {
// 成功,通过responseText拿到响应的文本:
console.log(request.responseText);
} else {
// 失败,根据响应码判断失败原因:
console.log(request.status);
}
} else {
// HTTP请求还在继续...
}
}

request.open('GET', '/api/categories');
request.send();

对于低版本的IE,需要换一个ActiveXObject对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var request = new ActiveXObject('Microsoft.XMLHTTP'); // 新建Microsoft.XMLHTTP对象

request.onreadystatechange = function () { // 状态发生变化时,函数被回调
if (request.readyState === 4) { // 成功完成
// 判断响应结果:
if (request.status === 200) {
// 成功,通过responseText拿到响应的文本:
console.log(request.responseText);
} else {
// 失败,根据响应码判断失败原因:
console.log(request.status);
}
} else {
// HTTP请求还在继续...
}
}

// 发送请求:
request.open('GET', '/api/categories');
request.send();

如果你想把标准写法和IE写法混在一起,可以这么写。

1
2
3
4
5
6
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject('Microsoft.XMLHTTP');
}

默认情况下,JavaScript在发送AJAX请求时,URL的域名必须和当前页面完全一致。

完全一致的意思是

  1. 域名要相同 : www.example.com和example.com不同
  2. 协议要相同 : http和https不同
  3. 端口号要相同 默认是:80端口,它和:8080就不同。

如果浏览器支持HTML5,那么就可以一劳永逸地使用新的跨域策略:CORS了。CORS全称Cross-Origin Resource Sharing,是HTML5规范定义的如何跨域访问资源。

jQuery中的Ajax

jQuery对AJax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是load()、$.get()和$.post()方法,第3层是$.getScript()和$.getJSON()方法。

load()方法

load()方法是jQuery中最简单和最常使用的Ajax方法,能载入远程HTML代码并插入到DOM中。

1
load(url [, data] [, callback])
参数名称类型说明
urlString请求HTML页面的URL地址
data(可选)Object发送至服务器的key/value数据
callback(可选)Function请求完成时的回调函数,无论请求成功或失败
1
2
3
4
5
$(function(){
$("#send").click(function(){
$("#resText").load("test.html");
})
})

load()方法如果有参数,则请求为post方式,否则为get方式

1
2
3
4
5
//无参数,GET方式
$("#resText").load("test.html");

//有参数,POST方式
$("#resText").load("test.php", {name:"rain", age:"22"}, function(){//...});

load()方法的回调函数有3个参数,分别代表请求返回的内容、请求状态和XMLHttpRequest对象。

1
2
3
$("#resText").load("test.html", function(responseText, textStatus, XMLHttpRequest){

});

$.get()和$.post()

1
$.get(url [, data] [, callback] [, type]);
参数名称类型说明
urlString请求的HTML页的URL地址。
data(可选)Object发送至服务器的key/value数据作为QueryString附加到URL中。
callback(可选)Function载入成功时的回调函数。
type(可选)String返回内容格式,包括xml,html,script,json,text和_default

$.post()和$.get()的结构和参数相同,只是提交方式的不同。

$.getScript()和$.getJSON()

有时候在页面初次加载的时候,取得全部的JavaScript是没有必要的。所以jQuery提供了$.getScript()方法来直接加载js文件。

1
2
3
4
5
$(function(){
$("#send").click(function(){
$.getScript('test.js');
})
})

$.getJSON()方法的用法和$.getScript()相同,用于加载json文件。

1
2
3
4
5
$(function(){
$("#send").click(function(){
$.getJSON("test.json");
})
})

$.ajax()方法

$.ajax()方法是jQuery最底层的Ajax实现。

1
$.ajax(options);

例如:

1
2
3
4
5
6
7
8
9
$(function(){
$('send').click(function(){
$.ajax({
type:"GET",
url:"test.js",
dataType:"script"
})
})
})

serialize()方法

有时候我们的表单很复杂,我们可以使用serialize()方法对一个jQuery对象序列化为字符串。

1
2
3
4
5
$('send').click(function(){
$.get('get1.php', $('#form1').serialize(), function(data, textStatus){
$("#resText").html(data);
})
})

和serialize()方法类似的还有serializeArray()方法。

此外,我们还可以使用serialize()底层的核心方法$.param()方法来对一个数组或对象进行key/value进行序列化。

1
2
3
var obj = {a:1, b:2, c:3}
var k = $.param(obj);
alert(k); //输出a=1&b=2&c=3

全局事件

比如在Ajax加载的时候,我们显示一个加载动画。

1
2
3
4
5
6
$("#loading").ajaxStart(function(){
$(this).show();
})
$("#loading").ajaxStop(function(){
$(this).hide();
})