jQuery是一个非常简单的js库,它对js进行了封装,使用它可以简化程序的编程,核心理念是write less,do more(写得更少,做得更多)。优点:轻量级,就是小,压缩后,只有几十K;速度快;链式编程;浏览器兼容;提供了UI,FX的支持;
jQuery为Ajax提供了很多种不通的支持;常用的方法有$.get(),$.post(),$.getJSON(),$.load(),$.ajax()等;
一、$.ajax()是功能最强大的ajax请求方法,也是我最习惯用的,因为使用这个函数可以完成异步通讯的所有功能。但是它的参数较多,有的时候可能会显得麻烦一些。下面我们看一下它的常用参数:
参数 描述
type | 类型:String,请求方式 ("POST" 或 "GET"), 默认为 "GET"。 |
url | 类型:String,(默认: 当前页地址) 发送请求的地址。 |
data | 类型:String,发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。 |
async | 类型:Boolean,(默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。 |
success | 类型:Function请求成功后的回调函数。参数:由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。 |
error | 类型:Function,默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。 |
二、$.ajax()的一般格式
$.ajax({
type: 'POST',
url: url ,
data: data ,
success: success
});
三、$.ajax()实际代码
这是一个关于发送短信验证码的一段代码,目的是为了判断短信验证码是否成功发送,成功执行success这个函数,失败执行error这个函数,写到这里,我想到了一个让我犯傻的地方。
以为上面的代码执行完毕了,result1已经被重新赋值了,然而当执行如下代码的时候:
事情却不是我想的那样,result1的值并不是我所想的那样,它的值还是最初定义的值,思前想后之后发现原来忘了$.ajax()是异步执行的,导致数据没有传递过来就已经执行了if...else...的代码,然后就加了一个async参数,把它设置成false,这样就变成了同步请求,代码如下:
通过这个问题我更深的认识到了Ajax异步局部刷新的功能,以往只觉得向后台发送请求就用ajax,享受着它的强大功能带来的便利,也正因为它的强大功能让我忽略了一些问题,还好这次让我早早的遇到了,在以后的代码编写中不会再出现同样的问题,也为自己敲响了警钟,不能只看到事物好的一面就不假思索的去使用它,也要从其他角度去思考对待它。