javascript权威指南第21章 Ajax和Comet

function createXHR(){
    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 {
                    //判断是否能成功创建当前版本的ActiveObject
                    new ActiveXObject(versions[i]);
                    arguments.callee.ActiveXString =versions[i]; //如果能设置当前对象的参数
                    break;
                } catch (error) {
                    //跳过
                }
            }
        }
        return new ActiveXObject(arguments.callee.ActiveXString); //根据当前函数的参数创建ActiveXObject
    }
    else{
        throw new Error('No XHR object avilable.');
    }
}

//创建 xhr

var xhr = createXHR();

xhr.onreadyStatechange =function(){
    if(xhr.readySate ==4){
        if(xhr.status>=200 && xhr.status<300|| xhr.status==304){
            var responseText = xhr.responseText;
        }else{
            //请求未正常得到结果
            alert('Request was unsuccessful:'+xhr.status);
        }
    }
}
xhr.open('get','example.php',false); // 参数 get/post url async
xhr.send(null); //send接收请求主体发送的数据，如果get 可以设置成null
xhr.abort(); //取消请求

//21.1.2 HTTP头部信息

xhr.setRequestHeader('MyHeader','MyValue'); //设置请求头信息

//post 提交
xhr.open('post','url',true);
var form = document.getElementById('user-info');
xhr.send(serialize(form)); //序列化form表单数据并且提交表单

//21.2.1 FormData
//为优化post 提交xmlhttprequest定义了FormData
var data =new FormData();
data.append('name','Nicholas');
xhr.send(data);

var form =document.getElementById('user-info');
xhr.send(new FormData(form));

//21.2.2 超时设定
xhr.timeout =1000; //设置1秒
xhr.ontimeout =function(){
    alert('Request did not return in a second');
}

//21.2.3 overrideMimeType() 方法
xhr.overrideMimeType('text/xml'); //强迫请求对象将响应当着XML而非纯文本处理

//21.3 进度事件

//loadstart 在接收到响应数据的第一个字节触发
//progress  在接收响应期间持续不断触发
//error 在请求发生错误时触发。
//abort 在因为调用abort() 方法而终止链接时触发
//load  在接收到完整的响应数据时触发
//loadend 在通信完成或触发 error abort 或 load 事件后触发

xhr.onload =function(){

}
xhr.onprogress =function(){

}

//21.4 跨源资源共享

//跨域安全是服务端设置的，并非请求端可以设置跨域
//Access-Control-Allow-Origin:http://www.nczonline.net
//如果服务端认可这个请求源，则在头部中回发相同的源信息 或者可以回发 Access-Control-Allow-Origin:"*"

//21.4.1 IE对CORS的实现

var xdr = new XDomainRequest();

//21.4.3 Preflighted Requests
//通过设置请求头信息让服务端判定是否支持该请求
// Access-Control-Allow-Origin:http://www.nczonline.net
// Access-Control-Allow-Methods:POST,GET
// Access-Control-Allow-Headers:NCZ
// Access-Control-Allow-Age:1728000

//21.4.4 带凭据的请求
//Access-Control-Allow-Crendentials:true


//21.5 其他跨域技术
//21.5.1 图像ping
 var img =new Image();
 img.onload =img.onerror =function(){
     alert('Done!');
 }
 img.src ='http://www.example.com/text?name=Nicholas';


 //21.5.2 JSONP
 //通过脚本加载方式实现跨域，因为script与img 类似都可以不受跨域限制
 //<script src='http://localhost:9090/student?callback=showData'><\/script>
 //服务端返回   showData({name:'mas'}); //构建一个 JSONP 格式的函数执行体，回到客户端就会执行客户端showData函数实现跨域

 //21.5.3 Comet

 //参看示例  https://www.iteye.com/blog/raising-2271869



 //21.5.4 服务器发送事件

 var source = new EventSource('url');
 source.open();
 source.onmessage =function(event){
     var data = event.data;
 };
 source.close();


 // 21.5.5 Web Sockets

 var socket  = new WebSocket('ws://www.example.com/server.php');
 // 实例化WebSocket对象后，浏览器就会马上尝试建立链接，websocket也有一个代表当前状态的
 // readyState 属性 属性值分别为 WebSocket.OPENING(0) 正在建立链接
 //WebSocket.OPEN(1) 已经建立链接
 //WebSocket.CLOSEING(2) 正在关闭链接
 //WebSocket.CLOSE(3) 已经关闭连接

 socket.send('hello world!');
 var message ={
     time:new Date(),
     text:"Hello World!",
     clientId:'asdfp8734rew'
 };
 socket.send(JSON.stringify(message));
 //从服务端接收消息
 socket.onmessage =function(event){
     var data = event.data;
     //处理逻辑
 };
 
 socket.onopen =function(event){

 };
 socket.onerror =function(event){

 };
 socket.onclose =function(event){
     //onclose事件三个特有属性
     //event.wasClean（boolean值，表示是否已经关闭） 
     // event.code（服务器返回的数值状态码） 
     // event.reason (服务器返回的消息)
 }