详细解答自定义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跨域：

什么是跨域？

如果两个站点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){
    ......
  }
})

登录后复制

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

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

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

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

以上是详细解答自定义ajax支持跨域组件封装的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7686

Java教程

1639

CakePHP 教程

1393

Laravel 教程

1287

PHP教程

1229

显示更多

Related knowledge

如何在Netflix中快速设置自定义头像 Feb 19, 2024 pm 06:33 PM

Netflix上的头像是你流媒体身份的可视化代表。用户可以超越默认的头像来展示自己的个性。继续阅读这篇文章，了解如何在Netflix应用程序中设置自定义个人资料图片。如何在Netflix中快速设置自定义头像在Netflix中，没有内置功能来设置个人资料图片。不过，您可以通过在浏览器上安装Netflix扩展来实现此目的。首先，在浏览器上安装Netflix扩展的自定义个人资料图片。你可以在Chrome商店买到它。安装扩展后，在浏览器上打开Netflix并登录您的帐户。导航至右上角的个人资料，然后单击

Eclipse中自定义快捷键设置的方法 Jan 28, 2024 am 10:01 AM

如何在Eclipse中自定义快捷键设置？作为一名开发人员，在使用Eclipse进行编码时，熟练掌握快捷键是提高效率的关键之一。Eclipse作为一款强大的集成开发环境，不仅提供了许多默认的快捷键，还允许用户根据自己的偏好进行个性化的定制。本文将介绍如何在Eclipse中自定义快捷键设置，并给出具体的代码示例。打开Eclipse首先，打开Eclipse，并进入

解决jQuery AJAX请求遇到403错误的方法 Feb 20, 2024 am 10:07 AM

标题：解决jQueryAJAX请求出现403错误的方法及代码示例403错误是指服务器禁止访问资源的请求，通常会导致出现这个错误的原因是请求缺少权限或者被服务器拒绝。在进行jQueryAJAX请求时，有时候会遇到这种情况，本文将介绍如何解决这个问题，并提供代码示例。解决方法：检查权限：首先要确保请求的URL地址是正确的，同时验证是否有足够的权限来访问该资

edius自定义屏幕布局的操作流程 Mar 27, 2024 pm 06:50 PM

1、下图是edius默认的屏幕布局，默认的EDIUS窗口布局是横向版式，因此在单显示器环境中，许多窗口是重叠在一起的，且预览窗口为单窗口模式。2、您可以通过【视图】菜单栏启用【双窗口模式】，使预览窗口同时显示播放窗口和录制窗口。3、您可以通过【视图菜单栏>窗口布局>常规】来恢复默认屏幕布局。另外您还可以自定义适合您的布局方式，并保存为常用屏幕布局：将窗口拖动成适合自己的布局，然后点击【视图>窗口布局>保存当前布局>新建】，在弹出的【保存当前布局】小窗口中输入布局名称，单击确定

解决jQuery AJAX请求403错误的方法 Feb 19, 2024 pm 05:55 PM

jQuery是一个流行的JavaScript库，用于简化客户端端的开发。而AJAX则是在不重新加载整个网页的情况下，通过发送异步请求和与服务器交互的技术。然而在使用jQuery进行AJAX请求时，有时会遇到403错误。403错误通常是服务器禁止访问的错误，可能是由于安全策略或权限问题导致的。在本文中，我们将讨论如何解决jQueryAJAX请求遭遇403错误

PyCharm社区版支持的插件足够吗？ Feb 20, 2024 pm 04:42 PM

PyCharm社区版支持的插件足够吗？需要具体代码示例随着Python语言在软件开发领域的应用越来越广泛，PyCharm作为一款专业的Python集成开发环境（IDE），备受开发者青睐。PyCharm分为专业版和社区版两个版本，其中社区版是免费提供的，但其插件支持相对专业版有所限制。那么问题来了，PyCharm社区版支持的插件足够吗？本文将通过具体的代码示例

优缺点分析：深入了解开源软件的利弊 Feb 23, 2024 pm 11:00 PM

开源软件的利与弊：了解开源项目的优劣势，需要具体代码示例在当今数字化时代，开源软件越来越受到关注和推崇。作为一种基于合作和分享精神的软件开发模式，开源软件在不同领域都有着广泛的应用。然而，尽管开源软件具有诸多优势，但也存在一些挑战和限制。本文将深入探讨开源软件的利与弊，并通过具体的代码示例展示开源项目的优劣势。一、开源软件的优势1.1开放性和透明性开源软件