简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Emballage de composants inter-domaines ajax personnalisé

Emballage de composants inter-domaines ajax personnalisé

php中世界最好的语言
php中世界最好的语言original
2018-04-12 17:36:241607parcourir

Cette fois, je vais vous présenter l'encapsulation personnalisée de composants inter-domaines ajax. Quelles sont les précautions lors de l'utilisation de l'encapsulation personnalisée de composants inter-domaines ajax. Voici des cas pratiques, jetons un coup d'œil.

Analyse Class.create()

Créer un héritage de classe en imitant un 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;
};

définition ajax : ZIP_Ajax=Class.create();

La méthode create renvoie une requête constructeur , qui équivaut à var ZIP_Ajax= function(){ this.request.apply(this, arguments); Utiliser l'usurpation d'identité d'objet pour effectuer un processus de construction à l'intérieur de la fonction équivaut à confier la tâche de constructeur à la méthode de requête. Ici, this.request est la méthode de l'instance ZIP_Ajax, et cela pointe vers l'instance ZIP_Ajax. Après application, cela pointe vers ZIP_Ajax. , et enfin, cela pointe en fait vers la classe ZIP_Ajax basée sur le nouveau mot-clé. Avec la définition de la classe ZIP_Ajax, vous pouvez alors définir ses méthodes :

Explication détaillée de XMLHttpRequest :

XMLHttpRequest n'est pas une technologie mais un objet intégré aux navigateurs grand public pouvant accéder pleinement au protocole http. La plupart des requêtes http traditionnelles sont basées sur la soumission d'un formulaire et demandent http, puis renvoient un formulaire. Bien que XMLHttpRequest prenne en charge les requêtes synchrones, le plus grand avantage est qu'il prend en charge la transmission asynchrone pour recevoir des données. La création d'une nouvelle requête ajax revient en fait à instancier un objet XMLHttpRequest. Présentez brièvement les principaux événements et méthodes :

événement readystatechange :

Lorsque XMLHttpRequest envoie une requête http, un événement readystatechange sera déclenché. L'événement renvoie cinq valeurs 0, 1 et 2 représentant respectivement la création de XMLHttpRequest, l'achèvement de l'initialisation de XMLHttpRequest et l'envoi de la requête. n'est pas terminé (c'est-à-dire que seules les données d'en-tête ont été reçues) 4 est le véritable moyen d'obtenir une réponse complète.

Le statut renvoyé indique le code de statut renvoyé par le serveur :

Ceux couramment utilisés incluent 200 indiquant un retour réussi des données, 301 une redirection permanente, 302 indiquant une redirection temporaire (dangereuse), 304 lisant données mises en cache , 400 indiquant une erreur de syntaxe dans la requête et 403 indiquant que le serveur rejette la demande. 404 indique que la ressource Web demandée n'existe pas, 405 ne peut pas trouver le serveur à l'emplacement spécifié, 408 indique que la demande a expiré, 500 une erreur de serveur interne et 505 indique que le serveur existe. ne prend pas en charge la version du protocole http demandée.

200-300 indique un succès, 300-400 indique une redirection, 400-500 indique que le contenu ou le format de la requête ou le corps de la requête est trop volumineux, provoquant une erreur, et 500+ indique une erreur interne du serveur

méthode ouverte :

open reçoit trois paramètres : type de requête (get, post, head, etc.), url, synchrone ou asynchrone

méthode d'envoi :

Lorsque la requête est prête, la méthode d'envoi sera déclenchée et le contenu envoyé sera les données demandées (s'il s'agit d'une requête get, le paramètre est nul ;

Une fois la requête réussie, la méthode personnalisée success sera exécutée et son paramètre sera les données de retour

 ; inter-domaine ajax :

Qu’est-ce que le cross-domaine ?

Si deux sites www.a.com souhaitent demander des données à www.b.com, il y aura un problème inter-domaines causé par des noms de domaine incohérents. Même si le nom de domaine est le même, si les ports sont différents, il y aura des problèmes entre domaines (pour cette raison, js ne peut que s'asseoir et regarder). Pour déterminer s'il s'agit d'un inter-domaine, utilisez simplement window.location.protocol+window.location.host pour déterminer s'il s'agit d'un inter-domaine. Par exemple, http://www.baidu.com.

. Quelles sont les différentes façons de résoudre les problèmes inter-domaines avec js ?

1. document.domaine+iframe

Pour les requêtes avec le même domaine principal mais des sous-domaines différents, le nom de domaine + iframe peut être utilisé comme solution. L'idée spécifique est que s'il existe deux fichiers ab différents sous deux noms de domaine www.a.com/a.html

En plus de hi.a.com/b.html, nous pouvons ajouter document.domain="a.com" aux deux fichiers html, puis créer une iframe dans le fichier a pour contrôler le contentDocument de l'iframe, de sorte que les deux fichiers Vous pouvez avoir une conversation. Par exemple : 

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文件中元素
  }

dans un fichier.html sur www.a.com

dans le fichier b.html sur hi.a.com document.domain="a.com";

Question :

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: '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){
    ......
  }
})

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

推荐阅读：

express搭建查询服务器的方法

Django的cookie使用详解

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment créer un serveur de requêtes en expressArticle suivant：Comment créer un serveur de requêtes en express

Articles Liés

Voir plus