JQuery中的Ajax
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的回调函数
页:
[1]