浅谈JQuery中的AJax使用
在切入正题之前,我希望大家能带着问题去阅读,比如:jQuery中AJax有哪些???
我们都知道,JQuery对AJax进行了封装,但是你知道它究竟分成了几种封装,每种封装的内容和用法又是什么吗??
好了,带着这些问题往下看,希望我的浅浅的认识能够帮到和我一样曾经困惑的人…
一、3层封装概述
1. 第一层,也是最底层的封装方法:$.ajax()
2. 第二层,我们平时使用频率最高的一层:load()、$.get()、$.post()
3. 第三层,我们会在有些特殊情况下使用$.getScript()、$.getJSON()
二、详情分述
首先我们要说是最常用的一层,也就是第二层。
1) load()
作用:能载入远程HTML代码并插入到DOM中。
用法:load(url, [data], [callback])
参数解析:
1.url: string,请求html的URL地址
2.data(可选): object,发送至服务器的数据
3.callback(可选): function, 请求完成时 的回调函数,无论请求成功或者失败
用例1:载入HTML文档
$(function() {
$(".className").load("test.html");
})
用例2:筛选载入的html文档
$(function() {
//divName是test.html中一个div的类名,使用id用#
$(".className").load("test.html .divName")
})
用例3:请求方式
//load方法会根据参数决定请求的方式,如果没有参数面采用GET方式、有参数采用POST方式、
$(function() {
$(".className").load("test.php", {"username" : "admin", "password" : "pwd"},
function()
{
//TODO
})
}
})
用例4:回调参数
//在回调函数中执行加载完成之后的操作、
$(function() {
$(".className").load("test.php", {...},
function(responseText, textStatus, XMLHttpRequest)
{
//responseText: 请求返回的内容
//textStatus: 请求状态:success、error、 motmodified、timeout 4种
//XMLHttpRequest: XMLHttpRequest对象
});
})
注意:在load方法中,无论ajax请求是否成功,只要请求完成,回调函数就会被触发。
2) $.get() 和 $.post()
提醒:$.get() 和 $.post()方法都是JQuery中的全局函数。
作用:通过GET方式来进行异步请求
用法:$.get(url, [data], [callback], [type])
参数解析:
前三个参数用法与load()方法一样
type(可选): string, 服务器返回数据的格式,包括 xml、html、script、json、text、default
用例1:与load的回调函数不同
$(function() {
$(".className").click(function() {
$.get("getTest.php", {"username" : "admin", "password" : "pws"},
function(data, textStatus) {
//注意:get的回调函数只有两个参数,而且只有当数据成功返回之,才会调用,与load方法不同
//data: 返回的内容(可以是:XML、JSON、html片段)
//textStatus: 请求状态(success、error、notmodified、timeout)
})
})
})
用例2:post()方法
补充: 它与$.get()的结构和使用方式都相同,不过它们之间仍然有区别:
1)GET请求会将参数跟在url后面,明文传递;而POST请求则是最为HTTP消息的实体内容发送给文本服务器
2)GET方式对传递的数据大小限制(通常不同大于2kb),而使用post方式传递,数据量要比get大的多(理论上不受限制)
3)GET方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到数据,例如账号和密码等。
4)GET方式和POST方式传递的数据在服务器端的获取方式也不同。