跟着jquery API学jquery之八 ajax
看到ajax这里我们先看一下如何用javascritp写一个ajax出来
Ajax的原理就是XMLHttpRequest这个对象
首先我们需要建立这个对象
首先我们建立一个xajax.js的文件
1 var request = false;
2
3 try {
4
5 request = new XMLHttpRequest();
6
7 } catch (ex){
8
9 try {
10
11 request = new ActiveXObject("Msxml2.XMLHTTP");
12
13 } catch(ex1){
14
15 try {
16
17 request = new ActiveXObject("Microsoft.XMLHTTP");
18
19 } catch (failed) {
20
21 request = false;
22
23 }
24
25 }
26
27 }
28
29
这里我们建立了一个XMLHttpRequest对象 ,XMLHttpRequest对象唯一的目的就是发送请求和接受相应
我们在ajax中常用的几个函数
open():建立到服务器的新请求。
send():向服务器发送请求。
abort():退出当前请求。
readyState:提供当前 HTML 的就绪状态。
responseText:服务器返回的请求响应文本。
1 function GetInfo(url) {
2
3 request.open("GET", url, true); //open函数中设置为true是异步的关键
4
5 request.onreadystatechange = callback;//设置一个回调函数
6
7 request.send(null); //send用来传递参数 如果没有则为null
8
9 }
10
11
12
13 //现在我们实现这个回调函数
14
15 function callback() {
16
17 //首先我们判断一下状态
18
19 if (request.readyState == 4) { //4表示响应完成
20
21 if (request.status == 200) { //200表示合同谈判状态是顺利的 比如我们会见到404的的错误
22
23 //判断完成后我们就可以对服务器返回的值做处理了
24
25 $("#a").text(request.responseText);
26
27
28
29 }
30
31 }
32
33 }
34
35
这样我们就基本完成了一个最基本的ajax,然后我们建立一个hand.ashx的处理程序
我们在index.aspx页面上放置一个按钮 ,并写上onclick="GetInfo('hand.ashx')" ,这样就完成了一个简单的ajax
当jquery出现之后 ,ajax就变成了一句话的事情
要实现上面的请求 jQuery要怎么做呢
我们看一下load这个函数:载入远程的html文件代码,并插入到DOM中,
那么我们只需要
$('#a').load('hand.ashx')
就可以实现上面我们写的N多代码
当然,我们知道有两中方式 get和post,jquery中提供了
$.get(url,[data],[callback],type) $.post()两种方式,分别用简单的get/post来取代复杂的$.
其中 url表示地址 data为传入参数 callback为回调函数 type为返回值的类型
当然,有时候这种方式也无法满足我们的需求 这里就要用到$.ajax了
在这个函数中可以很方便色设置ajax的细节 如:
$.ajax({
type: "get",
url: "hand.ashx ",
success: function(text){
alert( text);
}
});
当然我们并不希望每次写$ajax都要重复的写这些细节,这时我们就要用到
$ajaxSetup了 ,用来设置全局的ajax默认选项,参数方式与$.ajax一样
到这里ajax就差不多了,但是有时候我们需要对ajax执行的进度操作,比如在请求数据时显示 请稍候 ,在数据请求完成时显示数据之类的。
这里就要用到ajax事件了
ajaxSend(callback) ajax请求发送前执行
ajaxStart(callback) ajax请求开始时执行
ajaxComplete(callback) ajax请求完成时执行
jQueryajaxStop(callback) ajax
请求结束时执行
ajaxSuccess(callback) ajax请求成功时执行
jQueryajaxError(callback) ajax请求错误时执行
相关代码