javascript高级程序设计学习笔记（八）---AJAZ与Coment

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。在这里插入代码片