ajax在HTML中应用,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"] + "
";

strHTML += "性别" + Info["sex"]+ '
';

strHTML += "邮箱" + Info["email"]+ '
';

})

$("#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传递的字符串,即序列化所选择的元素;

$("btn").click(function(){

$.post("userInfo.aspx",

$("#formUserInfo").serialize(),//序列化表单数据

function (data) {

$("#divTip").empty().html(data);//显示服务器返回的数据

})

})

$.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()方法的参数;

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()+"

---

";

})

$("#divTip").html(strHTML);

}

})

UserInfo.xml

MGT360124

男

MGT360124@163.com

YSS

女

YSS360124@163.com

在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("正在处理中.....");

})

$(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);

}

})

})

})

getData.aspx

Response.Write(strName);//返回传回的参数

%>