ajax优点：能在不刷新整个页面的前提下更新数据，使用户操作与服务器响应异步化。
ajax缺点：破坏浏览器“前进”、“后退”按钮的正常功能，搜索引擎爬虫不能理解那些奇怪的JS代码和因此引起的页面内容的变化。
XMLHttpRequest对象：它是ajax实现的关键——发送异步请求、接收响应及执行回调都是通过它来完成的。
//用传统的JavaScript实现的一个简单的ajax例子
var xhr;
if(window.ActiveObject){
xhr=new ActiveObject('Microsoft.XMLHTTP'); //IE6是以ActiveObject方式来引入XMLHttpRequest对象的
}else if{window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
throw new Error('Ajax is not supported by this browser');
}
xhr.onreadystatechange=function(){ //当readyState值被改变时，会激发一个readystatechange事件，用readystatechange属性来注册回调函数
if(this.readyState==4){
if(this.status>=200&&this.status<300){
document.getElementById('someContainer').innerHTML=this.responseText();
}
}
} //指定HTTP方法和要使用的服务器URL，默认情况下async参数为true
xhr.open('GET','test.php',true);
xhr.send();
get方法和post方法的区别：
1.get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器。
2.get方式对传输的数据有大小限制（通常不能大于2kb），而使用post方式传递的数据量要比get方式大得多（理论上不受限制）。
3.get方式请求的数据会被浏览器缓存起来。但这样也会带来安全性问题。
4.get请求应该只用于获取数据时使用，可能需要向服务器发送一些参数数据。如果向服务器发送数据的目的是为了进行改变，就应该使用post请求。
jQuery中的ajax：在jQuery中，$.ajax()方法属于最底层的方法，第2层是load()、$.get()和$.post()方法，第3层是$.getScript()和$.getJSON()方法。
load(url[,parameters][,callback])：parameters（字符串｜对象｜数组），当使用parameters来提供请求参数时，如果使用的是散列对象或者数组，则通过post方式来发起请求，否则发起get请求。可以在URL添加紧随空格的选择器后缀来指定选择器。
$('.injectMe').load('/someResource div');
$.get(url[,parameters][,callback][,type])：parameters（字符串｜对象｜数组），callback（在请求完成时回调，传入的第一个参数是响应主体（根据type来解析），第二个参数是文本信息，第三个参数包含对XHR实例的引用），type（指定如何解析响应主体，值为html、text、xml、json、script或者jsonp，它的默认值会根据响应头中定义的内容类型来智能确定，比如Content-Type:text/html表示响应主体为HTML片段，Content-Type:application/json表示响应主体为JSON格式的字符串。）
$.post(url[,parameters][,callback][,type])：parameters（字符串｜对象｜数组），callback（在请求完成时回调，传入的第一个参数是响应主体（根据type来解析），第二个参数是文本信息，第三个参数包含对XHR实例的引用），type（指定如何解析响应主体，值为html、text、xml、json、script或者jsonp，它的默认值会根据响应头中定义的内容类型来智能确定）
//服务器返回HTML数据，不需要进行处理
$('#send').click(funciton(){
$.get('get1.php',{
username:$('#username').val(),
content:$('#content').val()
},function(data,textStatus){
$('#resText').html(data);
});
});
//服务器返回的数据格式为XML，需要对返回的数据进行处理
//处理XML文档与处理HTML文档一样，也可以使用常规的attr()、find()、filter()以及其他方法
$('#send').click(function(){
$.get('get2.php',{
username:$('#username').val(),
content:$('#content').val()
},function(data,textStatus){
var username=$(data).find('comment').attr('username');
var content=$(data).find('comment content').text();
var textHtml="<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
$('#resText').html(txtHtml); //将返回的数据添加到页面上
});
});
//服务器返回的数据格式为JSON，需要对返回的数据进行处理
$('#send').click(function(){
$.get('get3.php',{
username:$('#username').val(),
content:$('#content').val()
},function(data,textStatus){
var username=data.username;
var content=data.content;
var txtHtml="<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
$('#resText').html(txtHtml);
},'json');
});
$.getScript(url[,callback])：发起get请求来获取由url指定的脚本。
//new.stuff.js
alert("I'm inline!");
var someVariable="Value of someVariable";
function someFunction(value){
alert(value);
}; //只有在单击#loadButton元素后，才能单击#inspectButton元素来显示警告框alert(value)
$(function(){
$("#loadButton").click(function(){
$.getScript("new.stuff.js");
});
$("#inspectButton").click(function(){
someFunction(someVariable);
});
});
$.getJSON(url[,parameters][,callback])：使用get请求。parameters（字符串｜对象｜数组），callback第一个参数是把响应主体作为JSON表示法解析所得到的数据值，第二个参数是状态文本，第三个参数提供了一对XHR实例的引用。
$(function(){
$('#send').click(function(){
$.getJSON('test.json',function(data){
$('#resText').empty();
var html=' ';
$.each(data,function(commentIndex,comment){
html+='<div class="comment"><h6>'+comment['username']+':</h6><p class="para">'+comment['content']+'</p></div>';
});
$('#resText').html(html);
});
});
});
//通过使用JSONP形式的回调函数来加载其他网站的JSON数据
//例如从http:/ /Flickr. com搜索汽车类别的4张最新图片
$(function(){
$('#send').click(function(){
$.getJSON("http:/ /api.flickr. com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback?",
function(data){
$.each(data.items,function(i,item){
$('<img class="para"/>').attr('src',item.media.m).appendTo('#resText');
if(i==3){
return false;
}
});
}
);
});
});
$.ajax(options)
|
参数名称 |
类型 |
说明 |
|
url |
String |
|
|
type |
String |
请求方式为post或get(默认) |
|
timeout |
Number |
设置请求超时时间 |
|
data |
Object或String |
发送到服务器的数据。无论是哪种参数类型，$.ajax()实用函数都会负责对值进行编码。 |
|
dataType |
String |
用来识别预计由响应返回的数据类型。如果不指定，jQuery将自动根据HTTP包含的MIME信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型有：xml、html、script、json、jsonp、text |
|
cache |
boolean |
如果为false，则确保浏览器不会缓存响应，默认为true |
|
content |
元素 |
指定某个元素为与这个请求相关的所有回调函数的上下文 |
|
global |
boolean |
如果为false，则禁止触发全局ajax事件。默认为true |
|
contentType |
String |
指定请求内容的类型。如果省略，则默认值为application/x-www-form-urlencoded，与表单提交所使用的默认值的类型相同 |
|
beforeSend |
Function |
发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在函数中返回false将会取消请求 function(XMLHttpRequest){ this; //调用本次Ajax请求时传递的options参数 } |
|
success |
Function |
如果对请求的响应显示的是成功状态码则调用此函数。第一个参数是由服务器返回，并根据dataType参数进行处理后的数据。第二个参数是包含状态值的字符串——在这种状态下，总是success。第三个参数提供了一个对XHR实例的引用。 function(data,testStatus){ //data 可能是xmlDoc、jsonObj、html、text等 this; //调用本次Ajax请求时传递的options参数 } |
|
error |
Function |
如果对请求的响应返回的是错误状态码则调用此函数。传入这个函数的参数有三个：XHR实例、状态消息字符串（在这个情况下，是error、timeout、notmodified、或parseerror）以及可选的异常对象。 function(XMLHttpRequest,textStatus,errorThrown){ //通常情况下textStatus和errorThown只有其他一个包含信息 this; //调用本次Ajax请求时传递的options参数 } |
|
complete |
Function |
在请求完成后调用的函数。传入的参数有两个：XHR实例和状态信息字符串(success或error)。如果也指定了success或error回调函数，则会在回调函数之后调用该函数。 function(XMLHttpRequest){ this; //调用本次Ajax请求时传递的options参数 } |
|
async |
boolean |
如果为true，则将请求作为同步请求来提交。默认为false |
|
processData |
boolean |
如果设置为false，则阻止将传入的数据处理为URL编码的格式。默认为true |
|
dataFilter |
Function |
用来筛选响应数据的回调函数 |
|
jsonp |
String |
指定一个查询参数名称来覆盖默认的jsonp回调参数名callback |
|
username |
String |
在HTTP认证请求中使用的用户名 |
|
password |
String |
在HTTP认证请求中使用的密码 |
|
scriptCharset |
String |
当远程和本地内容使用不同的字符集时，用来设置script和jsonp请求所使用的字符集 |
|
xhr |
Function |
用来提供XHR实例自定义实现的回调函数 |
|
traditional |
boolean |
如果为true，则使用传统风格的参数序列化。 |
$.ajax()方法是jQuery最底层的Ajax实现，因此可以用它来代替其他的所有ajax方法。
//代替$.getScript()方法
$(function(){
$('#send').click(function(){
$.ajax({
type:"GET",
url:"text.js",
dataType:"script"
});
});
});
//代替$.getJSON()方法
$(function(){
$('#send').click(function(){
$.ajax({
type:"GET",
url:"test.json",
dataType:"json",
success:function(data){
//代码
});
});
});
});
$.ajaxSetup(options)：定义了一组默认的Ajax选项，这些属性与$.ajax()函数的属性完全一样。（通过这个函数设置的默认值不会应用到load()方法，也不会覆盖$.get()和$.post()等实用函数的HTTP请求方式。）
//随后的每个Ajax调用都会使用这些默认值，除非使用传入Ajax实用函数的属性来显式地覆盖它们。
$.ajaxSetup({
type:'POST',
timeout:5000,
dataType:'html'
});
Ajax事件：全局事件是被触发的自定义事件，而局部事件表现为传递给$.ajax()（及其相关的便捷函数）的回调函数。
|
事件名称 |
类型 |
描述 |
|
ajaxStart |
全局 |
当Ajax请求开始时触发，只要没有其他请求处于激活状态。对于并发的请求，这个事件只会为第一个请求触发。不传递任何参数 |
|
beforeSend |
局部 |
在发起请求之前调用，以便允许在向服务器发送请求之前修改XHR实例，或者通过返回false来取消请求 |
|
ajaxSend |
全局 |
在发起请求之前触发，为了允许在向服务器发送请求之前修改XHR实例。 |
|
success |
局部 |
当请求返回一个成功的响应时调用 |
|
ajaxSuccess |
全局 |
当请求返回一个成功的响应时触发 |
|
error |
局部 |
当请求返回一个错误的响应时调用 |
|
ajaxError |
全局 |
当请求返回一个错误的响应时触发 |
|
complete |
局部 |
当请求结束时调用，而不管状态（是否为同步的请求）如何。 |
|
ajaxComplete |
全局 |
当请求结束时调用，而不管状态（是否为同步的请求）如何。 |
|
ajaxStop |
全局 |
当Ajax请求结束并且没有其他并发的请求处于激活状态时触发。不传递任何参数 |
除了使用bind()来创建事件处理器，jQuery还提供了一组方便的函数来创建。
ajaxComplete(callback)、ajaxError(callback)、ajaxSend(callback)、ajaxStart(callback)、ajaxStop(callback)、ajaxSuccess(callback)