XMLHttpRequest的概述
•
XMLHttpRequest
最早是在
IE5
中以
ActiveX
组件的形式实现的。非
W3C
标准
.
•
创建
XMLHttpRequest
对象(
由于非标准所以实现方法不统一
)
–
InternetExplorer
把
XMLHttpRequest
实现为一个
ActiveX
对象
–
其他浏览器(
Firefox
、
Safari
、
Opera…
)把它实现为一个本地的
JavaScript
对象。
–
XMLHttpRequest
在不同浏览器上的实现是兼容的
,所以可以用同样的方式访问
XMLHttpRequest
实例的属性和方法,
而不论这个实例创建的方法是什么。
创建XMLHttpRequest对象
•
为了每次写
Ajax
的时候都节省一点时间,可以把对象检测的内容打包成一个可复用的函数:
•
说明:对window.XMLHttpRequest的调用会返回一个对象或null,
if语句会把调用返回的结果看作是true或false(如果返回对象则为true,返回null则为false)。
如果XMLHttpRequest对象存在,则把xhr的值设为该对象的新实例。
如果不存在,就去检测 ActiveObject的实例是否存在,如果答案是肯定的,则把微软XMLHTTP的新实例赋给xhr
XMLHttpRequest的方法
XMLHttpRequest的属性
发送请求
•
利用
XMLHttpRequest
实例与服务器进行通信包含以下
3
个关键部分:
–
onreadystatechange
事件处理函数
–
open
方法
–
send
方法
document.getElementsByTagName("a")[0].onclick = function(){
var request = new XMLHttpRequest();
var url = this.href;
var method="GET";
request.open(method, url);
request.send(null);
request.onreadystatechange = function(){
document.getElementById("status").value = request.readyState;
if(request.readyState ==4) {
if (request.status == 200 || request.status == 300){
document.getElementById("name").value = request.responseText;
}
}
}
// 取消其默认行为
return false;
}
•onreadystatechange:
–
该事件处理函数
由服务器触发
,而不是用户
–
在
Ajax
执行过程中,服务器会通知客户端当前的通信状态。这依靠更新
XMLHttpRequest
对象的
readyState
来实现。
改变
readyState
属性是服务器对客户端连接操作的一种方式。
每次
readyState
属性的改变都会触发
readystatechange
事件
•
open(method, url, asynch)
–
XMLHttpRequest
对象的
open
方法允许程序员用一个
Ajax
调用向服务器发送请求
。
–
method
:
请求类型
,类似“
GET”
或”
POST”
的字符串。若只想从服务器检索一个文件,而不需要发送任何数据,
使用
GET(
可以在
GET
请求里通过附加在
URL
上的查询字符串来发送数据,不过数据大小限制为
2000
个字符
)
。若需要向服务器发送数据,用
POST
。
–
在某些情况下,有些浏览器会把多个
XMLHttpRequest
请求的结果缓存在同一个URL
。如果对每个请求的响应不同,就会带来不好的结果。
在此将时间戳追加到
URL
的最后,就能确保
URL
的唯一性,从而避免浏览器缓存结果
。
–
url
:路径字符串,指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。
–
asynch
:表示请求是否要异步传输,默认值为
true
。指定
true
,在读取后面的脚本之前,不需要等待服务器的相应。
指定
false
,当脚本处理过程经过这点时,会停下来,一直等到
Ajax
请求执行完毕再继续执行。
•send(data):
–
open
方法定义了
Ajax
请求的一些细节。
send
方法可为已经待命的请求发送指令
–
data
:将要传递给服务器的字符串。
–
若选用的是
GET
请求,则不会发送任何数据, 给
send
方法传递
null
即可
:
request.send
(null);
–
当向
send()
方法提供参数时,要确保
open()
中指定的方法是
POST
,如果没有数据作为请求体的一部分发送,则使用
null.
–
完整的
Ajax
的
GET
请求示例:
•
接收相应
•
用
XMLHttpRequest
的方法可向服务器发送请求。在
Ajax
处理过程中,
XMLHttpRequest
的如下属性可被服务器更改:
–readyState
–status
–responseText
–responseXML
•
readyState
–
readyState
属性
表示
Ajax
请求的当前状态
。它的值用数字代表。
•
0
代表未初始化。 还没有调用
open
方法
•
1
代表正在加载。
open
方法已被调用,但
send
方法还没有被调用
•
2
代表已加载完毕。
send
已被调用。请求已经开始
•
3
代表交互中。服务器正在发送响应
•
4
代表完成。响应发送完毕
–
每次
readyState
值的改变,都会触发
readystatechange
事件
。如果把
onreadystatechange
事件处理函数赋给一个函数,
那么每次
readyState
值的改变都会引发该函数的执行。
–
readyState
值的变化会因浏览器的不同而有所差异。
但是,当请求结束的时候,每个浏览器都会把
readyState
的值统一设为
4
•status
–
服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息,并且属于超文本传输协议中的一部分。
–
常用状态码及其含义:
•
404
没找到页面
(not found)
•
403
禁止访问
(forbidden)
•
500
内部服务器出错
(internal service error)
•
200
一切正常
(ok)
•
304
没有被修改
(not modified)
–
在
XMLHttpRequest
对象中,服务器发送的状态码都保存在
status
属性里。
通过把这个值和
200
或
304
比较,可以确保服务器是否已发送了一个成功的响应
•responseText
–
XMLHttpRequest
的
responseText
属性
包含了从服务器发送的数据
。它是一个
HTML,XML
或普通文本,这取决于服务器发送的内容。
–
当
readyState
属性值
变成
4
时
,
responseText
属性才可用,表明
Ajax
请求已经结束。
•
•responseXML
–
如果服务器返回的是
XML
, 那么数据将储存在
responseXML
属性中。
–
只有服务器发送了带有正确首部信息的数据时,
responseXML
属性才是可用的。
MIME
类型必须为
text/xml
•数据格式提要
•
在服务器端
AJAX
是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以。
•
从服务器端接收数据的时候,那些数据必须以浏览器能够理解的格式来发送。
服务器端的编程语言只能以如下
3
种格式返回数据:
–
XML
–
JSON
–
HTML
• XML
•
优点:
–
XML
是一种通用的数据格式。
–
不必把数据强加到已定义好的格式中,而是要为数据自定义合适的标记。
–
利用
DOM
可以完全掌控文档。
•
缺点:
–
如果文档来自于服务器,就必须得保证文档含有正确的首部信息。若文档类型不正确,那么
responseXML
的值将是空的。
–
当浏览器接收到长的
XML
文件后,
DOM
解析可能会很复杂
var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
var nodeA = document.createElement("a");
var textA = document.createTextNode(name);
var h2 = document.createElement("h2");
nodeA.appendChild(textA);
nodeA.href="mailto:" + email;
h2.appendChild(nodeA);
• JSON
•
JSON
(
JavaScript Object Notation
)一种简单的数据格式,比
xml
更轻巧。
JSON
是
JavaScript
原生格式
,这意味着在
JavaScript
中处理
JSON
数据不需要任何特殊的
API
或工具包。
•
JSON
的规则很简单:对象是一个无序的“
‘名称
/
值
’对”集合。一个对象以“
{”
(左括号)开始,“
}”
(右括号)结束。每个“名称”后跟一个“
:”
(冒号);“‘名称
/
值’对”之间使用“
,”
(逗号)分隔。
•
JSON
用冒号
(
而不是等号
)
来赋值。每一条赋值语句用逗号分开。整个对象用大括号封装起来。可用大括号分级嵌套数据。
•
对象描述中存储的数据可以是字符串,数字或者布尔值。对象描述也可存储函数,那就是对象的方法。
• 解析JSON
•
JSON
只是一种文本字符串。它被存储在
responseText
属性中
•
为了读取存储在
responseText
属性中的
JSON
数据,需要根据
JavaScript
的
eval
语句。
函数
eval
会把一个字符串当作它的参数
。
然后这个字符串会被当作
JavaScript
代码来执行。
因为
JSON
的字符串就是由
JavaScript
代码构成的,所以它本身是可执行的
•JSON小结
•
优点:
–
作为一种数据传输格式,
JSON
与
XML
很相似,但是它更加灵巧。
–
JSON
不需要从服务器端发送含有特定内容类型的首部信息。
•
缺点:
–
语法过于严谨
–
代码不易读
–
eval
函数存在风险
•解析 HTML
•
HTML
由一些普通文本组成。如果服务器通过
XMLHttpRequest
发送
HTML
, 文本将存储在
responseText
属性中。
•
不必从
responseText
属性中读取数据。它已经是希望的格式,可以直接将它插入到页面中。
•
插入
HTML
代码最简单的方法是更新这个元素的
innerHTML
属性。
document.getElementById("details").innerHTML = request.responseText;
•HTML小结
•
优点:
–
从服务器端发送的
HTML
代码在浏览器端不需要用
JavaScript
进行解析。
–
HTML
的可读性好。
–
HTML
代码块与
innerHTML
属性搭配,效率高。
•
缺点:
–
若需要通过
AJAX
更新一篇文档的多个部分,
HTML
不合适
–
innerHTML
并非
DOM
标准。
•对比小结
•
若应用程序
不需要与其他应用程序共享数据的时候
,
使用
HTML
片段来返回数据时最简单的
•
如果数据需要重用
, JSON
文件是个不错的选择
,
其在性能和文件大小方面有优势
•
当远程应用程序未知时
, XML
文档是首选
,
因为
XML
是
web
服务领域的
“
世界语”