ajax在jquery中的应用
在jQuery中使用load()方法可以轻松实现获取异步数据的功能，其调用的语法格式为:
//load()实现异步加载数据
load( url, [data], [callback] );
//其中参数url为被加载的页面地址
//可选参数callback为加载成功之后的回调函数
//可选参数表示发送到服务器上的数据key/value键值对的形式
$( "#btn" ).click( function ( ) {//点击按钮，加载数据
$("#divTip").load("b.html");
})jQuery中的全局函数getJSON()
虽然使用load()方法可以快速加载数据到页面，但是有时候需要对数据进行处理,如果将用load()方法获取的内容进行遍历,也可以进行数据的处理，但是这样获取的内容必须先插入页面中，然后才能进行，因此，执行的效率不好。
为了解决这个问题,我们采用将要获取的数据另存为一种轻量级的数据交互格式，即json文件格式，由于这种格式很方便计算机的读取,所以开发者大多都喜欢这种方法;
jquery中,专门有一个全局函数getJSON(),用于调用JSON格式的数据，其调用的格式为：
$.getJSON(url, [data], [callback] )
//参数url为请求的地址
//可选参数callback为加载成功之后的回调函数
//可选参数表示发送到服务器上的数据key/value键值对的形式
$("btn").click( function ( ) {
$.getJSON("userInfo.json", function (data) {
$("divTip").empty();
var strHTML = '';
$.each(data, funciton(InfoIndex,Info){
strHTML += "姓名: "+ Info["name"] + "<br>";
strHTML += "性别" + Info["sex"]+ '<br>';
strHTML += "邮箱" + Info["email"]+ '<br>';
})
$("#divTip").html(strHTML);//显示处理后的数据;
})
})全局函数$.getScript()实现异步获取数据
$.getScript("url",[callback])
$("btn").click(function(){
$.getScript("userInfo.js",function(){});
})jquery中异步加载xml文档，在开发中有时会遇使用xml文档保存数据的情况,对于这种格式的数据,JQuery中使用去全局函数$.get()进行访问其调用的格式为:
$.get(url, [data], [callback], [type] );
//参数url为等待加载的数据地址,可选参数[data]为发送到服务器上的数据key/value键值对的形式
//可选参数callback为加载成功之后的回调函数
//可选参数[type]表示返回数据的格式,如 html ，xml ，js ，json，text以上都是介绍如何在页面上异步加载数据的方法，即如何从服务器上获取静态的数据。但在页面上的应用员不仅限于此，ajax技术最终体在与服务器的动态数据实现人机交互中，即客户端传递带有参数的请求,服务器接收后，分析所传递来的请求,并作出相应的相应。发送对应数据至客户端，客户端接收请求返回的数据,从而实现了数据的双向传递。
上面介绍的是通过调用全局函数$.get()实现xml文档的加载,除了加载数据外，还可以实现数据从服务器的请求。
全局函数$.get()向服务器请求数据
$.get (
"userInfo.aspx", //服务器上的页面
{ name:encodeURI( $("#textName").val() ) }, //参数的值为中文的话，必须使用encodeURI()进行转码;在客户端接收中文时，使用decodeURI进行解码即可;
function (data) {
$("#divTip").empty().html( decodeURI(data) );//显示服务器返回的数据
}
)$.post()请求
$.post()也是带参数向服务器发出数据请求,全局函数$.post()与$.get()在本质上没有太大区别，所不同的是,GET方式不适合传递数据量较大的数据，而且请求的历史信息会保存在浏览器中的缓存中,有一定的安全风险。而post方式向服务器发送数据请求则可以避免这两个方面的不足;
全局函数$.post()的调用方法格式:
$(url, [data] , [callback], [type] );
//参数的意义和$.get()函数代表的意义完全一样
$("#btn").click( funciton ( ) {
$.post( "userInfo.aspx", {
name: encodeURI( $("#textName").val() ),
sex: encodeURI( $("#selSex").val() )
},
function (data) {
$("#divTip").empty().html(data);//显示服务器返回的数据;
})
})在使用全局函数$,get()和$.post()向服务器传递参数时,如果表单中的参数过多,那么这种方式比较麻烦,而且不利于拓展,为了解决这个问题.jQuery中引入了serialize()方法,该方法可以简化参数传值的方式，调用格式为:
serialize();该方法的功能室将所选择的DOM元素转换为能Ajax传递的字符串,即序列化所选择的元素;
<script type="text/javascrpt">
$("btn").click(function(){
$.post("userInfo.aspx",
$("#formUserInfo").serialize(),//序列化表单数据
function (data) {
$("#divTip").empty().html(data);//显示服务器返回的数据
})
})
</script>$.ajax()方法
除了可以使用全局函数get(), post()实现页面的异步调用和服务器交互之外,在JQUERY中，还有个更强大的最底层的方法$.ajax(),该方法不仅可以可以实现以上两个函数的功能，还能更多的关注实现过程中的细节。
在jquery中，$.ajax()是最底层的方法, y也是功能最强的方法,以上的load(),$.getJSON(),$.getScript(),$.get(),$.post();都是在此基础之上建立的.语法为:
$.ajax( [options] );其中可选参数options为$.ajax()方法中的请求设置,其格式为key/value;既包含发送请求的参数,也包含服务器响应的回调的数据,其全部名称为:
参数名 类型 功能
url String 发送请求的地址（默认为当前页面）
type String 请求方式 post/get （默认为 get）
data String/Object 发送到服务器的数据.如果不是字符串则自动转成字符串格式,如果是get请求,那么该字符串将赋在url的后面
dataType String 服务器返回的数据类型,如果没有指定,jquery将自动根据Http包的MIME自动判断,服务器返回的数据根据自动判断的结果进行解析,传递给回调函数.
//其可用的类型为: html:返回纯文本的html信息, script:返回纯文本的JavaScript代码 , text:返回纯文本字符串 , xml: 返回可被jq处理的xml文档, json: 返回json格式的数据;
complete Function 该请求完成后调用的回调函数,该函数无论在发送数据成功或者失败都会调用,其中有两个参数,一个是XMLHTTPRequest对象，另一个是strStatus描述成功请求类型的字符串;
success Function 请求成功后的回调函数,一个是根据参数dataType处理后服务器返回的数据,另一个是strStatus,用于描述状态的字符串;
error Function 请求失败后的回调函数,该函数有三个参数,一个是XMLHttpRequest对象,一个是出错信息strError,第三个是捕捉到的错误对象strObject；
timeout Number 请求超时的时间,该设置将覆盖$.ajaxSetup()方法中同样的设置
global Boolean 是否响应全局事件,默认为true,表示响应,如果设置为false,那么表示不响应,那么全局事件$.ajaxStart等不响应；
async Boolean 是否为异步请求,默认为true,表示异步,如果设置为false表示同步请求;
cache Boolean 是否进行页面的缓存，为true表示进行缓存，false
表示不进行页面缓存; 在使用$.ajax()方法时,有时需要调用多个$.ajax()方法,那么每个方法都设置它的详细细节，那么会变得非常繁琐，为了简化这种工作，jq中使用$.ajaxSetup()方法设置全局性的Ajax默认属性，一次设置全局有效。
大大简化了$.ajax细节的编写。该方法的调用格式为:
$.ajaxSetup( [options] );
//参数options可以是一个对象.通过该该对象可以设置$.ajax()方法的参数;<script type="text/javascript'>
$(funciton(){
$.ajaxSetup({
url: "UserInfo.xml",
type: "GET",
dataType:"xml",
timeout:1000,
global:true,
async:true,
cache:true,
});
$("#btn1").click(function(){
$.ajax({
success: function(data){
console.log(data);//请求响应后返回的数据
showData(data,"名字","name");
}
})
})
$("#btn2").click(function(){
$.ajax({
success: function(data){
console.log(data);
showData(data,"性别","sex");
}
})
})
$("#btn3").click(function(){
$.ajax({
success: function(data){
console.log(data);
showData(data,"邮编","email");
}
})
})
//处理数据的函数
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);
}
})
</script>
<body>
<div class="divFrame">
<div class="divTitle">
<span><input id="Button1" type="button" value="姓名" class="btn"/></span>
<span><input id="Button2" type="button" value="性别" class="btn"/></span>
<span><input id="Button3" type="button" value="邮箱" class="btn"/></span>
</div>
<div class="divContent">
<div id="divTip" class="clsShow"></div>
</div>
</div>
</body>UserInfo.xml
<?xml version = "1.0" encoding= "utf-8" ?>
<Info>
<User id="1">
<name>MGT360124</name>
<sex>男</sex>
<email>MGT360124@163.com</email>
</User>
<User id="2">
<name>YSS</name>
<sex>女</sex>
<email>YSS360124@163.com</email>
</User>
</Info>在js代码中,由于使用了$.ajaxSetup()方法设置部分全局性的Ajax参数,使得后续的异步请求变的非常简单，避免了重复编写相同的代码，由于每次请求都要分析响应够的数据,因此通过一个自定义的showData()函数,根据不同的数据元素名称,返回对应的数据。
ajax中的全局事件
在JQ中,除了全局性的函数外,还有6个全局性的ajax事件,由于在使用$.ajax()方法时，其中的global默认为true，也就意味着，所有在执行的ajax的数据请求，都绑定了全局事件;
//事件名称 参数 功能描述
ajaxComplete(callback) callback ajax请求完成时执行的函数
ajaxError(callback) callback ajax请求发生错误时执行的函数
ajaxSend(callback) callback ajax请求发送之前执行的函数
ajaxStart(callback) callback ajax请求开始时执行的函数
ajaxStop(callback) callback ajax请求结束时执行的函数
ajaxSuccess(callback) callback ajax请求成功时执行的函数
//在jq中，所有的全局事件都是以XMLHttpRequest对象和设置作为参数传给回调函数,在处理回调函数时，只需分析传回的参数值即可;ajaxStart与ajaxStop全局事件
在jq中，使用ajax获取异步数据时，使用ajaxStart和ajaxStop全局事件是非常高的，ajaxStart是当请求开始执行时触发,往往用于编写一些准备性的工作如提示：“正在获取数据.....”等信息;而ajaxStop是请求结束触发。如提示信息:"数据请求成功";
在绑定事件时，ajax中的全局事件可以绑定在页面的任何一个元素
$("divTip").ajaxStart(function(){
$(this).html("正在处理中.....");
})<script type="text/javascript">
$(function () {
//元素绑定全局ajaxStart事件
$("#divMsg").ajaxStart(function(){
$(this).show();//显示元素
})
//元素绑定全局ajaxStop事件
$("#divMsg").ajaxStop(function(){
$(this).html("已经成功获取数据").hide();
})
$("#Button1").click(function(){
$.ajax({
type:"GET",
url:"getData.aspx",
//获取加码后的数据并作为参数传递给服务器
dataType:"html",
data:{
txtData: encodeURI( $("#txtData").val() ),
},
success: function(data){
//显示解码后的返回数据
$("#divTip").html(data);
}
})
})
})
</script>getData.aspx
<%@ Page language="c#" ContentType="text/html" ResponseEncoding="gb2312"%>
<% string strName = Request["txtData"];
Response.Write(strName);//返回传回的参数
%>共同学习，写下你的评论
评论加载中...
作者其他优质文章
