AJAZ与Coment
XMLHttpRequest对象
使用MSXML中的XHR对象
function createXHR(event) {
if(typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
if(typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],
i,len;
for(i=0,len=versions.length;i<len;i++){
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
}catch(ex){
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Error("No SHR object acailable")
}
}
用法
调用open()方法,接受三个参数:
要发送的请求类型
请求的URL,----相对于执行代码的当前页面
表示是否异步请求的布尔值
xhr.open("get", "example.php", false);
调用open()不会真正发送请求,只是启动一个请求准备发送
调用send()发送请求,接受一个参数----作为请求主题发送的数据
响应的数据会自动填充XHR对象的属性:
- responseText:作为响应头主题返回的文本
- responseXML:如果响应的时“text/xml”或“application/xml”,这里回保存包含着响应数据的XML DOM文档
- status:响应的HTTP状态
- statusText:HTTP状态说明
未来获取响应/请求的当前活动阶段,可以查询readyState属性:
- 0,未初始化,尚未调用open()方法
- 1,启动,调用open但是还未调用send
- 2,发送,调用了send,但尚未接收响应
- 3,接收,已经接收到部分响应数据
- 4,完成,已经接收到全部响应数据。
只要readyState属性值发生变化,都会触发一次readyStatechange事件,因此在调用open前指定onreadystatechange事件处理程序去报浏览器兼容性
var xhr = createXHR();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
if((xhr.status >= 200&& xhr.status<300)|| xhr.status ==304){
alert(xhr.responseText);
}else{
alert("Request was unsuccessful:" + xhr.status);
}
}
};
xhr.open("get","example.txt",true);
xhr.send(null)
HTTP头部信息
默认发送XHR请求时发送的头部信息:
- Accept,浏览器能够处理的内容类型
- Accept-Charset,浏览器能够显示的字符集
- Accept-Encoding,浏览器能够处理的压缩编码
- Accept-Language,浏览器当前设置的语言
- Connection,浏览器与服务器之间链接的类型
- Cookie,当前页面设置的任何Cookie Host,发出请求的页面所在的域
- Referer,发出请求的页面的URL
- User-Agent,浏览器的用户代理字符串。
要成功发送请求头部信息,必须在调用open与send之间调用setRequestHeader()
调用XHR对象的getResponseHeader()并传入头部字段名称,可以取得相应的响应头部信息。
GET请求
例子:
xhr.open("get", "example.php?name1=value&name2=value2",true);
使用一下函数实现向现有URL末尾添加查询字符串参数
function addURLParam(url,name,value) {
url += (url.indexOf("?") == -1? "?":"&");
url += encodeURIComponent(name) +"=" + encodeURIComponent(value);
return url
}
POST请求
例子:
xhr.open("post", "example.php",true);
并且下一步,向send中传入数据
XMLHttpRequest2级
FormData
创建FormData对象,并添加数据:
var data = new FormData();
data.append("name","xiaoming");
创建FormData实例后,可以将它直接传给XHR的send方法。
var form = document.getElementById("user-info");
xhr.send(new FormData(form));
超时设定
使用timeout属性,表示请求在等待相应多少毫秒之后就终止。
xhr.timeout = 1000;
xhr.ontimeout = function(){
alert("Request did not return in a second")'
};
shr.send(null)
进度事件
load事件
响应接收完毕后将触发load事件。onload事件处理程序会接受一个event对象,其target属性就指向XHR对象实例,因而可以访问XHR对象的所有方法和属性。
xhr.onload = function(){
if((xhr.staatus >= 200&& xhr.status<300)||xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful:"+xhr.status);
}
};
progess事件
这个事件会在浏览器接受新数据期间周期性地触发。onprogress事件处理程序会接收到一个event对象,其target属性是XHR对象。
xhr.onload = function(){
if((xhr.staatus >= 200&& xhr.status<300)||xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful:"+xhr.status);
}
};
xhr.onprogess = function(event){
var divStatus = document.getElementById("status");
if(event.lengthComputable){
divStatus.innerHTML = "Received" + event.position + "of"+
event.totalSize + "bytes";
}
};
每次触发progress事件,都会以新的状态信息更新HTML元素的内容
跨资源共享
CORS基本思想:使用自定义的HTTP头部,让浏览器与服务器进行沟通,从而决定请求或响应是应该成功或失败。比如可以额外添加一个Origin头部,其中包含请求页面的源信息。
例如:
Access-Control-Allow-Origin:http://www.nczonline.net
其他跨域技术
图像Ping
动态创建图像经常使用图像Ping,与服务器进行简单,单向的跨域通信方式。请求的数据通过查询字符串发送,可以响应任何内容。
var img = new Image();
img.onload = img.onerror = function(){
alert("Done!");
};
img.src = “http://www.example.com/test?name=Nicholas”;
但是缺点也明显:只能get请求,无法访问服务器的响应文本
JSONP
JSONP由两部分组成:
回调函数
数据
例子:
http://freegeoip.net/json/?callback=handleResponse
JSONP通过动态< script>元素使用。
Comet
Comet是一种服务器向页面推送数据的技术,能够让信息近乎实时地被推送到页面。实现方式:
长轮询
浏览器定时向服务器发送请求,看看有没有更新的数据
页面发起一个到服务器的请求,然后服务器一直保存链接打开,知道有数据可发送。
发送完数据之后,浏览器关闭连接,随即有发起一个到服务器的新请求
长轮询等待发送响应。
流
浏览器向服务器发送一个请求,而服务器保持连接打开,然后周期性向浏览器发送时数据
服务器发送事件
SSE(Server-Sent Events),用于创建到服务器的单向连接,服务器通过这个连接可以发送任意数量的数据。服务器必须响应text/event-stream,而且是浏览器中的JS API能解析格式输出
- SSE API
要预定新的事件流,首先创建一个新的EventSource对象,并传进一个入口点:
var source = new EventSource("my.php");
EventSource的实例有个readyState属性,值分别为:
- 0,正连接到服务器
- 1,表示打开了连接
- 2,关闭了连接
另外还有三个连接:
-
open,建立连接时触发
-
message,在从服务器接收到新事件时触发
-
error,在无法建立连接时触发
服务器响应的数据以字符串形式保存在event.data中。 -
事件流
服务器事件会通过一个持久的HTTP响应发送,类型为text/eventstream。在这里插入代码片