jQuery AJAX —篇三 $.ajax()

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

前面两篇博客学到了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对象的形式存在的,如

$.ajax({

    url:"ajax.xml",

    type:‘GET‘,

    dataType:‘xml‘

    timeout:1000,

    data:{1:2,3:4}

})

实例，参数

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

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

客户端实现

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jqueryXML.aspx.cs" Inherits="WebApplication3.jqueryXML" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>通过jquery的$.ajax()解析XML</title>
    <script src="jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                url: ‘/xml/jqueryXML.xml‘,
                type: ‘GET‘,
                dataType: ‘xml‘,//这里可以不写，但千万别写text或者html!!! 
                timeout: 1000,
                error: function (xml) {
                    alert(‘加载XML文档出错! + xml);
                },
                success: function (xml) {
                    $(xml).find("student").each(function (i) {
                        var id = $(this).children("id");             //取对象 
                        var idvalue = $(this).children("id").text(); //取文本 
                        alert(idvalue);                  //这里就是ID的值了。 
                        //alert($(this).attr("email")); //这里能显示student下的email属性。 
                        //最后输出
                        $(‘<li></li>‘)
                           .html(idvalue)
                           .appendTo(‘ol‘);
                        //$("#message").html(idvalue);
                    });
                }
            });
        });
    </script>  
</head>
<body>
    <form id="form1" runat="server">
      <div id="noticecon">
        <ol>
        </ol>
      </div>
      <div id="message"></div>
    </form>
</body>
</html>

XML

<?xml version="1.0" encoding="UTF-8"?> 
<stulist> 
  <student email="[email protected]">       
      <id>1</id>
      <name>zhang</name>
  </student> 
  <student email="[email protected]">
      <id>2</id>
      <name>li</name>       
  </student> 
</stulist>

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

error

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

success

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

未完结...

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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jQuery AJAX —篇三 $.ajax()