詳細解答自訂ajax支援跨域元件封裝
- 亚连原創
- 2018-05-22 09:27:301121瀏覽
本篇文章給大家詳細分析了自訂ajax支援跨域元件封裝相關的知識點，對此有興趣的朋友參考學習下。
Class.create()分析
仿prototype建立類別繼承
var Class = {
create: function () {
var c = function () {
this.request.apply(this, arguments);
}
for (var i = 0, il = arguments.length, it; i < il; i++) {
it = arguments[i];
if (it == null) continue;
Object.extend(c.prototype, it);
}
return c;
}
};
Object.extend = function (tObj, sObj) {
for (var o in sObj) {
tObj[o] = sObj[o];
}
return tObj;
};ajax定義：ZIP_Ajax=Class.create ();
其中create方法回傳的是建構函數request，這裡相當於var ZIP_Ajax= function(){ this.request.apply(this, arguments); }; 用物件冒充的方式在函數內部執行了一次建構的過程，相當於把建構子任務交給了request方法，這裡的this.request是ZIP_Ajax的實例的方法，而this指向的就是ZIP_Ajax的實例，apply後面的this指向的是ZIP_Ajax，最後根據new關鍵字將this才真正指向ZIP_Ajax類別。有了類別ZIP_Ajax的定義，接下來就可以定義其方法：
XMLHttpRequest詳解：
XMLHttpRequest不是一項技術而是一個內建在主流瀏覽器內的一個可以完全存取http協定的物件。傳統的http請求大部分都是基於form提交請求http，然後回傳一個form。 XMLHttpRequest支援同步請求的同時最大的優點就是支援非同步傳輸接受數據，新建一個ajax請求實際上就是實例化一個XMLHttpRequest物件。簡單介紹一下主要事件及方法：
readystatechange事件：
當XMLHttpRequest發送http請求之後就會激發一個readystatechange事件，事件回傳有五個值， 0,1,2分別代表創建XMLHttpRequest、初始化完成XMLHttpRequest、發送了請求，3代表回應沒結束（即只接收到回應頭資料）4才是真正獲得完整回應。
傳回的status狀態表示伺服器傳回的狀態碼：
常用的有200表示成功回傳數據，301永久重定向，302為暫時重定向（不安全）304讀取的快取資料400表示請求出現語法錯誤，403表示伺服器拒絕請求，404表示請求網頁資源不存在，405找不到指定位置伺服器，408表示請求逾時，500伺服器內部錯誤，505表示伺服器不支援請求的http協議版本。
200-300表示成功，300-400表示重定向，400-500表示請求內容或格式或請求體過大導致錯誤，500 表示伺服器內部錯誤
open方法：
open接收三個參數分別是請求類型（get,post,head等）、url、同步或非同步
send方法：
當請求就緒後會觸發send方法，發送的內容就是請求的資料（如果是get請求則參數為null；
請求成功之後會執行success自訂方法，其參數為傳回資料；
ajax跨網域：
什麼是跨網域？ .com請求資料就出現了因為網域不一致導致的跨域問題。 window.location.protocol window.location.host來判斷例如http://www.baidu.com.
js解決跨域問題幾種方案？ .domain iframe
對於主域相同而子域不同的請求可以使用域名iframe作為解決辦法。 .html以及hi.a.com/b.html,我們可以在兩個html檔案中加上document.domain="a.com",之後透過在a檔案中建立一個iframe去控制iframe的contentDocument，這樣兩個檔案就可以對話了。 html檔案中
document.domain="a.com";問題：1、安全性，當一個網站（hi.a.com）被攻擊之後，另一個網站（www.a.com）會造成安全漏洞。 #2、動態創建script（傳說中jsonp方式）瀏覽器預設禁止跨網域訪問，但不禁止在頁面中引用其他網域的js文件，並且可以執行引入js檔案中的方法等，根據這點我們可以透過建立script節點方法來實現完全跨域的通訊。實作步驟為：
a.在請求發起方頁面動態載入一個script，script的url指向接收方的後台，該位址傳回的javascript方法會被發起方執行，url可以傳參並僅支持get提交參數。
b.載入script腳本時候呼叫跨域的js方法進行回呼處理(jsonp)。
舉例如下：
發起方document.domain="a.com";
var selfFrame=document.createElement("iframe");
selfFrame.src="http://hi.a.com/b.html";
selfFrame.style.display="none";
document.body.appendChild(selfFrame);
selfFrame.onload=function(){
var doc=selfFrame.contentDocument||selfFrame.contentWindow.document;//得到操作b.html权限
alert(doc.getElementById("ok_b").innerHTML());//具体操作b文件中元素
}接收方：
接收方只需要傳回執行函數，執行函數就是請求中的callback並賦參數。
3、使用html5的postMessage：html5新功能有一个就是跨文档消息传输，如今大部分浏览器都已经支持并使用(包括ie8+)，其支持基于web的实时消息传递并且不存在跨域问题。postMessage一般会跟iframe一起使用。
举例如下：
父页面：
<iframe id="myPost" src="http//www.a.com/main.html"></iframe>
window.onload=function(){
document.getElementById("myPost").contentWindow.postMessage("显示我","http://www.a.com")
//第二个参数表示确保数据发送给适合域名的文档
}
a.com/main.html页面：
window.addEventListener("message",function(event){
if(event.origin.indexOf("a.com")>-1){
document.getElementById("textArea").innerHTML=event.data;
}
},false)
<body>
<p>
<span id="textArea"></span>
</p>
</body>这样在父页面加载完成后main.html页面的textArea部分就会显示"显示我"三个字
ajax方法封装code：
ZIP_Ajax.prototype={
request:function(url options){
this.options=options;
if(options.method=="jsonp"){//跨域请求
return this.jsonp();
}
var httpRequest=this.http();
options=Object.extend({method: 'get',
async: true},options||{});
if(options.method=="get"){
url+=(url.indexOf('?')==-1?'?':'&')+options.data;
options.data=null;
}
httpRequest.open(options.method,url,options.async);
if (options.method == 'post') {
httpRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=UTF-8');
}
httpRequest.onreadystatechange = this._onStateChange.bind(this, httpRequest, url, options);
httpRequest.send(options.data || null);//get请求情况下data为null
return httpRequest;
},
jsonp:function(){
jsonp_str = 'jsonp_' + new Date().getTime();
eval(jsonp_str + ' = ' + this.options.callback + ';');
this.options.url += '?callback=' + jsonp_str;
for(var i in this.options.data) {
this.options.url += '&' + i + '=' + this.options.data[i];
}
var doc_head = document.getElementsByTagName("head")[0],
doc_js = document.createElement("script"),
doc_js.src = this.options.url;
doc_js.onload = doc_js.onreadystatechange = function(){
if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete"){
//清除JS
doc_head.removeChild(doc_js);
}
}
doc_head.appendChild(doc_js);
},
http:function(){//判断是否支持xmlHttp
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}
else{
try{
return new ActiveXObject('Msxml2.XMLHTTP')
}
catch(e){
try {
return new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {
return false;
}
}
}
},
_onStateChange:function(http,url,options){
if(http.readyState==4){
http.onreadystatechange=function(){};//重置事件为空
var s=http.status;
if(typeof(s)=='number'&&s>200&&s<300){
if(typeof(options.success)!='function')return;
var format=http;
if(typeof(options.format)=='string'){//判断请求数据格式
switch(options.format){
case 'text':
format=http.responseText;
break;
case 'json':
try{
format=eval('('+http.responseText+')');
}
catch (e) {
if (window.console && console.error) console.error(e);
}
break;
case 'xml':
format=http.responseXML;
break;
}
}
options.success(format);//成功回调
}
else {//请求出问题后处理
if (window.closed) return;
if (typeof (options.failure) == 'function') {
var error = {
status: http.status,
statusText: http.statusText
}
// 判断是否是网络断线或者根本就请求不到服务器
if (http.readyState == 4 && (http.status == 0 || http.status == 12030)) {
// 是
error.status = -1;
}
options.failure(error);
}
}
}
}
};使用方法：
ajax调用举例：
var myAjax=new ZIP_Ajax("http://www.a.com/you.php",{
method:"get",
data:"key=123456&name=yuchao",
format:"json",
success:function(data){
......
}
})
跨域请求调用举例：
var jsonp=new ZIP_Ajax("http://www.a.com/you.php",{
method:"jsonp",
data:{key:"123456",name:"yuchao"},
callback:function(data){
......
}
})上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
MUi框架ajax请求WebService接口实例_AJAX相关
以上是詳細解答自訂ajax支援跨域元件封裝的詳細內容。更多資訊請關注PHP中文網其他相關文章！