简介
Asynchronous JavaScript and XML——异步JavaScript和XML
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
包含的技术
AJAX基于现有的Internet标准,并且联合使用它们:
l XMLHttpRequest 对象 (异步的与服务器交换数据)
l JavaScript/DOM (信息显示/交互)
l CSS (给数据定义样式)
l XML (作为转换数据的格式)
工作原理
简述
通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。
详述
Ajax的工作原理相当于在用户和服务器之间加了一个中间层(ajax引擎),使用户操作与服务器响应异步化。
局部更新
异步请求
浏览器普通交互方式:
浏览器的Ajax的交互方式:
XHR(XMLHttpRequest)
XMLHttpRequest 对象用于在后台与服务器交换数据。
l 在不重新加载页面的情况下更新网页
l 在页面已加载后从服务器请求/接收数据
l 在后台向服务器发送数据
l 所有现代的浏览器都支持 XMLHttpRequest 对象。
XML
EXtensible Markup Language,可扩展标记语言,用来传输和存储数据。它提供了用于描述结构化数据的格式,适用于不同应用程序间的数据交换,而且这种交换不以预先定义的一组数据结构为前提,增强了可扩展性。
XMLHttpRequest对象与服务器交换的数据通常采用XML格式。
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
-
XML并没有做任何事情。只是包装在标签中的信息。旨在承载数据
-
XML不使用预定义标签
属性
-
onreadystatechange
一个JavaScript函数对象,当readyState属性改变时会调用它。回调函数会在user interface线程中调用。 -
readyState
表示请求/响应过程的当前活动阶段
0:未初始化。尚未调用open()
1:启动。已经调用open(),尚未调用send()
2:发送。已经调用send(),尚未接收到响应
3:接收。已经收到部分响应数据
4:完成。已经收到全部响应数据
status
响应的HTTP状态码,如 200 :成功,而 404:“Not Found” 错误,202:请求被接受但尚未成功,400:错误请求,500:内部服务器错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。statusText
HTTP 状态的说明,如"OK",“Not Found”。当状态为 200 的时候它是 “OK”,当状态为 404 的时候它是 “Not Found”。和 status 属性一样,当 readyState 小于 3 的时候读取这一属性会导致一个异常。responseText
作为响应主体被返回的文本。如果 readyState 小于 3,这个属性就是一个空字符串。当 readyState 为 3,这个属性返回目前已经接收的响应部分。如果 readyState 为 4,这个属性保存了完整的响应体。responseXML
如果响应的内容类型是"text/xml"或"application/xml",这个属性将保存着响应数据的XML DOM文档。
方法
open()
作用:初始化请求
xhr.open(method,url,async,user,password)
method 请求方式,如get,post,put等等
url 请求路径,可以是相对路径也可以是绝对
async 是否异步请求 传布尔值,默认true
user 用户名,可选参数,为授权使用;默认参数为空string.
password 密码,可选参数,为授权使用;默认参数为空string.
setRequestHeader()
作用:设置请求头
参数两个,第一个请求体名称header,第二个要赋的值value。
需要在open方法后调用。
在发送POST请求时,必须设置请求头
。服务端通常是根据请求头(headers)中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码,再对主体进行解析。
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//urlencoded : url encoded
application/x-www-form-urlencoded:
编码格式:将键值对的参数用&
连接起来,如果有空格,将空格转换为+
加号;有特殊符号,将特殊符号转换为ASCII HEX
值
浏览器的原生 form 表单,如果不设置 enctype 属性,那么最终就会以 application/x-www-form-urlencoded 方式提交数据,对于Get请求,是将参数转换?key=value&key=value
格式,连接到url后。POST请求类似于下面这样(无关的请求头在本文中都省略掉了):
POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8
title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3
send()
作用:发送请求
参数为发送的请求体,不传请求体的话最好传个null
abort()
作用:取消当前响应,关闭连接并且结束任何未决的网络活动。
这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态,并且取消所有未决的网络活动。例如,如果请求用了太长时间,而且响应不再必要的时候,可以调用这个方法。
getResponseHeader()
作用:返回指定响应头的值
参数:响应头的名称
getAllResponseHeaders()
作用:返回所有头部信息的字符串
实现Ajax
- 建立XMLHttpRequest对象
- 为XHP设置状态响应函数和初始化参数
- 发送请求
处理字符串响应
var xhp;
$("#btn").click(function(){
xhp = new XMLHttpRequest();//1. 建立XMLHttpRequest对象
var tmp = $("input[name='u_id']").val();
if(xhp != null){
xhp.onreadystatechange=getResult;//2. 为XHP设置状态响应函数
xhp.open('POST','MyServlet',true);//3.设置初始化参数
xhp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhp.send("u_id="+tmp+""&pwd="+"12345");//4. 发送请求,参数为请求体
}
});
function getResult(){
if(xhp.readyState == 4){
if(xhp.status == 200)
alert("收到的:"+xhp.responseText);
else
alert("请求出错");
}
}
处理XML响应
xml响应
<?xml version="1.0" encoding="UTF-8"?>
<mr>
<books>
<book>
<title>
JavaWeb程序开发范例宝典
</title>
<publisher>
人民邮电出版社
</publisher>
</book>
<book>
<title>
Java范例完全自学手册
</title>
<publisher>
人民邮电出版社
</publisher>
</book>
</books>
</mr>
处理
functiongetResult() {
if (http_request.readyState == 4) { //判断请求状态
if (http_request.status == 200) { //请求成功,开始处理响应
var xmldoc = http_request.responseXML;
varstr = "";
for (i = 0; i < xmldoc.getElementsByTagName("book").length; i++) {
var book = xmldoc.getElementsByTagName("book").item(i);
str = str + "《" + book.getElementsByTagName("title")[0].firstChild.data + "》由“" + book.getElementsByTagName('publisher')[0].firstChild.data + "”出版<br>";
}
document.getElementById("book").innerHTML = str; //显示图书信息
} else { //请求页面有错误
alert("您所请求的页面有错误!");
}
}
}