jQuery AJAX —篇三 $.ajax()

前面两篇博客学到了load(),get(),post()这三个方法，这篇博客继续学习，$.ajax()方法。在学习$.ajax()方法前有必要先了解下这些方法之间的关系。

   首先从jQuery的AJAX封装的三个层次：

　　第一层是$.ajax()方法，它封装了一些基础的AJAX操作，是jQuery 底层 AJAX 实现。

　　第二层是$.load(),$.get(),$.post()方法，是对ajax()方法的再次封装。

　　第三层是$.getScript(),$.getJSON()方法，进一步封装了get(),他们可以跨域操作。

    前两篇博客学习了第二层的方法，它们是对$.ajax()方法的再次封装，即底层都是通过$.ajax()实现的。相比$.ajax()实现比较简单，放在前面学习帮助我们更快的学习和使用jQuery的AJAX方法。

 

ajax()方法

 

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

 

    返回值:XMLHttpRequest 

    参数:$.ajax()只有一个参数：参数 key/value对象，包含各配置及回调函数，所有参数都是可选的，这些参数都是通过json对象的形式存在的,如

[javascript] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:18px;">$.ajax({  
  2.   
  3.     url:"ajax.xml",  
  4.   
  5.     type:'GET',  
  6.   
  7.     dataType:'xml'  
  8.   
  9.     timeout:1000,  
  10.   
  11.     data:{1:2,3:4}  
  12.   
  13. })</span>  

 

实例，参数

 

    下面通过一个实例说明一些比较常用的参数，其它参数我们可以在w3school上查询了解，用到的时候在研究。

   通过jquery的$.ajax()解析XML

客户端实现

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jqueryXML.aspx.cs" Inherits="WebApplication3.jqueryXML" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  8.     <title><span lang="zh-CN">通过jquery的<span lang="zh-CN" style="font-family:Calibri;">$.ajax()</span>解析XML</span></title>  
  9.     <script src="jquery-1.9.1.js"></script>  
  10.     <script type="text/javascript">  
  11.         $(document).ready(function () {  
  12.             $.ajax({  
  13.                 url: '/xml/jqueryXML.xml',  
  14.                 type: 'GET',  
  15.                 dataType: 'xml',//这里可以不写，但千万别写text或者html!!!   
  16.                 timeout: 1000,  
  17.                 error: function (xml) {  
  18.                     alert('加载XML文档出错! + xml);  
  19.                 },  
  20.                 success: function (xml) {  
  21.                     $(xml).find("student").each(function (i) {  
  22.                         var id = $(this).children("id");             //取对象   
  23.                         var idvalue = $(this).children("id").text(); //取文本   
  24.                         alert(idvalue);                  //这里就是ID的值了。   
  25.                         //alert($(this).attr("email")); //这里能显示student下的email属性。   
  26.                         //最后输出  
  27.                         $('<li></li>')  
  28.                            .html(idvalue)  
  29.                            .appendTo('ol');  
  30.                         //$("#message").html(idvalue);  
  31.                     });  
  32.                 }  
  33.             });  
  34.         });  
  35.     </script>    
  36. </head>  
  37. <body>  
  38.     <form id="form1" runat="server">  
  39.       <div id="noticecon">  
  40.         <ol>  
  41.         </ol>  
  42.       </div>  
  43.       <div id="message"></div>  
  44.     </form>  
  45. </body>  
  46. </html>  

 

XML

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="UTF-8"?>   
  2. <stulist>   
  3.   <student email="zhang@163.com">         
  4.       <id>1</id>  
  5.       <name>zhang</name>  
  6.   </student>   
  7.   <student email="li@163.com">  
  8.       <id>2</id>  
  9.       <name>li</name>         
  10.   </student>   
  11. </stulist>  



 

 

    上面实例中$.ajax()方法用到的参数其实和$.load(),$.get(),$.post()意义是一样的，不再详细说明，只介绍其中用到的回掉函数：

  error

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

  success

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

 

未完结...

   jQuery AJAX的学习又前进了一步，学以致用，在考试系统中发现也用到了很多，自己也还需要更多的学习和实践。

posted @ 2017-01-15 17:06  天涯海角路  阅读(103)  评论(0)    收藏  举报