Jquery和Ajax的应用

前言

Ajax全称“Asynchronous JavaScript and XML” （异步JavaScript和XML）,它并不是指一种单一的技术，而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体。它的出现，揭示了无刷新更新页面的新时代，并有代替传统的Web方式和通过隐藏的框架来进行异步提交的趋势，是Web开发应用的一个里程碑。

Ajax的优势

*Ajax不需要插件支持
*优秀的用户体验
*提高Web程序的性能
*减轻服务器和带宽的负担

Ajax的不足

*浏览器对XMLHttpRequest对象的支持度不足
*破坏浏览器前进、“后退”按钮的正常功能
*对搜索引擎的支持不足
*开发和调试工具的缺乏

Ajax的XMLHttpRequest

Ajax的核心，是Ajax实现的关键--发送异步请求、接收响应及执行回调都是通过它来完成的

一个例子

1.定义一个函数，通过该函数来异步获取信息
function Ajax(){....}

2.声明一个空对象用来装入XMLHttpRequest对象
var xmlHttpReq =null;

3.给XMLHttpRequest对象赋值
if(window.ActiveXObject){
xmlhttpReq = new ActiveXObject("Microsoft.XMLHTTP");}
else if(window.XMLHttpRequest)
{   xmlHttpReq = new XMLHttpRequest();}
4.实例化成功后，使用open()方法初始化XMLHttpRequest 对象，指定Http方法和要使用的服务器URL     xmlHttpReq.open("Get","test.php",true);//默认情况下请求时异步的，也可以显式把async参数设置为true
5.设置回调函数
xmlHttpReq.onreadystatechange =RequestCallBack;
6.发送请求
xmlHttpReq.send(null);//因为使用Get方法提交，所以可以使用null作为参数调用。

以上是最原始的JavaScript的ajax方法

下面介绍JQuery中的Ajax。

JQuery 对Ajax进行了封装，

$.ajax()

属于最底层的方法，第2层是

load()

、

$.get()

和

$.post()

方法。，第3层是

$.getScript()

和

$.getJSON()

方法。第2层使用频率最高。

load()方法

load()方法通常用来从Web服务器上获取静态数据文件。

load(url,[data],[callback])

//无参数传递，则是Get方式

$(“#resText”).load(“test.php”,function(){})

//有参数传递，则是POST方式

$(“#resText”).load(“test.php”,{name:”rain”,age:”22”},function(){});

.get()方法和.post()方法

.get()和.post() 方法是JQuery中的全局函数，而在此之前的JQuery方法都是对JQuery对象进行操作的。

$.get(url,[data],[callback],[type])

//type string 包括xml、html、script、json、text 和_default

$.get()方法的回调函数只有两个参数

function(data,textStatus){

//data: 返回的内容，可以是XML文档、JSON文件、HTML片段等等
//textStatus：请求状态:sussess、error、notmodified、timeout 4种

}

data参数代表请求放回的内容，textStatus参数代表请求的状态，而且回调函数只有当数据成功放回sussess后才被调用，这点与load()方法不一样

data的格式可以有多种，HTML片段、XML文档、JSON文件

Json相比Xml文档一样，用于数据的传输，但是Xml体积大且难以解析，Json文件非常简洁，也容易阅读。格式：{“username”：“张三”}

.post()方法它与.get()方法的结构和使用方式都相同，不过他们之间任然有以下区别

1.Get请求会将参数跟在URL后进行传递,而Post请求则是作为Http消息的实体内容发送给web服务器。

2.Get请求对传输数据有大小限制（通常不能大于2kb），而使用Post方式传递的数据量要比Get方式大得多

3.Get方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。安全性不如Post

4.php中获取方式不一样

当load()方法带有参数传递时，会使用Post方式发送请求

.getScript()与其他Ajax方法一样，.getScript()也有回调函数，会在JavaScript文件成功载入后运行。

$("#go").click(function(){	   $(".block").animate{backgroundColor:'pink'},1000).animate{backgroundColor:'blue'},1000);
});
});
});

$(function(){
$("#send").click(function(){
$.getJson('test.json',function(data){
//data:返回的数据
});
});
});

遍历Json数据的Jquery方法 $.each()函数是一个全局函数，以一个数组或者对象作为第一个参数，以一个回调函数作为第2个参数。回调函数有两个参数，第一个为对象的成员或数组的索引，第2个为对应变量或内容

$(function(){
$('#send').click(function(){
$.getJSON('test.json',function(data){
$("#resText").empty();
var html ='';
$.each(data,function(commentIndex,comment){
html+='<div class="comment"><h6>'
+comment['username']+':</h6><p class="para">'
+comment['content']+'</p></div>';
});
$("#resText").html(html);
})
})
})

$.Ajax()

$.ajax(options)

该方法只有一个参数，这个对象里面包含了方法所需的请求设置以及回调函数等信息，参数以key/value的形式存在，所有的参数都是可选的。

参数名称	类型	说明
url	String	(默认为当前页地址)发送请求的地址
type	String	请求方式，默认为GET
timeout	Number	请求超时时间（毫秒）
data	Object 或String	发送到服务器的数据。如果已经不是字符串，将自动转换成字符串格式。Get请求中将附加的URL后，格式为Key/value,例如{fool：”bar”}
dataType	String	xml、html、script、json、jsonp、text
beforeSend	Function	在beforeSend中如果返回false可以取消本次Ajax请求
complete	Function	请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串
success	Function	请求成功后调用的回调函数，有两个参数function（data,textStatus）{}
error	Function	请求失败时被调用的函数
global	Boolean	默认为true，表示是够触发全局Ajax时间。设置为false将不会触发全局Ajax事件，AjaxStart或AjaxStop可用于控制各种Ajax事件