前面两篇博客学到了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="zhang@163.com"> <id>1</id> <name>zhang</name> </student> <student email="li@163.com"> <id>2</id> <name>li</name> </student> </stulist>
上面实例中$.ajax()方法用到的参数其实和$.load(),$.get(),$.post()意义是一样的,不再详细说明,只介绍其中用到的回掉函数:
error
在请求出错时调用。传入 XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话)。
success
当请求成功之后调用。传入返回后的数据,以及包含成功代码的字符串。
未完结...
jQuery AJAX的学习又前进了一步,学以致用,在考试系统中发现也用到了很多,自己也还需要更多的学习和实践。