自訂ajax支援跨域元件（詳細教學）-js教程-PHP中文網

首頁

web前端

js教程

自訂ajax支援跨域元件（詳細教學）

亚连

Jun 06, 2018 pm 05:28 PM

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 < 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請求資料就出現了因為域名不一致導致的跨域問題。即使是域名相同，如果端口不同的話也是會存在跨域問題（這種原因js是只能袖手旁觀了）。判斷是否跨域僅僅是通過window.location.protocol window.location.host來判斷例如http://www.baidu.com.

js解決跨域問題幾種方案？

##1、document .domain iframe

對於主域相同而子域不同的請求可以使用域名iframe作為解決辦法。具體思想是假如有兩個域名下的不同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文件中元素
  }

登入後複製

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 += &#39;?callback=&#39; + 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 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: &#39;get&#39;,
      async: true},options||{});
    
    if(options.method=="get"){
      url+=(url.indexOf(&#39;?&#39;)==-1?&#39;?&#39;:&#39;&&#39;)+options.data;
      options.data=null;
    }
    httpRequest.open(options.method,url,options.async);
    if (options.method == &#39;post&#39;) {
      httpRequest.setRequestHeader(&#39;Content-type&#39;, &#39;application/x-www-form-urlencoded; charset=UTF-8&#39;);
    }
    httpRequest.onreadystatechange = this._onStateChange.bind(this, httpRequest, url, options);
    httpRequest.send(options.data || null);//get请求情况下data为null
    return httpRequest;
  },
  jsonp:function(){
    jsonp_str = &#39;jsonp_&#39; + new Date().getTime();
    eval(jsonp_str + &#39; = &#39; + this.options.callback + &#39;;&#39;);    
    this.options.url += &#39;?callback=&#39; + jsonp_str;
    for(var i in this.options.data) {
      this.options.url += &#39;&&#39; + i + &#39;=&#39; + 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(&#39;Msxml2.XMLHTTP&#39;)
      }
      catch(e){
        try {
          return new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);
        } catch (e) {
          return false;
        }
      }
    }
  },
  _onStateChange:function(http,url,options){
    if(http.readyState==4){
      http.onreadystatechange=function(){};//重置事件为空
      var s=http.status;
      if(typeof(s)==&#39;number&#39;&&s>200&&s<300){
        if(typeof(options.success)!=&#39;function&#39;)return;
        var format=http;
        if(typeof(options.format)==&#39;string&#39;){//判断请求数据格式
          switch(options.format){
            case &#39;text&#39;:
              format=http.responseText;
              break;
            case &#39;json&#39;:
              try{
                format=eval(&#39;(&#39;+http.responseText+&#39;)&#39;);
              }
              catch (e) {
                if (window.console && console.error) console.error(e);
              }
              break;
            case &#39;xml&#39;:
              format=http.responseXML;
              break;
          }
        }
      options.success(format);//成功回调
      }
      else {//请求出问题后处理
        if (window.closed) return;
        if (typeof (options.failure) == &#39;function&#39;) {
          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){
    ......
  }
})

登入後複製

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vue中如何实现微信分享朋友圈,发送朋友

详解如何实现vuex（详细教程）

通过vue.js实现微信支付
以上是自訂ajax支援跨域元件（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

顯示更多

熱門文章

R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

刺客信條陰影：貝殼謎語解決方案
2 週前 By DDD

R.E.P.O.如果您聽不到任何人，如何修復音頻
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.聊天命令以及如何使用它們
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

顯示更多

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡

7545

15

CakePHP 教程

1381

52

steam的賬戶名稱是什麼格式

83

11

win11激活密鑰永久

55

19

NYT連接提示和答案

21

87

顯示更多

Related knowledge

解決jQuery AJAX請求遇到403錯誤的方法 Feb 20, 2024 am 10:07 AM
標題：解決jQueryAJAX請求出現403錯誤的方法及程式碼範例403錯誤是指伺服器禁止存取資源的請求，通常會導致出現這個錯誤的原因是請求缺少權限或被伺服器拒絕。在進行jQueryAJAX請求時，有時會遇到這種情況，本文將介紹如何解決這個問題，並提供程式碼範例。解決方法：檢查權限：首先要確保請求的URL位址是正確的，同時驗證是否有足夠的權限來存取該資

 解決jQuery AJAX請求403錯誤的方法 Feb 19, 2024 pm 05:55 PM
jQuery是一個受歡迎的JavaScript函式庫，用來簡化客戶端端的開發。而AJAX則是在不重新載入整個網頁的情況下，透過發送非同步請求和與伺服器互動的技術。然而在使用jQuery進行AJAX請求時，有時會遇到403錯誤。 403錯誤通常是伺服器禁止存取的錯誤，可能是由於安全性原則或權限問題導致的。在本文中，我們將討論如何解決jQueryAJAX請求遭遇403錯誤

 如何解決jQuery AJAX報錯403的問題？ Feb 23, 2024 pm 04:27 PM
如何解決jQueryAJAX報錯403的問題？在開發網頁應用程式時，經常會使用jQuery來發送非同步請求。然而，有時在使用jQueryAJAX時可能會遇到錯誤代碼403，表示伺服器禁止存取。這種情況通常是由伺服器端的安全性設定所導致的，但可以透過一些方法來解決這個問題。本文將介紹如何解決jQueryAJAX報錯403的問題，並提供具體的程式碼範例。一、使

 PHP 與 Ajax：建立一個自動完成建議引擎 Jun 02, 2024 pm 08:39 PM
使用PHP和Ajax建置自動完成建議引擎：伺服器端腳本：處理Ajax請求並傳回建議(autocomplete.php)。客戶端腳本：發送Ajax請求並顯示建議(autocomplete.js)。實戰案例：在HTML頁面中包含腳本並指定search-input元素識別碼。

如何使用Ajax從PHP方法取得變數？ Mar 09, 2024 pm 05:36 PM
使用Ajax從PHP方法取得變數是Web開發中常見的場景，透過Ajax可以實作頁面無需刷新即可動態取得資料。在本文中，將介紹如何使用Ajax從PHP方法中取得變量，並提供具體的程式碼範例。首先，我們需要寫一個PHP檔案來處理Ajax請求，並傳回所需的變數。下面是一個簡單的PHP檔案getData.php的範例程式碼：

PHP 與 Ajax：建立動態載入內容的解決方案 Jun 06, 2024 pm 01:12 PM
Ajax（非同步JavaScript和XML）允許在不重新載入頁面情況下新增動態內容。使用PHP和Ajax，您可以動態載入產品清單：HTML建立一個帶有容器元素的頁面，Ajax請求載入資料後將資料加入到該元素中。 JavaScript使用Ajax透過XMLHttpRequest向伺服器傳送請求，從伺服器取得JSON格式的產品資料。 PHP使用MySQL從資料庫查詢產品數據，並將其編碼為JSON格式。 JavaScript解析JSON數據，並將其顯示在頁面容器中。點選按鈕觸發Ajax請求，載入產品清單。

ajax版本有哪些 Nov 22, 2023 pm 02:00 PM
ajax不是一個特定的版本，而是一種使用多種技術的集合來非同步載入和更新網頁內容的技術。 ajax沒有特定的版本號，但是有一些ajax的變體或擴充：1、jQuery AJAX；2、Axios；3、Fetch API；4、JSONP；5、XMLHttpRequest Level 2；6、WebSockets；7、Server-Sent Events；8、GraphQL等等。

PHP 與 Ajax：提升 Ajax 安全性的方法 Jun 01, 2024 am 09:34 AM
為了提升Ajax安全性，有幾種方法：CSRF保護：產生令牌並將其傳送到客戶端，在請求中新增至伺服器端進行驗證。 XSS保護：使用htmlspecialchars()過濾輸入，防止惡意腳本注入。 Content-Security-Policy頭：限制惡意資源加載，指定允許載入腳本和樣式表的來源。驗證伺服器端輸入：驗證從Ajax請求接收的輸入，防止攻擊者利用輸入漏洞。使用安全Ajax函式庫：利用jQuery等函式庫提供的自動CSRF保護模組。

See all articles