js高级程序设计笔记--Ajax与comet
来源:互联网 发布:数控切割机床软件 编辑:程序博客网 时间:2024/05/19 00:07
XMLHttpRequest对象
在IE5中,XHR对象是通过MSXML库中的一个ActiveX对象实现的。因此IE中有三种不同版本的XHR对象:MSXML2.XMLHttp,MSXML2.XMLHttp.3.0,MSXML2.XMLHttp.6.0.
IE7+,Firefox,Opera,Chrome,Safari都支持原生的XHR对象。可以使用XMLHttpRequest构造函数。
function createXHR(){ if(typeof XMLHttpRequest != "undefined"){ return new XMLHttpRequest(); }else if(typeof ActiveXObject != "udefined"){ if(typeof arguments.callee.activeXString != "string"){ var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"], i,len; for(i=0,len = version.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 XHR object available"); }}
XHR用法
1.调用open()方法,接收3个参数:要发送的请求的类型,请求的URL,表示是否异步发送请求的布尔值。
xhr.open("get","example.php",false);
2.调用send()方法,接收1个参数,作为请求主体发送的数据。如果没有也要传入null.
响应的数据会自动填充XHR对象的属性:
responseText:作为响应主体被返回的文本。
responseXML:当响应的内容类型 是“text/xml”或”application/xml”时,被返回。
status:响应的HTTP状态码
statusText;http状态的说明。(200表示成功,304表示请求的资源没被修改,可用浏览器缓存的版本)
发送异步请求时可检测XHR对象的readyState属性。取值如下:
0:未初始化,尚未调用open方法。
1:启动,已经调用open()方法。
2:已经调用send()方法。
3:接收,已经接收到部分响应数据。
4. 完成。已经接收到全部响应数据。
只要readyState属性改变。就会触发readystatechange事件。
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"); } }}
另外在接收到响应数据之前可以调用abort()方法取消异步请求。
xhr.abort();
setRequestHeader(headerName,headerValue):设置头部信息。
getRequestHeader(headName):取得相应的响应头部信息。
getAllRequestHeaders():取得一个包含所有头部信息的长字符串。
XHR模仿表单提交:
xhr.open("post","post.php",true);xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");var form = document.getElementById("user-info");xhr.send(serialize(form));
XMLHttpRequest2级
FormData
XMLHttpRequest2级为表单数据的序列化定义了FormData类型。
var data = new FormData();data.append("name","bibi");
也可以穿入表单元素
var data = new FormData(document.forms[0]);
创建之后可以直接传给XHR的send()方法。
xhr.send(new FormData(form));
使用此类型的方便之处在于不必明确的在XHR对象上设置请求头部。支持FormData的浏览器有FireFox4+,Safari5+,Chrome.
超时设定
IE8为XHR对象添加了一个timeout属性。表示请求在等待响应都少毫秒之后就终止。进而触发ontimeout事件处理程序。这项功能后来被收入了XMLHttpRequest2级规范中。
xhr.timeout = 1000;//仅适用于IE8+xhr.ontimeout = function(){ .....}
overrideMimeType()方法
强制xhr对象将响应当做某种数据类型的格式来处理。
xhr.overrideMimeType("text/xml");xhr.send(null);
进度事件
6个进度事件:
loadstart:在接收到响应数据的第一个字节时触发。
progress:在接收响应期间持续不断的触发。
error:在请求发生错误时触发。
abort():调用abort()方法终止连接时触发。
load:在接收到完整的相应数据时触发。
loadend:在通信完成或者触发error,abort,load事件后触发。(暂时没有浏览器支持)
IE8+只支持load事件。
load事件
Firefox引入load事件,用以替代readystatechange事件。响应接收完毕后将触发load事件。onload事件接收一个event对象,其target属性指向XHR对象实例。但是并非所有浏览器都实现了这个事件对象。因此还是得像原来那样使用XHR对象变量。
progress事件
Mozilla对XHR的另一个革新是添加了progress事件。onprogress事件处理程序接收一个event对象,该对象包含着三个额外的属性:
lengthComputable:进度信息是否可用的布尔值
position:已经接收的自己数
totalSize:根据Content-Length响应头部确定的预期字节数。
xhr.onprogress = function(event){ var divStatus = document.getElementById("status"); if(event.lengthComputable){ divStatus.innerHTML = "received" + event.position +"of "+event.totalSize+"bytes"; }}
跨源资源共享
CORS(Cross-Origin Resource Sharing):定义了在必须访问跨资源时,浏览器与服务器应该如何沟通。使用自定义的Http头部让浏览器与服务器进行沟通,,从而决定请求或响应成功或失败。比如在发送该请求时附加一个额外的Origin头部。
Origin:http://www.nczongline.net
如果服务器认为这个请求可以接受,就在Access-Control-Allow-Origin头部中回发相同的原信息(如果是公共资源可以回发“*”).
Access-Control-Allow-Origin:http://www.nczongline.net
如果没有这个头部或者原信息不匹配,浏览器会驳回请求。注意,请求和响应都包含cookie信息。
IE对CORS的实现
微软在IE8中引入了XDR类型。能够实现安全可靠的跨域通信。XDR与XHR的一些不同之处。
- cookie不会随请求发送,也不会随响应返回。
- 只能设置请求头部信息中的Content-Type字段。
- 不能访问响应头部信息
- 只支持get和post请求。
XDR对象的使用方法与XHR对象类似。不同的是open()方法只接受两个参数:请求类型和URl.所有XDR请求都是异步执行的。请求返回后会触发load事件。响应的数据也会保存在responseText属性中。
var xdr = new XDomainRequest();xdr.onload = function(){ alert(xdr.responseText);}xdr.open("get","http://www.haha.com");xdr.send(null);
xdr.abort():终止请求。与XHR一样,XDR一样,XDR对象也支持timeout属性以及ontimeout事件处理程序。
为支持post请求,XDR对象提供了contentType属性
xdr.open("post","http://www.hihi.com");xdr.contentType = "application/x-wwww-form-urlencoded";xdr.send("name=value1&name2=value2");
其它浏览器对CORS的实现
通过XMLHttpRequest对象实现了CORS的原生支持。要请求另一个域中的资源,使用标准的XHR对象并在open()方法中传入绝对URL即可。
但是跨域XHR对象也有一些限制。
1, 不能使用setRequestHeader()设置自定义头部。
2. 不能发送和接收cookie.
跨浏览器的CORS
function createCORSRequest(method,url){ var xhr = new XMLHttpRequest(); if("withCredentials" in xhr){ xhr.open(method,url,true); }else if(typeof XDomainRequest != "undefined"){ Vxhr = new XDomainRequest(); xhr.open(method,url); }else{ xhr = null; } return xhr;}
Comet
一种服务器向页面推送数据的技术。实现Comet的两种方式:长轮询(利用setTimeout)和流(浏览器向服务器发送一个请求,服务器保持连接断开,然后周期性的向浏览器发送数据)。
使用XHR对象实现HTTP流:
function createStreamingClient(url,progress,finished){ var xhr = new XMLHttpRequest(), received = 0; xhr.open("get",url,true); xhr.onreadystatechange = funtion(){ var result; if(xhr.readyState == 3){ result = xhr.responseText.subString(received); received += result.length; //调用progress回调函数 }else if(xhr.readyState == 4){ finished(xhr.responseText); } } xhr.send(null); return xhr;}
服务器发送事件
SSE(Server-Send Events,服务器发送事件)是围绕只读Comet交互推出的API。SSE API用于创建到服务器的单向连接,服务器通过这个连接可以发送任意数量的数据。服务器响应的MIME类型必须是text/event-stream。支持SSE的浏览器:firefox6+,safari5+,opera11+,chrome
1. SSE API
首先创建一个新的EventSource对象。
// 传入的url必须是同源的var source = new EventSource("myevents.php");
EventSource的实例有个readyState属性,值为0表示正连接服务,1表示打开了连接,2表示关闭了连接。
还有以下3个事件:
open:在建立连接时触发。
message:在从服务器接收到新事件时触发。
error:在无法建立连接时触发
source.onmessage = function(event){ var data = event.data; //处理数据 //如果连接断开会自动重新连接,如果想强制断开连接。可close()方法 source.close();}
- js高级程序设计笔记--Ajax与comet
- Javascript高级程序设计第21章(Ajax与Comet)
- JavaScript高级程序设计(第3版)阅读笔记第03天-ajax和Comet
- Ajax与Comet-JavaScript高级程序设计第21章读书笔记(1)
- Ajax与Comet-JavaScript高级程序设计第21章读书笔记(2)
- javascript高级程序设计第三版 第21章 Ajax与Comet
- 《JavaScript》高级程序设计第21章:Ajax和Comet,jsonp
- js 高级程序设计笔记
- JS高级程序设计-笔记
- JS学习19(Ajax与Comet)
- js高级程序设计笔记1
- Ajax 与 Comet
- Ajax、Comet与Websocket
- Ajax、Comet与Websocket
- Ajax与Comet
- Ajax 与 Comet
- Ajax与Comet
- Ajax 与 Comet
- 寒假篇22
- 风再起时-------2016年终总结
- 泛型作用
- 统计学9
- stm32串口通信---飞控应用
- js高级程序设计笔记--Ajax与comet
- 微信小程序的五大特征(五)
- 术语 名词
- FreeRTOS的源代码个人分析(基于KEIL下STM32F103的Demo) 四
- 基于gulp编写的一个简单实用的前端开发环境
- poj 2352 Stars 线段树基础
- oj2393判断是否为回文
- 良好的代码习惯,减少不必要的错误
- JavaScript练习之添加纪录