本文主要給大家詳細分析了自訂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跨域:
什麼是跨域? www.a.com想向www.b.com請求資料就出現了因為網域不一致導致的跨域問題。了)。方案?網域下的不同ab檔www.a.com/a.html
以及hi.a.com/b.html,我們可以在兩個html檔中加入document.domain=" a.com",之後透過在a檔案中建立一個iframe去控制iframe的contentDocument,這樣兩個檔案就可以對話了。舉例如下:
www.a.com上的a. html檔案中
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文件中元素 }
#document.domain="a.com";
##問題:
1、安全性,當一個網站(hi.a.com)被攻擊後,另一個網站(www.a.com)會引起安全漏洞。個iframe,要能夠操作所有iframe,必須都得設定相同domain。 ,但不禁止在頁面中引用其他網域的js文件,並且可以執行引入js文件中的方法等,根據這點我們可以透過創建script節點方法來實現完全跨域的通訊。實作步驟為:
a.在請求發起方頁面動態載入一個script,script的url指向接收方的後台,該位址傳回的javascript方法會被發起方執行,url可以傳參並僅支援get提交參數。
b.載入script腳本時候呼叫跨域的js方法進行回呼處理(jsonp)。
舉例如下:
發起方
function uploadScript(options){ var head=document.getElementsByTagName("head")[0]; var script=document.createElement("script"); script.type="text/javasctipt"; options.src += '?callback=' + options.callback; script.src=options.src; head.insertBefore(script,head.firstChild); } function callback(data){} window.onload=function(){//调用 uploadScript({src:"http://e.com/xxx/main.ashx",callback:callback}) }
接收方:
接收方只需要傳回執行函數,該執行函數就是請求中的callback並賦參數。
3、使用html5的postMessage:
举例如下:
父页面:
<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){ ...... } })
相关推荐:
JS组件系列--组件封装深入:使用jquery data()和html 5 data-*属性初始化组件_html/css_WEB-ITnose
以上是自訂ajax支援跨域組件封裝詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!