JS encapsule le même domaine, jsonp cross-domain (avec code)

Cette fois, je vais vous proposer l'encapsulation JS dans le même domaine, jsonp cross-domain (avec code), l'encapsulation JS dans le même domaine et jsonp cross-domain. Quelles sont les précautions Ici. sont les cas réels. Jetons un coup d'oeil une fois.

Il utilise JS natif pour encapsuler un plug-in Ajax, présenter des projets généraux et transférer des données. Cela semble réalisable. . . Permettez-moi de parler brièvement de l'idée. S'il y a des erreurs, veuillez me corriger ^_^

1 Noyau Ajax, création d'objets XHR

Le noyau d'Ajax. La technologie est l'objet XMLHttpRequest (appelé MSXML2.XMLHttp.3.0 et MSXML2.XMLHttp.6.0. Par conséquent, lors de la création d'un objet XHR, vous devez utiliser l'écriture de compatibilité :

createXHR:function(){
 if(typeof XMLHttpRequest!='undefined'){
 return new XMLHttpRequest();
 }else if(typeof ActiveXObject!='undefined'){
 if(typeof arguments.callee.activeXString!='string'){
 var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i,len;
 for(i=0,len=versions.length;i<len;i++){
 try{
  new ActiveXObject(versions[i]);
  arguments.callee.activeXString=versions[i];
  break;
 }catch(ex){
 }
 }
 return new ActiveXObject(arguments.callee.activeXString);
 }else{
 throw new Error("No XHR object available.");
 }
}

2. Les principaux attributs de la méthode XHR

 :

Méthode open() : accepte 3 paramètres, le type de requête à envoyer, l'URL de la requête et une valeur booléenne indiquant s'il faut envoyer de manière asynchrone.

Méthode send() : les données à envoyer en tant que le corps de la requête, s'il n'est pas nécessaire de transmettre le corps de la requête. Pour envoyer des données, vous devez transmettre la méthode null

abort() : appelée avant de recevoir la réponse pour annuler la requête asynchrone.

Attributs :

responseText : Le texte renvoyé comme corps de réponse.

status : statut HTTP de la réponse

statusText : description du statut HTTP

readyState : indique l'étape active actuelle du processus de requête/réponse

Le les valeurs​​sont respectivement :

0 : Non initialisé. La méthode open() n'a pas encore été appelée

1 : Démarrer. La méthode open() a été appelée, mais la méthode send() n'a pas encore été appelée

2 : Envoyer. La méthode send() a été appelée, mais aucune réponse n'a été reçue.

3 : Recevoir. Des données de réponse partielles ont été reçues

4 : Complète. Toutes les données de réponse ont été reçues et peuvent être utilisées sur le client.

La fonction de gestion des événements onreadystatechange dans cet exemple :

var complete=function(){
 if(xhr.readyState==4){
 if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
 if(params.success){
  params.success(xhr.responseText);//执行调用ajax时指定的success函数
  }
 }else{
 if(params.fail){
 params.fail();//执行调用ajax时指定的fail函数
 }else{
 throw new Error("Request was unsucessful:"+xhr.status);
 }
 }
 }
}

Remarque : Le gestionnaire d'événements onreadystatechange doit être spécifié avant d'appeler la méthode open() pour garantir une compatibilité croisée. compatibilité du navigateur.

3. Envoyer une requête dans le même domaine

①Requête GET

Le type de requête le plus courant, souvent utilisé pour interroger certaines informations. Les informations sont envoyées au serveur en ajoutant les paramètres de chaîne de la requête à la fin de l'URL. Une chose à noter avec les requêtes de la méthode get est que chaque nom et valeur de paramètre dans la chaîne de requête doivent être codés à l'aide de encodeURIComponent() et que toutes les paires nom-valeur doivent être séparées par une esperluette.

Méthode de requête :

if((this.config.type=="GET")||(this.config.type=="get")){
 for(var item in this.config.data){
 this.config.url=addURLParam(this.config.url,item,this.config.data[item]);//使用encodeURIComponent()进行编码
 }
 xhr.onreadystatechange=complete;
 xhr.open(this.config.type,this.config.url,this.config.async);
 xhr.send(null);
}

②La requête POST

est généralement utilisée pour envoyer des données qui doivent être enregistrées sur le serveur. Les requêtes POST doivent soumettre les données en tant que corps de. la demande. Cela simulera une soumission de formulaire. Autrement dit, définissez les informations d'en-tête Content-Type sur application/x-www-form-urlencoded ;

Fonction de sérialisation :

 function serialize(data){
 var val="";
 var str="";
 for(var item in data){
  str=item+"="+data[item];
  val+=str+'&';
 }
 return val.slice(0,val.length-1);
 }

Méthode de requête :

if(this.config.type=="POST"||this.config.type=="post"){
 xhr.addEventListener('readystatechange',complete);
 xhr.open(this.config.type,this.config.url,this.config.async);
 if(params.contentType){
  this.config.contentType=params.contentType;
  }
 xhr.setRequestHeader("Content-Type",this.config.contentType);
 xhr.send(serialize(this.config.data));
}

Quelques différences entre les deux requêtes :

①La requête GET écrit les données des paramètres Dans le URL, vous pouvez le voir dans l'URL, mais vous ne pouvez pas le voir dans POST, donc GET n'est pas sûr et POST est plus sûr.

②La quantité de données transmises par GET est faible et ne peut pas dépasser 2 Ko. La quantité de données transmises par POST est relativement importante et est généralement illimitée par défaut.

③Le serveur GET utilise Request.QueryString pour obtenir la valeur de la variable, et le serveur POST utilise Request.From pour l'obtenir.

④GET ajoute des données à l'URL à transmettre au serveur, généralement en utilisant un ? , chaque paramètre de données dans les paramètres suivants apparaît sous la forme "nom=valeur", et les paramètres sont distingués par un connecteur &. Les données POST sont placées dans le corps HTTP et sont organisées de plusieurs manières, y compris des liens & et des délimiteurs. Vous pouvez masquer des paramètres et transférer de grandes quantités de données, ce qui est plus pratique.

4. Envoyer une requête cross-domain jsonp

Tout d'abord, quelle est la situation du cross-domain ?

La composition d'un nom de domaine :

http://www .abc.com : 8080/scripts/AjaxPlugin.js

协议       子域名      主域名      端口号     请求资源地址

~当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同于。

~不同域之间互相请求资源，就算作“跨域”。

所有的浏览器都遵守同源策略，这个策略能够保证一个源的动态脚本不能读取或操作其他源的http响应和cookie，这就使浏览器隔离了来自不同源的内容，防止它们互相操作。所谓同源是指协议、域名和端口都一致的情况。浏览器会阻止ajax请求非同源的内容。

JSONP(JSON with Padding) 是一种跨域请求方式。主要原理是利用了script 标签可以跨域请求的特点，由其 src 属性发送请求到服务器，服务器返回 JS 代码，网页端接受响应，然后就直接执行了，这和通过 script 标签引用外部文件的原理是一样的。但是jsonp跨域只支持get请求。

JSONP由两部分组成：回调函数和数据，回调函数一般是由网页端控制，作为参数发往服务器端，服务器端把该函数和数据拼成字符串返回。

jsonp跨域主要需要考虑三个问题：

1、因为 script 标签的 src 属性只在第一次设置的时候起作用，导致 script 标签没法重用，所以每次完成操作之后要移除；

2、JSONP这种请求方式中，参数依旧需要编码；

3、如果不设置超时，就无法得知此次请求是成功还是失败；
由于代码有点长，就放个计时器的代码吧，完整代码见AjaxPlugin

//超时处理
if(params.time){
 scriptTag.timer=setTimeout(function(){
 head.removeChild(scriptTag);
 params.fail&&params.fail({message:"over time"});
 window[cbName]=null;
 },params.time);
}

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

推荐阅读：

jQuery设置键盘切换文本框焦点

JQuery设置文字框获取焦点样式（附代码）

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!