跟着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请求错误时执行

相关代码