ホームページ >ウェブフロントエンド >jsチュートリアル >JS は同じドメイン、jsonp クロスドメインをカプセル化します (コード付き)

JS は同じドメイン、jsonp クロスドメインをカプセル化します (コード付き)

php中世界最好的语言オリジナル: 2018-04-26 14:41:311743ブラウズ

今回は、同一ドメイン内でのJSカプセル化、jsonpクロスドメイン(コード付き)、同一ドメイン内でのJSカプセル化、jsonpクロスドメインについてのメモをお送りします。実際のケースを見てみましょう。。

AjaxプラグインをネイティブJsでカプセル化し、一般的なプロジェクトを導入し、データを転送します。。。アイデアについて簡単に説明します。間違いがあれば修正してください^_^

1. Ajax コア、XHR オブジェクトを作成します

Ajax テクノロジーのコアは、XMLHttpRequest オブジェクト (XHR と呼ばれます) です。 XHR オブジェクトブラウザーを最初に導入したのは IE5 であり、IE5 の XHR オブジェクトは MSXML ライブラリの ActiveX オブジェクトを通じて実装されているため、IE には 3 つのバージョン (MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、および MSXML2) が存在する可能性があります。 .XMLHttp.6.0 。したがって、XHR オブジェクトを作成するときは、互換性のある記述を使用する必要があります:

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. XHR の主なメソッド属性

メソッド:

open() メソッド: 3 つのパラメータ、送信されるリクエストのタイプを受け入れます。および request の URL、非同期に送信するかどうかのブール値

send() メソッド: リクエスト本文として送信するデータ。リクエスト本文を通じてデータを送信する必要がない場合は、null を渡す必要があります。

abort() メソッド: 応答を受信する前に呼び出されます。非同期リクエストをキャンセルします。

プロパティ:

responseText: 応答本文として返されるテキスト。

status: 応答の HTTP ステータス

statusText: HTTP ステータスの説明

readyState: リクエスト/応答プロセスの現在アクティブな段階を示します

値は次のとおりです:

0: 初期化されていません。 open() メソッドはまだ呼び出されていません

1: 開始します。 open() メソッドは呼び出されていますが、send() メソッドはまだ呼び出されていません

2: 送信。 send() メソッドが呼び出されましたが、応答が受信されませんでした。

3: 受け取ります。部分的な応答データを受信しました

4: 完了。すべての応答データが受信され、クライアントで使用できるようになりました。この例の

Onreadystatechangeイベント処理関数:

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

注: ブラウザ間の互換性を確保するには、open() メソッドを呼び出す前に onreadystatechange イベントハンドラーを指定する必要があります。

3. 同じドメイン内でリクエストを送信する

①GETリクエスト

最も一般的なリクエストタイプで、特定の情報をクエリするためによく使用されます。情報は、クエリの文字列パラメーターを URL の末尾に追加することによってサーバーに送信されます。 get メソッドのリクエストで注意すべき点の 1 つは、クエリ文字列内の各パラメーターの名前と値は encodeURIComponent() を使用してエンコードする必要があり、すべての名前と値のペアをアンパサンドで区切る必要があることです。

リクエストメソッド:

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リクエスト

は通常、サーバーに保存する必要があるデータを送信するために使用され、POSTリクエストはリクエストの本文としてデータを送信する必要があります。これにより、フォームの送信がシミュレートされます。つまり、Content-Type ヘッダー情報を application/x-www-form-urlencoded に設定します。

シリアル化関数:

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

リクエストメソッド:

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

2つのリクエストのいくつかの違い:

①GETリクエストはパラメータデータをURLに書き込みます。これはURLで確認できますが、POSTはできないため、GETは安全ではありません。 POST の方が安全です。

②GETで送信されるデータ量は小さく、2kbを超えることはできません。 POST によって送信されるデータの量は比較的多く、通常はデフォルトでは制限がありません。

③GETサーバー側はRequest.QueryStringを使用して変数の値を取得し、POSTサーバー側はRequest.Fromを使用して変数の値を取得します。

④GET は、通常は ? を利用して、サーバーに渡すデータを URL に追加します。では、次のパラメータの各データパラメータは「名前 = 値」の形式で表示され、パラメータはコネクタ & によって区別されます。 POST データは HTTP 本文に配置され、& リンクや区切り文字など複数の方法で編成されます。パラメータを非表示にして大量のデータを転送できるため、より便利です。

4. JSONP はクロスドメインリクエストを送信します

まず、クロスドメインとはどのような状況でしょうか?

ドメイン名の構成:

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中文网其它相关文章！

JS は同じドメイン、jsonp クロスドメインをカプセル化します (コード付き)

関連記事