ajax在jQuery中的应用
back>>
1.加载异步数据
??? - load()方法
??? load(url,[data],[callback])，url是页面地址，[data]是要发送到服务器的数据，格式为key/value，callback表示数据加载成功后的回调函数
??? $("#divTip").load("b.html"); //load()方法加载数据
??? load()方法中，参数url还可以用于过滤页面中的某类别的元素，如$("#divTip").load("b.html.divContent");表示获取b.html中类别名为divContent的全部元素
??? - getJSON()全局函数 获取json文件
??? $.getJSON(url, [data],[callback])
$(function() { $("#Button1").click(function() { //按钮单击事件 //打开文件，并通过回调函数处理获取的数据 $.getJSON("UserInfo.json", function(data) { $("#divTip").empty(); //先清空标记中的内容 var strHTML = ""; //初始化保存内容变量 $.each(data, function(InfoIndex, Info) { //遍历获取的数据 strHTML += "姓名：" + Info["name"] + "<br>"; strHTML += "性别：" + Info["sex"] + "<br>"; strHTML += "邮箱：" + Info["email"] + "<hr>"; }) $("#divTip").html(strHTML); //显示处理后的数据 }) })})??? getScript()全局函数获取.js文件
??? $.getScript(url,[callback])
??? 页面获取js文件内容的方法有:
<script type=”text/javascript” src=”js/xx.js”></script>$(“<script type=’text/javascript’ src=’js/xx.js’ />”).appendTo(“head”);$.getScript("UserInfo.js");?
???- 异步加载XML文档
???$.get(url,[data],[callback],[type])，url表示等待加载的数据地址，[data]表示发送到服务器的参数，其格式是key/value，[type]表示返回数据的格式:html,xml,js,json,text等。
$(function() { $("#Button1").click(function() { //按钮单击事件 //打开文件，并通过回调函数处理获取的数据 $.get("UserInfo.xml", function(data) { $("#divTip").empty(); //先清空标记中的内容 var strHTML = ""; //初始化保存内容变量 $(data).find("User").each(function() { //遍历获取的数据 var $strUser = $(this); strHTML += "姓名：" + $strUser.find("name").text() + "<br>"; strHTML += "性别：" + $strUser.find("sex").text() + "<br>"; strHTML += "邮箱：" + $strUser.find("email").text() + "<hr>"; }) $("#divTip").html(strHTML); //显示处理后的数据 }) }) })??? 通过each()方法便利文档中的User节点，然后再遍历的过程中使用find方法，查询该节点中的name,sex,email选项，并通过text()方法获取各选项的值。
2.请求服务器数据
???- $.get()方法
??? 例子：
$.get("user.do", { name: encodeURI($("#txtName").val()) }, function(data) { $("#divTip") .empty() //先清空标记中的内容 .html(data); //显示服务器返回的数据})??? 参数中有中文，需要使用encodeURI()进行转码，服务端接收时，需要用decodeURI进行解码。
?
??? - $.post()请求数据
??? $.post(url,[data],[callback],[type])和$.get()方法请求方式一样，只是get方式不是后传递数据量较大的数据，同时，请求的历史信息会保存在浏览器的缓存中，有一定的风险。而post方式没有这种缺点。
??? - serialize()序列化表单
??? 向服务器传递表单的数据时，逐个输入字段的方式进行传输比较麻烦，serialize方法可以简化参数船只的方式。
$(function() { $("#Button1").click(function() { //按钮单击事件 //打开文件，并通过回调函数返回服务器响应后的数据 $.post("user.do", $("#userForm").serialize(), //序列化表单数据 function(data) { $("#divTip") .empty() //先清空标记中的内容 .html(data); //显示服务器返回的数据 }) })})???? Serialize()方法很完美地模拟浏览器提交表单的操作，同时解决了中文编码问题，但它也有很多不足，比如表单中有多项被选中时，该方法只能传递一项的值。
?
3.$.ajax方法
??? $.ajax()是jQuery最底层的方法，因为，凡使用$.getScript()，$.get()，$.post()，$.getJSON()的调用，都可以用$.ajax()代替。
???$.ajaxSetup()设置全局Ajax
??? 在使用$.ajax()方法时，有时需要调用多个$.ajax()，如果每个方法都设置其中的请求细节，显得繁琐。使用$.ajaxSetup()方法设置全局性的Ajax默认选项，一次设置，全局有效。
例子:
$(function() { $.ajaxSetup({ //设置全局性的Ajax选项 type: "GET", url: "UserInfo.xml", dataType: "xml" }) $("#Button1").click(function() { //"姓名”按钮的单击事件 $.ajax({ success: function(data) { //传回请求响应的数据 ShowData(data, "姓名", "name"); //显示"姓名"部分 } }) }) $("#Button2").click(function() { //"性别”按钮的单击事件 $.ajax({ success: function(data) { //传回请求响应的数据 ShowData(data, "性别", "sex"); //显示"性别"部分 } }) }) $("#Button3").click(function() { //"邮箱”按钮的单击事件 $.ajax({ success: function(data) { //传回请求响应的数据 ShowData(data, "邮箱", "email"); //显示"邮箱"部分 } }) }) /* *根据名称与值，获取请求响应数据中的某部分 *@Param d为请求响应后的数据 *@Param n为数据中文说明字符 *@Param d为数据在响应数据中的元素名称 */ function ShowData(d, n, v) { $("#divTip").empty(); //先清空标记中的内容 var strHTML = ""; //初始化保存内容变量 $(d).find("User").each(function() { //遍历获取的数据 var $strUser = $(this); strHTML += n + "：" + $strUser.find(v).text() + "<hr>"; }) $("#divTip").html(strHTML); //显示处理后的数据 }})?
4.ajax全局事件
???$.ajaxSetup()是全局函数
??? jQuery中有6个全局性Ajax事件
??? ajaxComplete(callback) ajax请求执行完成时执行函数
??? ajaxError(callback) ajax请求发生错误时执行函数，其中捕捉到的错位可以作为最后一个参数进行传递
??? ajaxSend(callback) ajax请求发送前执行函数
??? ajaxStart(callback) ajax请求开始时执行函数
??? ajax请求开始是触发，常用语编写一些准备工作，如提示“正在获取数据…”
??? ajaxStop(callback) ajax请求结束时执行函数
??? ajax请求结束时触发，常与ajaxStart()结合，说明请求的最后进展状态，如将提示“正在获取数据。。。”修改为“已成功获取数据”，然后渐渐消失掉。
//元素绑定全局ajaxStart事件$("#divMsg").ajaxStart(function() { $(this).show(); //显示元素 }) //元素绑定全局ajaxStop事件 $("#divMsg").ajaxStop(function() { $(this).html("已成功获取数据。").hide();})<div id="divMsg" class="clsTip">正在发送数据请求…</div>??? ajaxSuccess(callback)ajax请求成功时执行函数
??? 在js文件中引用js文件：<reference path="jquery-1.4.2.js"/>
?
记忆碎片
未知死亡
地球上的星星
?