【jQuery使用手册】九：Ajax

　　　　九：Ajax

　　　　jQuery.ajax([options])　　　　返回值：XMLHttpRequest

　　　　通过HTTP请求加载远程数据。jQuery底层AJAX实现。简单易用的高层实现见$.get,$.post等。

　　　　$.ajax()返回其创建的XMLHttpRequest对象。大多数情况下无需直接操作该函数，除非需要操作不常用的选项，以获得更多的灵活性。

　　　　最简单情况下，$.ajax()可以不带任何参数直接使用。注意：所有的选项都可以通过$.ajaxSetup()函数来全局设置。

　　　　回调函数：如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

　　　　beforeSend在发送请求之前调用，并且传入一个XMLHttpRequest最为参数。

　　　　error在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象(如果有的话)。　　　　　　　　

　　　　dataFilter在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据(可能是处理过的)传递给success回调函数。

　　　　success当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。

　　　　complete当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

　　　　数据类型：$.ajax()函数依赖服务器提供的信息来处理返回的数据，若服务器报告说返回的数据时XML，那么返回的结果就可以用普通XML方法或者jQuery的选择器来遍历，比如HTML，则以文本方式对待。

　　　　通过dataType选项还可以知道其他不同数据处理方式。除了单纯的XML，还可以指定html、json、jsonp、script或者text。其中text和xml类型返回的数据不会经过处理。

　　　　数据仅仅简单的将XMLHttpRequest的responseText或responseHTML属性传递给success回调函数。我们必须确保网页服务器报告的MIME类型与我们选择的dataType所匹配。

　　　　比如XML的话，服务器端就必须声明text/xml或者application/xml来获得一致的结果。

　　　　如果指定为html类型，任何内嵌的JavaScript都会在HTML作为一个字符串返回之前执行。类似的，指定script类型的话，也会先执行服务器端生成的JavaScript，然后把脚步作为一个文本数据返回。

　　　　如果指定为json类型，则会把获取到的数据作为一个JavaScript对象来解析，并且把构建好的对象最为结果返回。为了实现这个目的，首先尝试JSON.parse()。如果浏览器不支持，则使用一个函数来构建。

　　　　JSON数据是一种能很方便通过JavaScript解析的结构化数据。如果获取的数据文件存放在远程服务器上，则需要jsonp类型。JSONP是JSON格式的扩展，它要求一些服务器端的代码来检测并处理查询字符串参数。

　　　　如果指定了script或jsonp类型，那么当从服务器接受到数据时，实际上是用<script>标签而不是XMLHttpRequest对象，这个情况下，$.ajax()不再返回一个XMLHttpRequest对象，并且也不会传递时间处理函数。

　　　　发送数据到服务器：默认情况下，Ajax请求使用GET方法，如果要使用POST方法，可以设定type参数值，这个选项也会影响data选项中的内容如何发送到服务器。

　　　　data选项可以包含一个查询字符串，如key1=value1&key2=value2，或者是一个映射，如{key1:value1,key2:value2}。如果使用了后者的形式，则数据再发送器会被转换成查询字符串。

　　　　这个处理过程也可以通过设置processData选项为false嘞回避。如果我们希望发送一个XML对象给服务器时，这种处理可能并不合适，在这种情况下，可改变contentType选项的值，

　　　　用其他合适的MIME类型来取代默认的application/x-www-form-urlencoded。

　　　　高级选项：global选项用于阻止相应注册的回调函数，如果服务器需要HTTP认证，可以使用用户名和密码通过username和password选项来设置。

　　　　Ajax请求时限时的，所以错误警告被捕获并处理后，可以用来提升用户体验，请求超时这个参数通常就保留其默认值，要不就通过jQuery.ajaxSet来全局设定。

　　　　默认情况下，请求总会被发出去，但浏览器可能从他的缓存中调取数据，要禁止使用缓存结果，可设置cache参数为false。如果希望判断数据自从上次请求后没有更改就报告出错的话，可设置ifModified为true。

　　　　scriptCharset允许给<script>标签的请求设定一个特定的字符集，用于script或者jsonp类似的数据，当脚本和页面字符集不同时，该参数很有用。

　　　　Ajax的第一个字母是asynchronous的开头字母，这意味着所有的操作都是并行的，完成的顺序没有前后关系。$.ajax()的async参数总是设置成true，这标志着请求开始后其他代码依旧执行。

　　　　若设置为false，则不在异步有可能导致浏览器被锁死。

　　　　参数options(可选)：AJAX请求设置，所有选项都是可选的。

　　　　参数async：默认true即异步请求。若需要发送同步请求，请将此选项设置为false。注：同步请求将锁住浏览器，其他操作须等待请求完成才执行。

　　　　参数beforeSend(XHR)：发送请求前可修改XMLHttpReques对象的函数，如添加自定义HTTP头，XMLHttpRequest对象是唯一的参数，这是一个Ajax事件，若返回false可以取消被辞ajax请求。

　　　　参数cache：默认true，dataType为script何jsonp时默认为false。设置为false将不缓存此页面。

　　　　参数complete(XHR,TS)：请求完成后的回调函数(成功失败均调用)。参数XMLHttpRequest对象和一个描述成功请求类型的字符串。

　　　　参数contentType：默认："application/x-www-form-urlencoded"发送信息到服务器时内容编类型。

　　　　参数context：这个对象用于设置Ajax相关回调函数的上下文。

　　　　参数data：发送到服务器的数据。将自动转换为请求字符串格式。GET请求中奖附加在URL之后。

　　　　参数dataFilter：给Ajax返回的原始数据的进行预处理的函数。提供data和type两个参数：data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。

　　　　参数dataType：预期服务器返回的数据类型。如果不指定jQuery将自动根据HTTP包MIME信息来智能判断，可选值有：

　　　　　　　　"xml":返回XML文档，可用jQuery处理。

　　　　　　　　"html":返回纯文本HTML信息。包含的script标签会在插入dom时执行。

　　　　　　　　"script":返回纯文本JavaScript代码，不会自动缓存结果，除非设置了"cache"参数。

　　　　　　　　"json":返回json数据。

　　　　　　　　"jsonp":JSONP格式。

　　　　　　　　"text":返回纯文本字符串。

　　　　error：请求失败时调用此函数。有三个参数：XMLHttpRequest对象、错误信息、(可选)捕获的异常对象。

　　　　global：默认true，是否除非全局AJAX事件。

　　　　ifModified：默认false，仅在服务器数据改变时获取新数据，使用HTTP协议包Last-Modified头信息判断。

　　　　jsonp：在一个jsonp请求中重写回调函数的名字。

　　　　jsonpCallback：为jsonp请求指定一个回调函数。

　　　　password：用于相应HTTP访问认证请求的秘密。

　　　　processData：默认为true，默认情况下，通过打他选项传递进来的数据，如果是一个对象(非字符串)，都会转换成一个查询字符串，以配合默认内容类型。若要发送DOM树信息或不希望转换，则设置为false。

　　　　scriptCharset:只有当请求时dataType为"jsonp"或"script"，并且type是"GET"才会用于强制修改charset。通常只在本地和远程的内容编码不同时使用。

　　　　success：请求成功后的回调函数。参数data：由服务器返回并根据dataType参数进行处理后的数据；参数textStatus：描述状态的字符串。

　　　　traditional：若想要用传统的方式来序列化数据则设置为true。

　　　　timeout：设置请求超时时间(毫秒)，此设置将覆盖全局设置。

　　　　type：默认GET，请求方式GET或POST。其他HTTP请求方法，如PUT和DELETE也可使用但只有部分浏览器支持。

　　　　url：默认当前页地址，发送请求的地址。

　　　　username：用于相应HTTP访问认证请求的用户名。

　　　　xhr：需要返回一个XMLHttpRequest对象。

　　　　示例：加载并执行一个JS文件。

1  jQuery代码：
2          $.ajax({
3           type:"GET" ,
4           url:"test.js",
5           dataType:"script"
6         });

 　　　　示例：保存数据到服务器并显示信息。

代码

 1  jQuery代码：
 2          $.ajax({
 3          type:"POST",
 4          url:"some.aspx",
 5          data:"name=John &location =Boston",
 6          success:function(msg){
 7            alert("Data Saved:"+msg);
 8          },
 9          error:function(msg){
10            alert("Data Saved:"+msg);
11          }
12         });                      

 　　　　示例：装入一个HTML网页最新版本。

1  jQuery代码：
2          $.ajax({
3           url:"test.html",
4           cache:false,
5           success:function(html){
6             $("#result").append(html);
7           }
8         });

 　　　　示例：同步加载数据。发送请求时锁住浏览器。

1  jQuery代码：
2          var html=$.ajax({url:"some.aspx",async:false}).responseText;

 　　　　示例：发送XML数据止服务器。设置processData为false，防止自动转换数据格式。

代码

1  jQuery代码：
2          var xmlDocument=[create xml document];
3         $.ajax({
4           url:"page.aspx",
5           processData;false,
6           data:xmlDocument,
7           success:handleResponse
8         });

　　　　load(url,[data],[callback])　　　　返回值：jQuery

　　　　载入远程HTML文件代码并插入至DOM中。默认使用GET方式，传递附加参数时自动转换为POST方式。

　　　　参数url：待装入HTML网页的网址。参数data(可选)：发送至服务器的key/value数据。在jQuery1.3中也可以接受一个字符串。参数callback(可选)：载入成功时回调函数。

　　　　示例：加载文章侧边栏导航部分至一个无序列表。

1  HTML代码：
2           < b > jQuery Links: </ b >< ul  id ="links" ></ ul >
3  jQuery代码：
4          $("#links").load("/Main_Page #p-Getting-Started li");

 　　　　示例：加载feeds.html文件内容。

1  jQuery代码：
2          $("#feeds").load("feeds.html");

 　　　　示例：加载feeds.aspx文件，以POST形式发送附加参数并在成功时显示信息。

1  jQuery代码：
2          $("#feeds").load("feeds.aspx",{limit:25},function(){
3             alert("The last 25 entries in the feed have been loaded.");
4         });

 　　　jQuery.get(url,[data],[callback],[type])　　　　返回值：XMLHttpRequest

　　　　通过远程HTTP GET请求载入信息。这是一个简单的GET请求功能以取代复杂的$.ajax。请求成功时可以调用回调函数。如果需要在出错时执行函数，请使用$.ajax。

　　　　参数url：待载入页面的url地址。参数data(可选)：待发送key/value参数。参数callback(可选)：载入成功时回调函数。参数type(可选)：返回内容格式，xml、html、script、json、text、_default。

　　　　示例：请求test.aspx页面，忽略返回值。

1  jQuery代码：
2          $.get("test.aspx");

 　　　　示例：请求test.aspx页面，传送两个参数，忽略返回值。

1  jQuery代码：
2          $.get("test.aspx",{name:"John",time:"2pm"});

　　　　示例：显示test.aspx返回值(HTML或XML，取决于返回值)。

1  jQuery代码：
2          $.get("test.aspx",function(data){
3             alert("Data Loaded:"+data); 
4         });

 　　　　示例：显示test.aspx返回值并添加一组请求参数。

jQuery代码：
        $.get("test.aspx",{name:"John",time:"2pm"},function(){
           alert("Data Loaded:"+data);
       });

 　　　　jQuery.getJSON(url,[data],[callback])　　　　返回值：XMLHttpRequest

　　　　通过HTTP GET请求载入JSON数据。在jQuery1.2中，可以通过使用JSONP形式的回调函数来加载其他网域的JSON数据。

　　　　示例：从Flickr JSONP API载入4张最新关于猫的图片。

代码

1  HTML代码：
2           < div  id ="images" ></ div >
3  jQuery代码：
4          $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat &tagmode =any &format =json &jsoncallback =?",function(data){
5              $.each(data.items,function(i,item){
6                  $(" < img /> ").attr("src",item.media.m).appendTo("#images");
7                  if(i==3)return false;
8              });
9          });

 　　　　jQuery.getScript(url,[callback])　　　　返回值：XMLHttpRequest

　　　　通过HTTP GET请求载入并执行一个JavaScript文件。jQuery1.2以后可以跨域调用JavaScript文件。示例：载入js并绑定动画。

代码

1  HTML代码：
2           < button  id ="go" > Run </ button >< div  class ="block" ></ div >
3  jQuery代码：
4          jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js",function(){
5          $("#go").click(function(){
6             $(".block").animate({backgroundColor:'pink'},1000).animate({backgroundColor:'blue'},1000);
7          });
8  });

 　　　　示例：加载并执行test.js，成功后显示信息。

1  jQuery代码：
2          $.getScript("test.js",function(){
3             alert("Script loaded and executed.");
4         });

 　　　jQuery.post(url,[data],[callback],[type])　　　　返回值：XMLHttpRequest

　　　　通过远程HTTP POST请求载入信息。这是一个简单的POST请求功能以取代复杂的$.ajax.请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。示例参见jQuery.get()。

　　　　ajaxComplete(callback)　　　　返回值：jQuery

　　　　AJAX请求完成时执行函数，Ajax事件。XMLHttpRequest对象和设置作为参数传递给回调函数。示例：AJAX请求完成时执行函数。

1  jQuery代码：
2          $("#msg").ajaxComplete(function(event,request,settings){
3             $(this).append(" < li > 请求完成。 </ li > ");
4         });

 　　　　ajaxError(callback)　　　　返回值：jQuery

　　　　AJAX请求发生错误时执行函数，Ajax事件。XMLHttpRequest对象和设置最为参数传递给回调函数。捕捉到的错误可作为最后一个参数传递。示例：Ajax请求失败时显示信息。

1  jQuery代码：
2          $("#msg").ajaxError(function(event,request,settings){
3           $(this).append(" < li > 出错页面："+settings.url+" </ li > ");
4         });

 　　　　ajaxSend(callback)　　　　返回值：jQuery

　　　　AJAX请求发送前执行函数。示例：Ajax请求发送前显示信息。

1  jQuery代码：
2          $("#msg").ajaxSend(function(event,request,settings){
3           $(this).append(" < li > 开始请求："+settings.url+" </ li > ");
4         });

 　　　　ajaxStart(callback)　　　　返回值：jQuery

　　　　AJAX请求开始执行函数。示例：AJAX请求开始时显示信息。

1  jQuery代码：
2          $("#loading").ajaxStart(function(){
3           $(this).show(); 
4         });

 　　　ajaxStop(callback)　　　　返回值：jQuery

　　　　AJAX请求结束时执行函数。示例：AJAX请求结束时隐藏信息。

1  jQuery代码：
2          $("#loading").ajaxStop(function(){
3           $(this).hide();
4         });

 　　　　ajaxSuccess(callback)　　　　返回值：jQuery

　　　　AJAX请求成功后执行函数。示例：当AJAX请求成功后显示消息。

1  jQuery代码：
2          $("#msg").ajaxSuccess(function(event,request,settings){
3          $(this).append(" < li > 请求成功！ </ li > "); 
4         });

 　　　　jQuery.ajaxSetup([options])　　　　返回值：jQuery

　　　　设置全局AJAX默认选项。示例：设置AJAX默认选项。

1  jQuery代码：
2          $.ajaxSetup({
3          url:"/xmlhttp/", 
4          global:false,
5          type:"POST"
6         });
7         $.ajax({data:myData});

 　　　　serialize()　　　　返回值：String

　　　　序列化表格内容为字符串。示例：序列化表格内容为字符串，用于AJAX请求。

代码

 1  HTML代码：
 2           < p  id ="results" >< b > Results:  </ b >   </ p >
 3           < form >
 4             < select  name ="single" >
 5               < option > Single </ option >
 6               < option > Single2 </ option >
 7             </ select >
 8             < select  name ="multiple"  multiple ="multiple" >
 9               < option  selected ="selected" > Multiple </ option >
10               < option > Multiple2 </ option >
11               < option  selected ="selected" > Multiple3 </ option >
12             </ select >< br />
13             < input  type ="checkbox"  name ="check"  value ="check1" />  check1
14             < input  type ="checkbox"  name ="check"  value ="check2"  checked ="checked" />  check2
15             < input  type ="radio"  name ="radio"  value ="radio1"  checked ="checked" />  radio1
16             < input  type ="radio"  name ="radio"  value ="radio2" />  radio2
17           </ form >
18  jQuery代码：
19          $("#results").append(" < tt > "+$("form").serialize()+" </ tt > ");

 　　　　serializeArray()　　　　返回值：Array<Object>

　　　　序列化表格元素(类似'.serialize()'方法)返回JSON数据结构数据。此方法返回的是JSON对象而非JSON字符串。需要使用插件或第三方库进行字符串化操作。返回的JSON对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对。例如：[{name:'firstname',value:'Hello'},{name:'lastname',value:'World'},{name:'alias',//该值为空}]。示例：取得表单内容并插入到网页中。

代码

 1  HTML代码：
 2           < p  id ="results" >< b > Results: </ b >   </ p >
 3           < form >
 4             < select  name ="single" >
 5               < option > Single </ option >
 6               < option > Single2 </ option >
 7             </ select >
 8             < select  name ="multiple"  multiple ="multiple" >
 9               < option  selected ="selected" > Multiple </ option >
10               < option > Multiple2 </ option >
11               < option  selected ="selected" > Multiple3 </ option >
12             </ select >< br />
13             < input  type ="checkbox"  name ="check"  value ="check1" />  check1
14             < input  type ="checkbox"  name ="check"  value ="check2"  checked ="checked" />  check2
15             < input  type ="radio"  name ="radio"  value ="radio1"  checked ="checked" />  radio1
16             < input  type ="radio"  name ="radio"  value ="radio2" />  radio2
17           </ form >
18  jQuery代码：
19          var fields=$("select,:radio").serializeArray();
20         jQuery.each(fields,function(i,field){
21           $("#results").append(field.value+" ");
22         });