自訂ajax的跨域元件封裝

這次帶給大家自訂ajax的跨域元件封裝，使用自訂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 <p style="text-align: left;">#
ajax定義：ZIP_Ajax=Class.create();</p><p style="text-align: left;">#
其中create方法回傳的是一個<a href="http://www.php.cn/wiki/176.html" target="_blank">建構子</a>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的定義，接下來可以定義其方法：</p><p style="text-align: left;">#
<strong>XMLHttpRequest詳解：</strong></p><p style="text-align: left;">#
XMLHttpRequest不是一項技術而是一個內建於主流瀏覽器內的一個可以完全存取http協定的物件。傳統的http請求大部分都是基於form提交請求http，然後回傳一個form。 XMLHttpRequest支援同步請求的同時最大的優點就是支援非同步傳輸接受數據，新建一個ajax請求實際上就是實例化一個XMLHttpRequest物件。簡單介紹一下主要事件及方法：</p><p style="text-align: left;">
<strong>readystatechange事件：</strong></p><p style="text-align: left;">
當XMLHttpRequest發送http請求之後就會激發一個readystatechange事件，事件回傳有五個值，0,1,2分別代表建立XMLHttpRequest、初始化完成XMLHttpRequest、發送了請求，3代表回應沒結束（即只接收到回應頭數據）4才是真正獲得完整回應。 </p><p style="text-align: left;">
傳回的status狀態表示伺服器傳回的狀態碼：</p><p style="text-align: left;">
常用的有200表示成功返回數據，301永久重定向，302為臨時重定向（不安全）304讀取的<a href="http://www.php.cn/code/9477.html" target="_blank">緩存數據</a>400表示請求出現<a href="http://www.php.cn/wiki/96.html" target="_blank">語法錯誤</a>，403表示伺服器拒絕請求，404表示請求網頁資源不存在，405找不到指定位置伺服器，408表示請求逾時，500伺服器內部錯誤，505表示伺服器不支援請求的http協定版本。 </p><p style="text-align: left;">
200-300表示成功，300-400表示重定向，400-500表示請求內容或格式或請求體過大導致錯誤，500 表示伺服器內部錯誤</p><p style="text-align: left;">
<strong>open方法：</strong></p><p style="text-align: left;">#
open接收三個參數分別是<a href="http://www.php.cn/php/php-tp-requesttype.html" target="_blank">請求類型</a>（get,post,head等）、url、同步或非同步</p><p style="text-align: left;">
<strong>send方法：</strong></p><p style="text-align: left;">#
當請求就緒後會觸發send方法，而發送的內容就是請求的資料（如果是get請求則參數為null；</p><p style="text-align: left;">
請求成功之後會執行success自訂方法，其參數為傳回資料；</p><p style="text-align: left;">#
<strong>ajax跨域：</strong></p><p style="text-align: left;">#
什麼是跨域？ </p><p style="text-align: left;">
如果兩個網站www.a.com想向www.b.com要求資料就出現了因為網域不一致而導致的跨網域問題。即使是網域相同，如果連接埠不同的話也是會存在跨域問題（這種原因js是只能袖手旁觀了）。判斷是否跨域僅是透過window.location.protocol window.location.host來判斷例如http://www.baidu.com.</p><p style="text-align: left;">
js解決跨域問題幾種方案？ </p><p style="text-align: left;">
<strong>1、document.domain iframe</strong></p><p style="text-align: left;">#
對於主域相同而子域不同的請求可以使用域名 iframe作為解決方案。具體想法是假如有兩個網域下的不同ab檔www.a.com/a.html</p><p style="text-align: left;">
以及hi.a.com/b.html,我們可以在兩個html檔案中加上document.domain="a.com",之後透過在a檔案中建立一個iframe去控制iframe的contentDocument，這樣兩個文件就可以對話了。舉例如下：</p><p style="text-align: left;">
www.a.com上的a.html檔案中</p><pre class="brush:php;toolbar:false">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文件中元素
  }

hi.a.com上的b.html檔案中

document.domain="a.com";

問題：

1、安全性，当一个站点（hi.a.com）被攻击后，另一个站点（www.a.com）会引起安全漏洞。2、如果一个页面中引入多个iframe，要想能够操作所有iframe，必须都得设置相同domain。

2、动态创建script（传说中jsonp方式）

浏览器默认禁止跨域访问，但不禁止在页面中引用其他域名的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：

html5新功能有一个就是跨文档消息传输，如今大部分浏览器都已经支持并使用(包括ie8+)，其支持基于web的实时消息传递并且不存在跨域问题。postMessage一般会跟iframe一起使用。

举例如下：

父页面：

<iframe></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)

  <p>
    <span></span>
  </p>

这样在父页面加载完成后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<p style="text-align: left;">
	<span style="color:#ff0000;">使用方法：</span></p><p style="text-align: left;">
	ajax调用举例：</p><pre class="brush:php;toolbar:false">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){
    ......
  }
})

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

express搭建查询服务器的方法

Django的cookie使用详解

以上是自訂ajax的跨域元件封裝的詳細內容。更多資訊請關注PHP中文網其他相關文章！