jQuery中的Ajax
一、Ajax介绍
1.什么是Ajax？
异步的Javascript与XML技术（可简单理解为 无刷新的数据更新）
2.Ajax原理:
-->运用XHTML+CSS表达信息
-->运用JS操作DOM运行动态效果
-->运用XML和XSLT进行数据交换及操作
--》运用XMLHttpRequest为Agent与网页服务器进行异步数据交换
--》运用JS实现
3.Ajax优点：
(1)不需要任何浏览器插件，在任何支持JavaScript的浏览器上运行
(2)优秀的用户体验（在不更新整个页面的前提下维护数据）
(3)提高了Web性能（通过XMLHttpRequest对象向服务器端提交希望提交的数据）
(4)减轻服务器和带宽的负担；把传统方式下的一些服务器负担的工作转移到了客户端
4.Ajax缺点：
(1).可能破坏浏览器后退按钮的正常行为
(2)对搜索引擎的支持不足
(3)开发和调试工具的缺乏
(4)手持设备支持性差
补充：
(1)W3C标准（站点标准）：
网页主要有三部分组成：结构、表现和行为。
对应的标准也分三方面：结构化标准语言（XHTML和XML）、表现标准语言（CSS）、行为标准主要包括对象模型（如W3C DOM、ECMAScript）。
异步请求：局部请求，局部刷新；将请求给后台处理，但程序不等待处理结果而继续运行， 程序不等待响应，在运行时也能接收响应。
5.XMLHttpRequest对象
Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键。Ajax利用它来发送异步请求、接收响应及执行回调。
XMLHttpRequest对象的属性：
(1)Readystate
HTTP请求状态，当一个XMLHttpRequest初次建立时，这个属性的值从0开始，直到接收到完整的HTTP响应，这个值增加到4。
状态、名称和含义
|
状态 |
名称 |
描述 |
|
0 |
Uninitialized |
初始化状态。XMLHttpRequest对象已创建或已被abort()方法重置 |
|
1 |
Open |
Open()方法已调用，但send()方法为调用。请求还没有被发送 |
|
2 |
Send |
Send()方法已调用，HTTP请求已发送到Web服务器。未接收到响应 |
|
3 |
Receiving |
所有响应头都已就收到。响应体开始接收但未完成 |
|
4 |
Loaded |
HTTP响应已完全接收 |
ReadyState的值不会递减，除非当一个请求在处理过程中时调用了abort()或open()方法。
(2)responseText
从服务器接收到的响应体（不包括头部），如果还没有接收到数据，就是空字符串。
当readyState小于3，这个属性就是一个空字符串；等于3，这个属性返回目前已经接收的响应部分；等于4，这个属性保存了完整的响应体。
(3)responseXML
对请求的响应，解析为XML并作为Document对象返回。
(4)Status
由服务器返回的HTTP状态码，如200表示成功；404表示“Not Found”错误。当readystate小于3时读取这个属性会导致一个异常。
(5)statusText
此属性用名称而不是数字指定了请求的HTTP状态码。200---“OK”，404---“Not Found”。
XMLHttpRequest对象的方法：
(1)abort()
取消当前响应，关闭连接并结束任何未完成的网络活动。Abort()方法把XMLHttpRequest对象的readyState属性重置为0的状态且取消所有未决的网络活动。如：请求用了太长时间， 且响应不在必要的时候，可调用此方法。
(2)getAllResponseHeaders()
把HTTP响应头部作为未解析的字符串返回。如果readyState小于3，这个方法返回null。否则（作为单个字符串）返回服务器发送的所有HTTP响应的头部。
(3)getResponseHeader()
返回指定的HTTP响应头部的值
(4)open()
Open(method,url,async,username,password)
初始化HTTP请求参数；行为：保存供send()方法使用的请求参数，及重置XMLHttpRequest对象以复用。
(5)send()
Send(body)
发送HTTP请求，使用传递给open()方法的参数，及传递给该方法的可选请求体。
(6)setRequestHeader()
SetRequestHeader(name,value)
Name:要设置的头部名称。这个参数不应该包括空白、冒号或换行。
Value：头部的值。这个参数不应该包括换行。
向一个打开但未发送的请求设置或添加一个HTTP请求
XMLHttpRequest对象的事件句柄：
(1)Onreadystatechange
ReadyState属性改变的时候调用的事件句柄函数。当readyState为3时，它可能被调用多次。
6.JavaScript Ajax示例
1）先声明一个异步请求对象
//声明一个空对象用来装入XMLHttpRequest
Var xmlHttpRequest=null;
2) 给对象赋值，要考虑浏览器的兼容性
//IE5、IE6是以ActiveXObject的方式引入XMLHttpRequest
If(window.ActiveXObject)
{
xmlHttpReq=new ActiveXObject(“Microsoft.XMLHTTP”);
//除IE5 IE6以外的浏览器XMLHttpRequest是window的子对象
}else if(window.XMLHttpRequest)
{
//实例化一个XMLHttpRequest
xmlHttpReq=new XMLHttpRequest();
}
3)调用open()方法，指定异步请求的url
//如果对象实例化成功
If(xmlHttpReq!=null)
{
//调用open()方法并采用异步方式
xmlHttpReq.open(“GET”,”FirstHandler.ashx”,true);
调用send()方法，向服务器发送异步请求
xmlHttpReq.send(null);
xmlHttpReq.onreadystatechange=doResult;//设置回调函数
}
//回调函数
//一旦readystate值改变，将会调用这个函数，readystate=4表示完成响应
function doResult(){
if(xmlHttpReq.readyState==4)
{
If(xmlHttpReq.status==200)
{
//将xmlHttpReq.responseText的值赋给ID为resText的元素
document.getElementById(“resText”).innerHTML=xmlHttpReq.responseText;
}
}
}
二、jQuery中的Ajax
jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是load()、$.get(),第3层是$.getScript()和$.getJSON()方法。
1.load()方法
通常用来载入远程HTML代码并将加载的HTML代码插入DOM中。语法如下：
load(url[data][callback]);
参数说明：
url:表示请求的HTML页面的url
data(可选);发送到服务器端的Key/value数据(一般是json格式)，为object类型
callback(可选)：请求完成（无论成功或失败）时的回调函数
1）load()加载指定的HTML文件，代码如下：
$(function() { $("#btnload").click(function(){ //id为btnload按钮的点击事件 $("#divComment").load("Comment.html"); //id为divComment的DIV的load事件 }) });
<body>
<div id="comment" >
<ul>
<li>留言:<a href="#">李四</a></li>
<div>你好!</div>
<li>留言:<a href="#">王五</a></li>
<div>你在哪儿呢?</div>
<li>留言:<a href="#">李四</a></li>
<div class="selLoad">哈哈,不错,很精彩</div>
</ul>
</div>
</body>
2)load()还可以筛选载入文档的HTML文档,用法是:load(url selector):
$(function() { $("#btnLoad").click(function() { $("#divComment").load("Comment.html .selLad") }); })
3)传递方式
Load()方法的传递方式根据参数data来自动指定
无参数传递,是get方式
$(“#divComment”).load(“Comment.aspx”,function(){});
有参数传递,是post方式
$(“#divComment”).load(“Comment.html”,{name:”Golsing”,age:”30”},function(){});
4) 回调参数.
$("#divComment").load("Comment.html",function(responseText,textStatus,XMLHttpRequest)
{
alter($(this).html());//this指的是当前的DOM对象
alter(responseText); //请求返回的内容
alter(textStatus); //请求状态:success,error
alter(XMLHttpRequest); //XMLHttpRequest对象
});
2.jQuery.get()方法和jQuery.post()方法
$.get()和$.post()方法是jquery中的全局函数.
(1).jquery.get()方法
$.get()方法使用get方式来进行异步请求,语法结构:
$.get(url,[data],[callback],[type]);
url:待载入页面的url地址
data: (可选)待发送Key/value参数
callback : (可选)载入成功时回调函数
type: (可选)返回内容格式,xml,html,script,json,default.
(2)jQuery.post()方法
$.post()方法通过远程HTTP POST 请求爱如信息,语法结构同$.get();
补充:GET提交方式和POST提交方式的区别:
get请求会将参数跟在URL后进行传递,而post请求则是作为HTTP消息的实体内容发送给服务器
get方式对传输的数据有大小限制(通常不大于2KB),而post传递方式在理论上不受先制
get方式请求的数据会被浏览器缓存,如帐号.密码等.不安全性.而post方式相对来说安全性要高.
在ASP.NET中,get方式传递的数据用request.QueryString获取,而post用Request.Form获取,两种传递方式也都可以用Request.Params来获取
3.jQuery.getScript()方法
通过HTTP Get请求载入并执行一个JavaScript文件
$.getScript(url,callback)
-->待载入js文件地址
$.getScript(“test.js”,function({}));
4.jQuery.getJSON()方法
$.getJSON()方法用于加载JSON文件,使用方法和getScript()方法相同.
三 jQuery.ajax()方法
$.ajax()常用参数：
|
参数名称 |
参数类型 |
参数说明 |
|
url |
String |
发送请求的地址 |
|
Type |
String |
请求方式（get 或post），默认为“get”;put和delete也可使用仅部分浏览器支持 |
|
Timeout |
Number |
设置请求超时时间(毫秒)。将覆盖全局设置 |
|
Data |
Object,string |
发送到服务器的数据，将自动转换为请求字符串格式 |
|
DataType |
string |
预期服务器返回的数据类型，如果是json就会转换成一个JavaScript对象 |
|
beforeSend(XHR) |
function |
发送请求前可修改XMLHttpRequest对象的函数，是一个Ajax事件 |
|
Success |
Function |
请求成功后的回调函数 |
|
Error |
Function |
请求失败时调用 |
|
Complete |
Function |
请求完成后回调函数，参数：XMLHttpRequest对象和一个描述成功请求类型的字符串 |
|
Async |
boolean |
默认设置下，所有请求均为异步请求，如要设为同步，将选项设为flase |
|
cache |
boolean |
默认：true,dataType为script和json时默认为flase,设置为flase将不缓存页面 |
dataType类型：
xml:返回xml文档，可用jQuery处理
html:返回纯文本HTML信息；包含的script标签在插入dom时执行
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了“cache”参数。
注意：
在远程请求时（不在同一个域下），所有post请求都将转为get请求。（因为将使用DOM的script标签来加载）
--》“json”返回json数据。
--》“jsonp”:jsonp格式。使用jsonp形式调用函数时，如“myurl?callback=?” jquery将自动替换？为正确的函数名，以执行回调函数。
--》“text”:返回纯文本字符串
$.ajax({ url:"test.html", cache:false, success:function(html){ $("#result").append(html); } });
2.序列化元素
当我们用Ajax提交少量的数据时，可以将字段的值逐个添加到data参数中。
$("#btnSubmit").click(function()
{
$.get("MessageHandler.ashx",
{
//json格式传递的参数，服务器端用QueryString获取
username:$("#txtUserName").val(),
contact:$("#txtContact").val(),
message:$("#txtMessage").val()
},
//回调函数，data成功后服务器端返回的数据，格式是xml,json,html等
function(data,textStatus)
{
$("#divContact").append(data);//把返回的数据追加到div中
//textStatus参数（可省）为请求状态：success，error，notmodified,timeout等四种状态
alter(textStatus);
}
)
});
(1).serialize()方法
当要提交大量数据时，为了简便操作可使用serialize()方法
$("#btnSubmit").click(function()
{
$.get("MessageHandler.ashx",
//json格式传递的参数，服务器用QueryString获取
$("#form1").serialize(),
//回调函数，data成功后服务端返回数据，格式是xml,json,html等
function(data,textStatus)
{
$("#divContent").append(data);
alter(textStatus);
}
)
});
(2).serialieArray()方法
将DOM元素序列化后，返回JSON对象格式的数据
(3).$.param()方法
Serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化
jQuery中的全局事件
Ajax全局事件中的方法
|
方法名称 |
方法说明 |
|
ajaxSend(callback) |
AJAX请求发送前执行的函数 |
|
ajaxError(callback) |
AJAX请求发生错误时执行的函数 |
|
ajaxSuccess(callback) |
AJAX请求成功时执行的函数 |
|
ajaxComplete(callback) |
AJAX请求完成时执行的函数 |
