JQuery中的Ajax

ben_hu

JQuery中的Ajax

用JavaScript实际过Ajax功能功的朋友们一定不会忘记使用XMLHttpRequest对象的步骤,

先生成XMLHttpRequest对象,如果浏览器不支持还要使用ActiveXObject, 然后就是绑定

回调函数,接下来.open操作,有时还要设置 请求头 然后 .send操作. 步骤太多了. 如果使

用JQuery就方便多了. 当然使用JQuery时也不要忘记,JQuery的背后其实也是按上述步骤

来实际的. JQuery中有关Ajax的操作方法有很多,但我一般只有 $.ajax() 好,现在就用一

个实际来讲解这个方法的使用.  下面是实现代码.

第一种实现

getNextTheme

其实是一个JavaScript的类

function getNextTheme(){ } //完成后的回调函数,其实也可以不用这个,JQuery还提供两个更简单的 getNextTheme.prototype.callback_Complete = function(XMLHttpRequest, textStatus){      if (XMLHttpRequest.readyState == 4) {              var data = XMLHttpRequest.responseText; this.instance.finished(data);       } else {           this.instance.finished("搜索线程发生错误" + textStatus);       } } getNextTheme.prototype.finished = function(data){            //对服务器返回的数据 data 进行处理,因为处理代码与本课无关,所以忽略.            // 对 data 进行处理 } getNextTheme.prototype.begin = function(){    $.ajax({ instance: this, url: PROXY_URL_THEME,          //这个就是远程用来处理请求的页面,可以是PHP写的,也可以是JSP,也可以是ASP    cache: false, async: true, dataType: "html", timeout: 15000, complete: this.callback_Complete }); } $(document).ready(function(){ var getTheme = new getNextTheme(); getTheme.begin(); }); 代码分析 首先得说明一下, 以代码其实是一个JavaScript中的类. getNextTheme就是这个类的类名 var getTheme = new getNextTheme(); getTheme.begin(); 先生成getNextTheme的实例,然后调begin()方法就开始向服务端"要"数据了. 具体有关JavaScript类的知识请朋友自行搜索,查找.代码解析: $.ajax({ instance: this, type:"GET", url: PROXY_URL_THEME, cache: false, async: true, dataType: "html", timeout: 15000, complete: this.callback_Complete });
type: 选择是以"GET"或"POST"的方式向服务器发送数据.

url: 服务器端的接收URL

cache: 会不会从浏览器缓存中加载请求信息, 选择有true,false,默认false

async: (默认: true) 默认设置下，所有请求均为异步请求。如果需要发

送同步请求，请将此选项设置为 false。

注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

dataType:预期服务器返回的数据类型

timeout: 设置超时,单秒毫秋季

complete: 请求完成后回调函数 (请求成功或失败时均调用)。

知识点

在这儿有一个instance参数,这个参数是我自己"造"的, 我们除了使

用JQuery内置的参数外还可以自己定义一些参数.instance这个参

数就是我自己定义的, 怎么定义? 直接写上去就是了,参数可以自己命

名. 这个instance里放的东西可不会发送到服务端哟, 这个参数里的

数据我是给回调函数使用的. 为什么要这样做? 因为当请求被响应后

JQuery就会去调用回调函数, 这时回调函数被传入的参数只有JQuery

预定给出的类型, 有时我们是需要使用自己的数据,怎么办? 可以

在 $.ajax({}) 中把我们的数据放进去,这样回调函数就能直接访

问到了. instance使用代码如下:

getNextTheme.prototype.callback_Complete = function(XMLHttpRequest, textStatus){        if (XMLHttpRequest.readyState == 4) {                 var data = XMLHttpRequest.responseText;                 this.instance.finished(data);        } else {                 this.instance.finished("搜索线程发生错误" + textStatus);        } } 这里面的this.instance 就是我们在$.ajax({})中给入的instance. 记住,名字可以自己取,可以是abc,也可以是myVar. 第二种实现 getNextTheme 其实是一个JavaScript的类 function getNextTheme(){ } //响应成功的回调函数 getNextTheme.prototype.callback_Success = function(data){       this.instance.finished(data);       this.instance.finished("搜索线程发生错误" + textStatus); } //响应失败的回调函数 getNextTheme.prototype.callback_Error = function(){      this.instance.finished("搜索线程发生错误" + textStatus); } getNextTheme.prototype.finished = function(data){          //对服务器返回的数据 data 进行处理,因为处理代码与本课无关,所以忽略.           // 对 data 进行处理 }        getNextTheme.prototype.begin = function(){             $.ajax({                    instance: this,                    url: PROXY_URL_THEME, //这个就是远程用来处理请求的页面,可以                                       //  是PHP写的,JSP,也可以是ASP                     cache: false,                     async: true,                    dataType: "html",                     timeout: 15000,                     success: this.callback_Success,                     error:this.callback_Error });              }     $(document).ready(function(){     var getTheme = new getNextTheme();     getTheme.begin(); });
代码分析: 因为其它的都没变化,就$.ajax({})中的参数有小小的

变化,所以我只说说这个变化.

success: this.callback_Success 如果成功响应则调用名为callback_Success的回调函数 error:this.callback_Error 如果无响应或者响应有问题则调用名为 callback_Error的回调函数