JS kapselt dieselbe Domäne, JSONP-domänenübergreifend (mit Code)

Dieses Mal bringe ich Ihnen die JS-Kapselung in derselben Domäne, die domänenübergreifende JSONP-Kapselung (mit Code), die Domänenübergreifende JS-Kapselung und die Vorsichtsmaßnahmen Schauen wir uns das einmal an.

Es verwendet natives JS, um ein Ajax-Plug-In zu kapseln, allgemeine Projekte einzuführen und Daten zu übertragen. Es fühlt sich machbar an. . . Lassen Sie mich kurz auf die Idee eingehen. Bitte korrigieren Sie mich^_^

1. Ajax-Kern, Erstellen von XHR-Objekten

Der Kern von Ajax Die Technologie ist das XMLHttpRequest-Objekt (bezeichnet als MSXML2.XMLHttp.3.0 und MSXML2.XMLHttp.6.0). Daher müssen Sie beim Erstellen eines XHR-Objekts die Kompatibilitätsschrift verwenden:

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. Die Hauptmethodenattribute von XHR

Methode:

open ()-Methode: Akzeptiert 3 Parameter, den Typ der zu sendenden Anfrage, die URL der Anfrage und den booleschen Wert, der angibt, ob sie asynchron gesendet werden soll

send()-Methode: die Daten, die als gesendet werden sollen Anfragetext: Wenn keine Daten über den Anfragetext gesendet werden müssen, müssen Sie die Methode null

abort() übergeben: Wird vor dem Empfang der Antwort aufgerufen, um die asynchrone Anfrage abzubrechen.

Attribute:

responseText: Der als Antworttext zurückgegebene Text.

status: HTTP-Status der Antwort

statusText: HTTP-Statusbeschreibung

readyState: Zeigt die aktuell aktive Phase des Anfrage-/Antwortprozesses an

Der Werte sind jeweils:

0: Nicht initialisiert. Die open()-Methode wurde noch nicht aufgerufen

1: Start. Die open()-Methode wurde aufgerufen, aber die send()-Methode wurde noch nicht aufgerufen

2: Senden. Die send()-Methode wurde aufgerufen, aber es wurde keine Antwort empfangen.

3: Empfangen. Es wurden teilweise Antwortdaten empfangen

4: Vollständig. Alle Antwortdaten wurden empfangen und können auf dem Client verwendet werden.

Die Ereignisbehandlungsfunktion onreadystatechange in diesem Beispiel:

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);
 }
 }
 }
}

Hinweis: Der Ereignishandler onreadystatechange muss vor dem Aufruf der open()-Methode angegeben werden, um browserübergreifende Kompatibilität sicherzustellen .

3. Senden Sie eine Anfrage in derselben Domäne

①GET-Anfrage

Der häufigste Anfragetyp, der häufig zum Abfragen bestimmter Informationen verwendet wird. Informationen werden an den Server gesendet, indem die Zeichenfolgenparameter der Abfrage an das Ende der URL angehängt werden. Bei Get-Methodenanforderungen ist zu beachten, dass jeder Parametername und -wert in der Abfragezeichenfolge mit encodeURIComponent() codiert werden muss und alle Name-Wert-Paare durch ein kaufmännisches Und-Zeichen getrennt werden müssen.

Anfragemethode:

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);
}

②POST-Anfrage

wird normalerweise zum Senden von Daten verwendet, die auf dem Server gespeichert werden sollen. POST-Anfragen sollten die Daten als Hauptteil der Anfrage übermitteln . Dadurch wird eine Formularübermittlung simuliert. Das heißt, setzen Sie die Content-Type-Header-Informationen auf application/x-www-form-urlencoded;

Serialisierungsfunktion:

 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);
 }

Anfragemethode:

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));
}

Einige Unterschiede zwischen den beiden Anfragen:

①GET-Anfrage schreibt Parameterdaten in die URL. Es kann in der URL sichtbar, aber nicht in POST, daher ist GET nicht sicher und POST sicherer.

②Die von GET übertragene Datenmenge ist gering und darf nicht größer als 2 KB sein. Die von POST übertragene Datenmenge ist relativ groß und grundsätzlich unbegrenzt.

③Der GET-Server verwendet Request.QueryString, um den Wert der Variablen abzurufen, und der POST-Server verwendet Request.From, um ihn abzurufen.

④GET fügt der URL Daten hinzu, die an den Server übergeben werden sollen, normalerweise unter Verwendung eines ? , jeder Datenparameter in den folgenden Parametern erscheint in der Form „Name=Wert“, und die Parameter werden durch einen Konnektor & unterschieden. POST-Daten werden im HTTP-Körper platziert und auf verschiedene Weise organisiert, einschließlich &-Links und Trennzeichen. Sie können Parameter ausblenden und große Datenmengen übertragen, was bequemer ist.

4. Senden Sie eine domänenübergreifende JSONP-Anfrage

Wie ist zunächst die domänenübergreifende Situation?

Die Zusammensetzung eines Domainnamens:

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设置文字框获取焦点样式（附代码）

Das obige ist der detaillierte Inhalt vonJS kapselt dieselbe Domäne, JSONP-domänenübergreifend (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!