詳細解答自訂ajax支援跨域元件封裝-js教程-PHP中文網

首頁

web前端

js教程

詳細解答自訂ajax支援跨域元件封裝

亚连

May 22, 2018 am 09:27 AM

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跨網域：

什麼是跨網域？ .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: &#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){
    ......
  }
})

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

MUi框架ajax请求WebService接口实例_AJAX相关

Struts2和Ajax数据交互（图文教程）

原生ajax写的上拉加载实例（图文教程）

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

陳述

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

Scrapy基于Ajax异步加载实现方法Jun 22, 2023 pm 11:09 PM

Scrapy是一个开源的Python爬虫框架，它可以快速高效地从网站上获取数据。然而，很多网站采用了Ajax异步加载技术，使得Scrapy无法直接获取数据。本文将介绍基于Ajax异步加载的Scrapy实现方法。一、Ajax异步加载原理Ajax异步加载：在传统的页面加载方式中，浏览器发送请求到服务器后，必须等待服务器返回响应并将页面全部加载完毕才能进行下一步操

如何使用CakePHP中的AJAX？Jun 04, 2023 pm 08:01 PM

作为一种基于MVC模式的PHP框架，CakePHP已成为许多Web开发人员的首选。它的结构简单，易于扩展，而其中的AJAX技术更是让开发变得更加高效。在本文中，将介绍如何使用CakePHP中的AJAX。什么是AJAX?在介绍如何在CakePHP中使用AJAX之前，我们先来了解一下什么是AJAX。AJAX是“异步JavaScript和XML”的缩写，是指一种在

jquery ajax报错403怎么办Nov 30, 2022 am 10:09 AM

jquery ajax报错403是因为前端和服务器的域名不同而触发了防盗链机制，其解决办法：1、打开相应的代码文件；2、通过“public CorsFilter corsFilter() {...}”方法设置允许的域即可。

ajax传递中文乱码怎么办Nov 15, 2023 am 10:42 AM

ajax传递中文乱码的解决办法：1、设置统一的编码方式；2、服务器端编码；3、客户端解码；4、设置HTTP响应头；5、使用JSON格式。详细介绍：1、设置统一的编码方式，确保服务器端和客户端使用相同的编码方式，通常情况下，UTF-8是一种常用的编码方式，因为它可以支持多种语言和字符集；2、服务器端编码，在服务器端，确保将中文数据以正确的编码方式进行编码，再传递给客户端等等。

Nginx中404页面怎么配置及AJAX请求返回404页面May 26, 2023 pm 09:47 PM

404页面基础配置404错误是www网站访问容易出现的错误。最常见的出错提示：404notfound。404错误页的设置对网站seo有很大的影响，而设置不当，比如直接转跳主页等，会被搜索引擎降权拔毛。404页面的目的应该是告诉用户：你所请求的页面是不存在的，同时引导用户浏览网站其他页面而不是关掉窗口离去。搜索引擎通过http状态码来识别网页的状态。当搜索引擎获得了一个错误链接时，网站应该返回404状态码，告诉搜索引擎放弃对该链接的索引。而如果返回200或302状态码，搜索引擎就会为该链接建立索引

什么是ajax重构Jul 01, 2022 pm 05:12 PM

ajax重构指的是在不改变软件现有功能的基础上，通过调整程序代码改善软件的质量、性能，使其程序的设计模式和架构更合理，提高软件的扩展性和维护性；Ajax的实现主要依赖于XMLHttpRequest对象，由于该对象的实例在处理事件完成后就会被销毁，所以在需要调用它的时候就要重新构建。

在Laravel中如何通过Ajax请求传递CSRF令牌？Sep 10, 2023 pm 03:09 PM

CSRF代表跨站请求伪造。CSRF是未经授权的用户冒充授权执行的恶意活动。Laravel通过为每个活动用户会话生成csrf令牌来保护此类恶意活动。令牌存储在用户的会话中。如果会话发生变化，它总是会重新生成，因此每个会话都会验证令牌，以确保授权用户正在执行任何任务。以下是访问csrf_token的示例。生成csrf令牌您可以通过两种方式获取令牌。通过使用$request→session()→token()直接使用csrf_token()方法示例<?phpnamespaceApp\Http\C

使用HTML5文件上传与AJAX和jQuerySep 13, 2023 am 10:09 AM

当提交表单时，捕获提交过程并尝试运行以下代码片段来上传文件-//File1varmyFile=document.getElementById('fileBox').files[0];varreader=newFileReader();reader.readAsText(file,'UTF-8');reader.onload=myFunc;functionmyFunc(event){  varres

See all articles