跟着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来取代复杂的$.ajax

其中 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请求错误时执行

相关代码

 

 

 

 

 

 

posted @ 2010-04-10 09:51  张巍的博客  阅读(295)  评论(0编辑  收藏  举报