JQUERY中的AJAX应用

浏览数：18 / 时间：2015年06月09日

Ajax介绍

1.什么是Ajax

　　Ajax全称为"Asynchronous JavaScript and XML",是由客户端js所发起的http请求代号.

　　实现无刷新的数据更新界面效果.

2.Ajax原理

　　运用XHTML+CSS来表达信息;

　　运用JavaScript操作DOM(Document Object Model)运行动态效果;

　　运用XML和XSLT进行数据交换及操作;

　　运用XMLHttpRequest为Agent与网页服务器进行异步数据交换;

　　运用JavaScript技术实现

3.Ajax的优点

　　1.不需要任何浏览器插件,在任何支持JavaScript的浏览器上运行

　　2.优秀的用户体验

　　3.提高Web程序的性能

　　4.减轻服务器和带宽的负担

4.Ajax的缺点

　　1.它可能破坏浏览器后退按钮的正常行为

　　2.对搜索引擎的支持的不足

　　3.开发和调试工具的缺乏

　　4.手持设备支持性差

5.XMLHttpRequest对象

　　XMLHttpRequest对象的属性:

　　　　1.readyState:HTTP请求的状态,这个状态的属性值从0增加到4.

状态,名称和含义
状态	名称	描述
0	Uninitialized	初始化状态.XMLHttpRequest对象已创建或被abort()方法重置.
1	Open	open()方法已调用,但是send()方法未调用.请求还没有被发送.
2	Sent	Send()方法已调用,HTTP请求已发送到Web服务器.未接受到响应.
3	Receiving	所有响应头部都已经接收到.响应体开始接收但未完成.
4	Loaded	HTTP响应已经完全接收.

　　　　2.responseText:目前为止从服务器接收到的响应体(不包括头部),或者如果还没有接收到数据的话,就是空字符串.

　　　　3.responseXML:对请求的响应,解析为XML并作为Document对象返回.

　　　　4.status:由服务器返回的HTTP状态代码.

　　　　5.statusText:对应status状态的状态名称.

　　XMLHttpRequest对象的方法:

　　　　1.abort():取消当前响应,关闭连接并且结束任何未决的网络活动.把XMLHttpRequest对象的readyState属性重置为0的状态,并且取消所有未决的网络活动.

　　　　2.getAllResponseHeaders():把HTTP响应头部作为未解析的字符串返回.如果readyState小于3,这个方法返回null.

　　　　3.getResponseHeader():返回指定的HTTP响应头部的值.

　　　　4.open():初始化HTTP请求参数,例如URL和HTTP方法,但是并不发送请求.

　　　　　　语法:

open(method,url,async,username,password)

　　　　　　参数说明:

　　　　　　　　method:是用于请求的HTTP方法.

　　　　　　　　url:参数是请求的主体.

　　　　　　　　Async:参数指示请求使用应该异步地执行.如果这个参数是false,请求是同步的.

　　　　　　　　username和password参数是可选的,为url所需的授权提供认证资格.

　　　　5.send():发送HTTP请求,使用传递给open()方法的参数,以及传递给该方法的可选请求体.

　　　　6.setRequestHeader():向一个打开但未发送的请求设置或添加一个HTTP请求.

jQuery中的Ajax

1.load()方法

　　load()方法是jQuery中最为简单和常用的Ajax方法,通常用来载入远程HTML代码并将加载的HTML代码插入DOM中.

　　语法:

load(url[, data][, callback]);

　　参数说明:

　　　　url:表示请求的HTML页面的URL

　　　　data(可选):发送到服务器端的key/value数据(一般用json格式),为object类型

　　　　callback(可选):请求完成(无论成功或失败)时的回调函数

　　1)load()加载指定的HTML文件

　　2)load()可筛选载入的HTML文档,用法是:load(url selector).

　　3)传递方式.load()方法的传递方式根据参数data来自动指定.如果没有参数传递,则采用GET方式传递,反之,则会自动转换为POST方式.

　　4)回调参数.对于必须在加载完成后才能继续的操作,load()方法提供了回调函数(callback),该函数有3个参数,分别代表请求返回的内容,请求状态和XMLHttpRequest对象.

　　　　　　load()方法中.无论Ajax请求是否成功,只要当请求完成(complete)后,回调函数(callback)就被触发.

2.jQuery.get()方法与jQuery.post()方法

　　1.jQuery.get()方法

　　　　$.get()方法使用GET方式来进行异步请求.

　　　　　　语法:

$.get(url[, data][, callback][, type])

　　　　　　参数说明:

　　　　　　　　url:待载入页面的URL地址;

　　　　　　　　data:(可选)待发送Key/value参数;

　　　　　　　　callback:(可选)载入成功时回调函数.

　　　　　　　　type:(可选)返回内容格式, xml,html,script,json,text,_default.

　　　　$.get()方法的回调函数:

//回调函数
function(data, textStatus{
        //代码       
}

　　　　　　参数说明:

　　　　　　　　data:参数代表请求返回的内容,

　　　　　　　　textStatus:参数代表请求状态,对应有success,error,notmodified,timeout等四种状态.

　　2.jQuery.post()方法

　　　　$.post()方法通过远程HTTP POST请求载入信息.

　　　　　　语法:

$.post(url[, data][, callback][, type])

　　　　　　参数说明:

　　　　　　　　url:待载入页面的URL地址;

　　　　　　　　data:(可选)待发送Key/value参数;

　　　　　　　　callback:(可选)载入成功时回调函数.

　　　　　　　　type:(可选)返回内容格式,xml,html,script,json,text,_default.

　　　　　　GET提交方法与POST提交方法存在如下的区别:

　　　　　　　　GET请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给Web服务器.

　　　　　　　　GET方式对传输的数据有大小限制(通常不能大于2KB),而使用POST方式传递的数据量要比GET方式大得多(理论上不受限制).

　　　　　　　　GET方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号和密码.在某种情况下,GET方式会带来严重的安全性问题,而POST方式相对来说安全性要高.

　　　　　　　　GET方式和POST方式传递的数据在服务器端的获取也不相同.在ASP.NET中,GET方式的数据可以用Request.QueryString获取,而POST方式可以用Request.Form获取,两种方式也都可以用Request.Params来获取.

　　3.jQuery.getScript()方法

　　　　通过HTTP GET请求载入并执行一个JavaScript文件.

　　　　　　语法:

$.getScript(url,callback)

　　　　　　参数说明:

　　　　　　　　url:待载入JS文件地址.

　　　　　　　　callback(可选):成功载入后回调的函数.

　　4.jQuery.getJSON()方法

　　　　$.getJSON()方法用于加载JSON文件,参数和使用方法与$.getScript()方法的用法相同.

3.jQuery.ajax()方法　

　　$.ajax()方法是jQuery底层AJAX实现.简单易用的高层实现是$.get(),$.post()等.

　　　　结构:

$.ajax(options)

　　　　该方法只有一个参数,参数以key/value的形式存在,所有参数都是可选的,常用参数见表:

常用参数
参数名称	参数类型	参数说明
url	string	(默认:当前页地址)发送请求的地址
type	string	(默认:"GET") 请求方式 ("POST"或"GET"),默认为"GET".注意:其它HTTP请求方法,如PUT和DELETE也可以使用,但仅部分浏览器支持.
timeout	number	设置请求超时时间(毫秒).此设置将覆盖全局设置.
data	object,string	发送到服务器的数据.将自动转换为请求字符串格式.GET请求中将附加在URL后.查看processData选项说明以禁止此自动转换. 必须为key/value格式.如果为数组,jQuery将自动为不同值对应同一个名称.
datatype	string	预期服务器返回的数据类型.如果不指定,jQuery将自动根据HTTP包MIME信息来智能判断,比如XML MIME类型就被识别为XML.在1.4中,JSON就会生成一个JavaScript对象,而script则会执行这个脚本.随后服务器端返回的数据会根据这个值解析后,传递给回调函数.
beforeSend(XHR)	function	发送请求前可修改XMLhttpRequest对象的函数,如添加自定义HTTP头.XMLHttpRequest对象是唯一的参数. 这是一个Ajax事件.如果返回false可以取消本次ajax请求.
success	function	请求成功后的回调函数,参数:由服务器端返回,并根据dataType参数进行处理后的数据;描述状态的字符串,Ajax事件.
error	function	(默认:自动判断(xml或html))请求失败时调用此函数.有以下三个参数:XMLHttpRequest对象,错误信息,(可选)捕获的一场对象
complete(XHR, TS)	function	请求完成后回调函数(请求成功或失败之后均调用).参数XMLHttpRequest对象和一个描述成功请求类型的字符串.
async	boolean	(默认:true)默认设置下,所有请求均为异步请求.如果需要发送同步请求,请将此选项设置为false. 注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行.
cache	boolean	(默认:true,dataType为script和jsonp时默认为false) jQuery1.2新功能,设置为false将不缓存此页面.

4.序列化元素

　　1.serialize()方法:序列表表格内容为字符串. 能够将DOM元素内容序列化为字符串,用于Ajax请求.

　　2.serializeArray()方法:将DOM元素序列化后,返回JSON对象格式的数据,需要使用插件或者第三方库进行字符串化操作.

　　3.$.param()方法:serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化.

5.jQuery中的Ajax全局事件

Ajax全局事件中的方法
方法名称	方法说明
ajaxStart(callback)	AJAX请求开始的时候
ajaxStop(callback)	AJAX请求结束后
ajaxSend(callback)	AJAX请求发送前执行的函数
ajaxError(callback)	AJAX请求发生错误时执行的函数
ajaxSuccess(callback)	AJAX请求成功时执行的函数
ajaxComplete(callback)	AJAX请求完成时执行的函数