JQuery无废话系列教程(四) 实战篇下

最新推荐文章于 2024-10-18 17:51:23 发布

wansijie

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量2.1k

点赞数

分类专栏： JavaScript 文章标签： jquery xmlhttprequest javascript function 代码分析服务器

本文链接：https://blog.csdn.net/wansijie/article/details/4334036

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

不好意思啊, 离上一篇文章已经过去12天了, 自己的事情太多, 我这儿的天气也太热了36~7度. 无法心静啊.呵. 好了.Let's moving.

在我博客里有朋友留言说JQuery的API他都看了,但在实际应用时不知道如何下手了. 嗯... 这个问题提的很好,我认为也具有普遍性, 我在学JQuery中并没有遇到这种感觉, 当然我不是夸自己多牛X, 因为我从学JQuery的第一天起就一直在"实战",就一直想着怎么把JQuery应用到我的项目里去.

以下是我个人对于学JQuery的一些想法, 供朋友参考.

一, JQuery 只是工具. (抛弃对JQuery的畏惧)

JQuery其实与我们平时用的JavaScript没有根本上的区别, 只不过是一样优化后的工具. 要实现同样的功能,JavaScript可以实现,JQuery也能实现. 只不过表现形式(代码)不一样罢了. 所以我相信能用JavaScript写代码的朋友换成JQuery也是很快的.

二, 多多练习,熟悉JQuery的语法. (熟悉JQuery)

很多知识当我们在书上看后或者听别人讲解后都感觉自己似乎懂了,但到自己去做时却发现自己根本没懂. 做为一个老程序员,我对这个感受颇深.

那怎么练习?

1, 自己想些功能,然后用JQuery实现. (这个用的人比较少)

2, 把自己以前的或者现在正在开发中的代码换用JQuery来实现 (个人比较推荐这个), 除了现在快购利众网 ,以前还有一个GoogleMap的网站我也是用JQuery重新写过主要功能. 也正是在这些修改过程中,让我更加深刻的理解了JQuery的语法,使用,注意事项等. 这也不正是重构的开发思想吗?

好, 进入我们今天的正题, 实战开始.

前三篇文章说的都是有关"选择器"方面的知识, 虽然还有很多地方没有讲到, 但我想"选择器"方面剩下的知识点大家都能搞定. 今天我准备和大家一起交流一下JQuery中的"Ajax". 还是以前那句话,JQuery 很容易的.

JQuery中的Ajax

在开始之前我还得事先申明一下,我对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, //这个就是远程用来处理请求的页面,可以是PHP写的,也可以是JSP,也可以是ASP
        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: 请求完成后回调函数 (请求成功或失败时均调用)。

还有更多更详细的参数说明请大家自己参考JQuery手册, 上面讲的比我说的还要详细.

知识点

在这儿有一个instance参数,这个参数是我自己"造"的, 我们除了使用JQuery内置的参数外还可以自己定义一些参数.instance这个参数就是我自己定义的, 怎么定义? 直接写上去就是了,参数可以自己命名.

这个instance里放的东西可不会发送到服务端哟, 这个参数里的数据我是给回调函数使用的.

为什么要这样做? 因为当请求被响应后JQuery就会去调用回调函数, 这时回调函数被传入的参数只有JQuery预定给出的类型, 有时我们是需要使用自己的数据,怎么办? 可以在 $.ajax({}) 中把我们的数据放进去,这样回调函数就能直接访问到了.

instance使用代码如下:

这里面的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的回调函数

好,今天先到这吧.

快购利众网网购搜索新体验
http://www.kuigood.com/

http://bbs.kuigood.com/