本文详细介绍了Ajax技术及其在网页开发中的应用，并深入探讨了如何使用jQuery简化Ajax操作，包括数据加载、处理及异步请求等多种场景。
一、谈谈Ajax,Asynchronous JavaScript and XML的缩写，其核心是通过XMLHttpRequest对象以一种异步的方式，想服务器发送数据请求，并通过该对象接受请求返回的数据，从而完成人机交互的数据操作。这种利用Ajax技术进行的数据交互并不局限与web动态页面，在普通的静态HTML页面中同样可以实现，因此，在这样的背景下，Ajax技术在页面开发中得以广泛使用。
<html>
<head>
<meta charset="UTF-8">
<style>
body{background-color: gray;}
div {background-color: pink;margin-top: 3px;}
</style>
</head>
<body>
<div class="divTitle">
<input id="Button1" type="button" value="获取数据" onclick = "GetSendData()"/>
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
<script>
var objXmlHttp = null; //先定义一个空变量
function CreatXmlHttp(){
if(window.ActiveXObject){ //根据浏览器类型设定不同的值
objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else{
if(window.XMLHttpRequest){
objXmlHttp = new XMLHttpRequest();
}
else{
alert("初始化XMLHTTP错误");
}
}
}
function GetSendData(){
document.getElementById("divTip").innerHTML = "<img alt='' title='正在加载中....' src='../img/banner0.jpg' width='20%'/>";
var strSendUrl = "b1.html?data="+Date();
CreatXmlHttp();
objXmlHttp.open("GET",strSendUrl,true);
objXmlHttp.onreadystatechange = function(){
if(objXmlHttp.readyState == 4){
if(objXmlHttp.status == 200){
document.getElementById("divTip").innerHTML = objXmlHttp.responseText;
}
}
}
objXmlHttp.send(null);
}
</script>
</body>
</html>在javascript中，使用XMLHttpRequest对象异步加载数据；而在jquery中，使用load()方法可以轻松实现异步获取数据的功能。调用的语法格式是：
load(url,[data],[callback])
url:被加载的页面地址
data:表示发送到服务器的数据，其格式为key/value。
callback：表示加载成功后，返回至加载页的回调函数<div class="divTitle">
<input id="Button1" type="button" value="获取数据" />
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
<script>
$(function(){
$("#Button1").click(function(){
$("#divTip").load("b1.html");
})
});
</script>
在load()方法中，参数url还可以用于过滤页面中的某类别的元素，如代码$("#divTip").load("b.html .divContent"),则表示获取页面b.html中类别名为“divContent”的全部元素
jquery中的全局函数getJSON()
虽然使用load()方法可以很快的加载数据到页面中，但有时需要对获取的数据进行处理，如果将用load()方法获取的内容进行遍历，也可以进行数据的处理，但这样获取到内容必须先插入页面中，然后才能进行，因此，执行的效率不高
$.getJSON(url, [data] [callback])
<body>
<div class="divTitle">
<input id="Button1" type="button" value="获取数据" />
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
<script>
$(function(){
$("#Button1").click(function(){
$.getJSON("../data.json",function(data){
$("#divTip").empty();
var strHTML = "";
$.each(data,function(infoIndex,info){
strHTML +="姓名:"+info["name"]+"<br />";
strHTML +="年龄:"+info["age"]+"<br />";
strHTML +="性别:"+info["sex"]+"<hr />"
})
$("#divTip").html(strHTML);
})
})
});
</script>
</body> jquery中的全局函数getScript()
在jquery中，除通过全局函数getJSON获取.json格式的文件内容外，还可以通过另外一个全局函数getScript()获取.js文件的内容。通过全局函数getScript()加载.js文件后，不仅可以向加载页面片段一样轻松的注入脚本，而且所注入的脚本自动执行，达到提高了页面的执行效率。
$.getScript(url, [callback])
<body>
<div class="divTitle">
<input id="Button1" type="button" value="获取数据" />
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
<script>
$(function(){
$("#Button1").click(function(){
$.getScript("../data.js")
})
});
</script>
</body>
//data.js
var data = [
{"name":"谭青","age":20,"sex":"女"},
{"name":"啊哈","age":10,"sex":"男"},
{"name":"成栋","age": 30,"sex":"男"}
]
var strHTML = "";
$.each(data,function(){
strHTML +="姓名:"+this["name"]+"<br />";
strHTML +="年龄:"+this["age"]+"<br />";
strHTML +="性别:"+this["sex"]+"<hr />"
})
$("#divTip").html(strHTML);
$(function(){
$("#Button1").click(function(){
$.getScript("../data.js",function(){alert("返回数据成功！！")}) //执行回调函数
})
});jquery中的全局函数get()
前面介绍的都是异步加载html、json、js，如果想要异步加载xml文件时可以使用全局函数`$.get(url,[data],[callback],[type] type：表示返回数据的格式，如html、xml、js、json、text等
-------------请求服务器数据-------------
$.get()
<body>
<div class="divTitle">
<input id="content1" type="text" value="" />
<input id="Button1" type="button" value="获取数据" />
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
<script>
$("#Button1").click(function(){
$.get("data.aspx",{name:encodeURI($("#content1").val())}, //如果名字是中文，则必须进行编码
function(data){
$("#divTip").empty()
.html(data);
}
)
})
</script></body>
/*******************************data.aspx*************************/
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%
string strName = System.Web.HttpUtility.UrlDecode(Request["name"]); /*进行解码*/
string = strHTML = "<div>"
if(strName == "谭青"){
strHTML +="姓名：谭青<br />";
strHTML +="年龄：20";
strHTML +="性别：女"
}else if(strName == "啊哈"){
strHTML +="姓名：啊哈<br />";
strHTML +="年龄：10";
strHTML +="性别：男"
}else if(strName == "aa"){
strHTML +="姓名：aa<br />";
strHTML +="年龄：10";
strHTML +="性别：男"
}
strHTML +="</div>";
Response.Write(strHTML);
%>$.post()
$.post(url, [data], [callback], [type])
$.post()也是待参数向服务器发出数据请求。全局函数$.post()与$.get()在本质上没有太大的区别，所不同的是，GET方式怒视和传递数据量较大的数据，同时，其请求的历史信息会保存在浏览器的缓存中，有一定的安全风险。二姨POST方式向服务器发送数据请求，则不存在着两个方面的不足。
<script>
$("#Button1").click(function(){
$.post("data.aspx",{name:encodeURI($("#content1").val()),sex:encodeURI($("#getSex").val())}, //如果名字是中文，则必须进行编码
function(data){
$("#divTip").empty()
.html(data);
}
)
})
</script>serialize()
在使用全局函数.get()和.post()向服务器传递参数时，其中的参数就是通过名称属性逐个搜索输入字段的方式进行传输的，如果表单的输入字段过多，这种方式就比较麻烦，而且不利于扩展。为了解决这个问题，jquery引入serialize()方法，该方法可以简化参数传值的方式
serialize()
功能：将所选择的DOM元素转换成能随AJAX传递的字符串，即序列化所选择的DOM元素
注意：虽然serialize()方法可以很完美的模拟浏览器提交表单的操作，同时解决了中文编码的问题，但他有自身的很多不足，如表单中有多项被选中时，该方法只能传递一项的值，因此，在选择传递参数时，需慎重考虑
$.ajax()该方法不仅可以很方便的实现load()、get()、post()三个全局函数完成的功能，还更多的关注实现过程中的细节。
$.ajax([option])
option为$.ajax()方法 中的请求设置，其格式为key/value
$.ajaxSetup([option])
功能：设置全局性Ajax默认选项，一次设置，全局有效这样大大简化了$.ajax()方法中细节的编写，<script>
$(function(){ $.ajaxSetup({type:"get",url:"data.aspx",dataType:"xml"}) //为ajax设置默认值
});
$("#Button1").click(function(){
$.ajax({success:function(data){alert("执行成功")}});
})
</script>—————Ajax中的全局事件———-
由于在使用$.ajax()方法时，其中的选项参数global的值默认情况下为true，也就意味着，所有在执行的Ajax的数据请求，都绑定了全局事件
ajaxComplete(callback)------Ajax请求完成时 执行函数
ajaxError(callback)---------Ajax请求发生错误时执行函数，其中捕捉到的错误可以作为最后一个参数进行传递
ajaxSend(callback)-------Ajax请求发送前执行函数
ajaxStart(callback)------Ajax请求开始时执行函数
ajaxStop(callback)---------Ajax请求结束时执行函数
ajaxSuccess(callback)----------Ajax请求成功时执行函数说明：在jquery中，所有的全局事件都是以XMLHttpRequest对象和设置作为参数传递给回调函数，在处理回调函数时，只要分析其传回的参数值即可
由于是全局性的事件，因此，只要有Ajax请求发生，就会触发所设置的全局事件，该事件被绑定在某个元素上，通过一些很人性化的显示或隐藏进行切换，极大的丰富了提交数据时的用户体验，同时，也建立了页面加载反馈系统
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
