1. 什么是Ajax?
asynchronized javascript and xml
ajax是一种用来改善用户体验的技术, 其实质是使用XMLHttpRequest对象异步的向服务器发送请求.
2.使用ajax技术的好处
- 浏览器可以从服务器同时请求多项内容
- 浏览器请求返回的速度会快很多
- 只有页面中真正改变的部分得到更新
- 会减少服务器的数据流量
- 用户可以在页面更新的同时继续工作
- 有些改变无需与服务器往返通信就可以处理
- 只有页面中真正的改变的部分得到更新(这是第二次出现, 因为实在是太重要了)
- 你的老板会更喜欢你
3. 什么是XMLHttpRequest?
XMLHttpRequest是大多数浏览器对请求对象的叫法, 可以把它发送到服务器并从服务器得到响应而无需加载整个页面.
4. 发送ajax请求的步骤?
- 获取ajax对象.
function createXMLHttpRequest() {
try {
xhr = new XMLHttpRequest();
} catch (tryMS) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (otherMS) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
return null;
}
}
}
return xhr;
}
- 打开与服务器的连接
xhr.open(method,url,true)
method: 请求方式(get/post)
url: 指定服务器资源
true: 请求是否为异步请求, true为异步
- 设置回调函数
- 为onreadystatechange事件绑定函数
xhr.onreadystatechange = function(){
if (xhr.readyState==4 && xhr.status == 200) {
var data = xhr.responseText();
}
}
- 响应内容可以是字符串, 也可以是xml内容
- 发送请求
xhr.send(null)
参数: 请求体内容, get请求也必须给出null
- 如果是post请求, 需要在参数中给出请求的参数
5. jQuery中使用ajax
-
jQuery.ajax()
该方法是jQuery的底层实现
参数:
url: 发送请求的地址
data: 发送到服务器的数据
dataType: 服务器返回的数据类型
可用值 - xml: 返回xml文档
- html: 返回html
- script: 返回js代码
- json: 返回json数据
- jsonp: 返回jsonp格式
- text: 返回字符串
$.ajax({
url:'user/login.do',
data:paramter,
dataType:'json',
type:'POST',
success:callback
});
-
jQuery.get()用于发送get请求
该函数是简写的ajax函数, 等价于
$.ajax({
url: url,
data: data;
success: success;
dataType: dataType;
})
-
jQuery.getJSON()发送get请求加载json数据 -
jQuery.post()发送post请求
参考资料
- "Head First Ajax" Riordan著 中国电力出版社
- http://www.w3school.com.cn/
