Ajax 全称为:“Asynchronous JavaScript and XML”(异步JavaScript 和XML),它并不是JavaScript 的一种单一技术,而是利用了一系列交互式网页应用相关的技术所形成的结合体。使用Ajax,可以无刷新状态更新页面,并且实现异步提交,提升了用户体验。
一.Ajax 概述
Ajax 这个概念是由Jesse James Garrett 在2005 年发明的。它本身不是单一技术,是一串技术的集合,主要有:
1.JavaScript,通过用户或其他与浏览器相关事件捕获交互行为;
2.XMLHttpRequest 对象,通过这个对象可以在不中断其它浏览器任务的情况下向服务器发送请求;
3.服务器上的文件,以XML、HTML 或JSON 格式保存文本数据;
4.其它JavaScript,解释来自服务器的数据(比如PHP 从MySQL 获取的数据)并将其呈现到页面上。
由于Ajax 包含众多特性,优势与不足也非常明显。优势主要以下几点:
1.不需要插件支持(一般浏览器且默认开启JavaScript 即可);
2.用户体验极佳(不刷新页面即可获取可更新的数据);
3.提升Web 程序的性能(在传递数据方面做到按需放松,不必整体提交);
4.减轻服务器和带宽的负担(将服务器的一些操作转移到客户端);
而Ajax 的不足由以下几点:
1.不同版本的浏览器度XMLHttpRequest 对象支持度不足(比如IE5 之前);
2.前进、后退的功能被破坏(因为Ajax 永远在当前页,不会几率前后页面);
3.搜索引擎的支持度不够(因为搜索引擎爬虫还不能理解JS 引起变化数据的内容);
4.开发调试工具缺乏(相对于其他语言的工具集来说,JS 或Ajax 调试开发少的可怜)。
异步和同步
使用Ajax 最关键的地方,就是实现异步请求、接受响应及执行回调。异步与同步有什么区别呢?普通的Web
程序开发基本都是同步的,意为执行一段程序才能执行下一段,类似电话中的通话,一个电话接完才能接听
下个电话;而异步可以同时执行多条任务,感觉有多条线路,类似于短信,不会因为看一条短信而停止接受另
一条短信。Ajax 也可以使用同步模式执行,但同步的模式属于阻塞模式,这样会导致多条线路执行时又必须
一条一条执行,会让Web 页面出现假死状态,所以,一般Ajax 大部分采用异步模式。
二.load()方法
jQuery 对Ajax 做了大量的封装,使用起来也较为方便,不需要去考虑浏览器兼容性。对于
封装的方式,jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装
了第二层有三种方法:.load()、$.get()和$.post(),最高层是$.getScript()
和$.getJSON()方法。
.load()方法可以传三个参数:url(必须,请求html 文件的url 地址,参数类型为String)
、data(可选,发送的key/value 数据,参数类型为Object)、callback(可选,成功或失败
的回调函数,参数类型为函数Function)。
如果想让Ajax 异步载入一段HTML 内容,只需要一个HTML 请求的url 即可。
HTML:
<input type="button" value="异步获取数据" />
<div id="box"></div>
jQuery:
$('input').click(function () {
$('#box').load('test.html');
});
//带选择器的url
$('input').click(function () {
$('#box').load('test.html .my');
});
//不传递data,则默认get 方式
$('input').click(function () {
$('#box').load('test.jsp?url=xxx');
});
//传递data,则为post 方式
$('input').click(function () {
$('#box').load('test.jsp', {
url : 'xxx'
});
});
$('input').click(function () {
$('#box').load('test.jsp', {
url : 'xxx'
}, function (response, status, xhr) {
alert('返回的值为:' + response + ',状态为:' + status + ',
状态是:' + xhr.statusText);
});
});
注意:status 得到的值,如果成功返回数据则为:success,否则为:error。XMLHttpRequest对象属于JavaScript 范畴,可以调用一些属性如下:
属性名 | 说明 |
responseText | 作为响应主体被返回的文本 |
responseXML | 如果响应主体内容类型是"text/xml"或"application/xml", 则返回包含响应数据的XML DOM 文档 |
status | 响应的HTTP 状态 |
statusText | HTTP 状态的说明 |
HTTP | 状态字符串 | 说明 |
200 | OK | 服务器成功返回了页面 |
400 | Bad Request | 语法错误导致服务器不识别 |
401 | Unauthorized | 请求需要用户认证 |
404 | Not found | 指定的URL 在服务器上找不到 |
500 | Internal Server Error | 服务器遇到意外错误,无法完成请求 |
503 | ServiceUnavailable | 由于服务器过载或维护导致无法完成请求 |
//使用$.get()异步返回html 类型
$('input').click(function () {
$.get('test.jsp', {
url : 'xxx'
}, function (response, status, xhr) {
if (status == 'success') {
$('#box').html(response);
}
}) //type 自动转为html
});
//使用$.get()异步返回xml
$('input').click(function () {
$.get('test.xml', function (response, status, xhr) {
$('#box').html($(response).find('root').find('url').text());
}); //type 自动转为xml
});
//使用$.get()异步返回json
$.get('test.json', function (response, status, xhr) {
alert(response[0].url);
});
//使用$.post()异步返回html
$.post('test.jsp', {
url : 'xxx'
}, function (response, status, xhr) {
$('#box').html(response);
});
jQuery 提供了一组用于特定异步加载的方法:$.getScript(),用于加载特定的JS 文件;$.getJSON(),用于专门加载JSON 文件。
有时希望能够特定的情况再加载JS 文件,而不是一开始把所有JS 文件都加载了,这时使用$.getScript()方法。
//点击按钮后再加载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()是所有ajax 方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装。这个方法只有一个参数,传递一个各个功能键值对的对象。
参数 | 类型 | 说明 |
url | String | 发送请求的地址 |
type | String | 请求方式:POST 或GET,默认GET |
timeout | Number | 设置请求超时的时间(毫秒) |
data |
Object 或
String
| 发送到服务器的数据,键值对字符串或对象 |
dataType | String | 返回的数据类型,比如html、xml、json 等 |
beforeSend | Function | 发送请求前可修改XMLHttpRequest 对象的函数 |
complete | Function | 请求完成后调用的回调函数 |
success | Function | 请求成功后调用的回调函数 |
error | Function | 请求失败时调用的回调函数 |
global | Boolean | 默认为true,表示是否触发全局Ajax |
cache | Boolean |
设置浏览器缓存响应,默认为true。如果dataType
类型为script 或jsonp 则为false。
|
content | DOM |
指定某个元素为与这个请求相关的所有回调函
数的上下文。
|
contentType | String |
指定请求内容的类型。默认为
application/x-www-form-urlencoded。
|
async | Boolean |
是否异步处理。默认为true,false 为同步处理
|
processData | Boolean |
默认为true,数据被处理为URL 编码格式。如
果为false,则阻止将传入的数据处理为URL 编
码的格式。
|
dataFilter | Function | 用来筛选响应数据的回调函数。 |
ifModified | Boolean |
默认为false,不进行头检测。如果为true,进行
头检测,当相应内容与上次请求改变时,请求被
认为是成功的。
|
jsonp | String |
指定一个查询参数名称来覆盖默认的jsonp 回调
参数名callback。
|
username | String | 在HTTP 认证请求中使用的用户名 |
password | String | 在HTTP 认证请求中使用的密码 |
scriptCharset | String |
当远程和本地内容使用不同的字符集时,用来设
置script 和jsonp 请求所使用的字符集。
|
xhr | Function | 用来提供XHR 实例自定义实现的回调函数 |
traditional | Boolean |
默认为false,不使用传统风格的参数序列化。如
为true,则使用。
|
//$.ajax 使用
$('input').click(function () {
$.ajax({
type : 'POST', //这里可以换成GET
url : 'test.jsp',
data : {
url : 'xxx'
},
success : function (response, stutas, xhr) {
$('#box').html(response);
}
});
});
六.表单序列化
Ajax 用的最多的地方莫过于表单操作,而传统的表单操作是通过submit 提交将数据传输到服务器端。如果使用Ajax 异步处理的话,需要将每个表单元素逐个获取才方能提交。这样工作效率就大大降低。
//常规形式的表单提交
$('form input[type=button]').click(function () {
$.ajax({
type : 'POST',
url : 'test.jsp',
data : {
user : $('form input[name=user]').val(),
email : $('form input[name=email]').val()
},
success : function (response, status, xhr) {
alert(response);
}
});
});
使用表单序列化方法.serialize(),会智能的获取指定表单内的所有元素。这样,在面对大量表单元素时,会把表单元素内容序列化为字符串,然后再使用Ajax 请求。
//使用.serialize()序列化表单内容
$('form input[type=button]').click(function () {
$.ajax({
type : 'POST',
url : 'test.jsp',
data : $('form').serialize(),
success : function (response, status, xhr) {
alert(response);
}
});
});
//使用序列化得到选中的元素内容
$(':radio').click(function () {
$('#box').html(decodeURIComponent($(this).serialize()));
});
$(':radio').click(function () {
console.log($(this).serializeArray());
var json = $(this).serializeArray();
$('#box').html(json[0].value);
});
有时,可能会在同一个程序中多次调用$.ajax()方法。而它们很多参数都相同,这个时候可以使用jQuery 提供的$.ajaxSetup()请求默认值来初始化参数
$('form input[type=button]').click(function () {
$.ajaxSetup({
type : 'POST',
url : 'test.jsp',
data : $('form').serialize()
});
$.ajax({
success : function (response, status, xhr) {
alert(response);
}
});
});
在使用data 属性传递的时候,如果是以对象形式传递键值对,可以使用$.param()方法将对象转换为字符串键值对格式。
var obj = {a : 1, b : 2, c : 3};
var form = $.param(obj);
alert(form);
注意:使用$.param()将对象形式的键值对转为URL 地址的字符串键值对,可以更加稳定准确的传递表单内容。因为有时程序对于复杂的序列化解析能力有限,所以直接传递obj对象要谨慎。