Ajax

Ajax

Ajax的核心是XMLHttpRequest对象，使用XHR对象取得新数据，再通过DOM将新数据插入页面中

XHR对象

创建XHR对象——new XMLHttpRequest() || createXHR()

var xhr=new XMLHttpRequest();

var xhr=createXHR();

方法open()——xhr.open()

方法send()——xhr.send()——发送特定的请求

方法abort()——xhr.abort()——取消异步请求

属性readyState

事件处理程序 ——onreadystatechange

响应的HTTP状态——status属性

HTTP状态的说明——statusText属性

作为响应主体被返回的文本——responseText属性

——responseXML属性

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头部信息

设置自定义的请求头部信息——setRequestHeader()

xhr.open("get","example.php",true);
xhr.setRequestHeader("MyHeader","MyValue");
xhr.send(null);

取得相应的头部字段名称——getResponseHeader()

取得一个包含所有头部信息的长字符串——getAllResponseHeaders()

var myHeader=xhr.getResponseHeader("MyHeader");
var allHeaders=xhr.getAllResponseHeaders();

get请求

get请求——常用于向服务器查询某些信息

post请求

post请求——常用于向服务器发送应该被保存的数据

XMLHttpRequest2级

FormData类型

var data=new FormData();
data.append("name","Nicholas");
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("post","postexample.php",true);
var form=document.getElementById("user-info");
xhr.send(new FormData(form));

超时设定

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("post","postexample.php",true);
xhr.timeout=1000; //仅用于IE8
xhr.ontimeout=function(){
    alert("Request did not return in a second");
};
xhr.send(new FormData(form));

重写XHR响应的MIME类型——overrideMimeType()

var xhr=createXHR();
xhr.open("get","text.php",true);
xhr.overrideMimeType("text/xml");
xhr.send(null);

进度事件

事件load——在接收到完整的响应数据时触发

事件progress——在响应接收期间持续不断触发

事件error

事件loadend

事件loadstart

事件abort——终止连接时触发

var xhr=createXHR();
xhr.onrload=function(event){
    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.οnprοgress=function(event){
    var divStatus=document.getElementById("status");
    if(event.lengthComputable){
        divStatus.innerHTML="Received"+event.position+"of"+event.totalSize+"bites";
    }
};
xhr.open("get","altevents.php",true);
xhr.send(null);

跨源资源共享

CORS——使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败

非IE——要请求位于另一域中的资源，使用标准的XHR对象并在open()方法中传入绝对URL即可

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","http://www.somewhere-else.com/page/",true);
xhr.send(null);

IE——引入XDR类型(XDomainRequest)

var xdr=new XDomainRequest();
xdr.οnlοad=function(){
    alert(xdr.responseText);
};
xdr.open("get","http://www.somewhere-else.com/page/");
xdr.send(null);

其它跨域技术

图像Ping

JSONP

转载于:https://my.oschina.net/u/3240534/blog/857256