元のJSはajaxとajaxのドメイン横断要求の実例を実現します。
一、原生JSがajaxを実現する。
最初のステップはXMLHttpRequestオブジェクトを獲得しました。
第二ステップ:状態モニタ関数の設定
第三ステップ:open一つの接続、trueは非同期要求です。
第四部:send一つの要求は、一つのオブジェクトと文字列を送ることができます。nullはデータを送る必要がありません。
第五ステップ:リスニング関数では、readyState=4&&status=200が要求成功を表していると判断します。
第六ステップ:レスポンスデータをレスポンスText、レスポンスXMLで受け取り、元のJS操作DOMで表示する
[ドメイン間要求処理]JSに同源ポリシーが存在するため。異なるプロトコル名、異なるポート番号、異なるホスト名の下のファイルを要求すると、ソースポリシーに違反します。成功を要求することができません。クロスドメイン処理が必要です。
1、バックグラウンドPHPの設定:
フロントには何の設定も必要ありません。バックグラウンドで要求されたPHPファイルにheaderを書き込みます。
①Src属性を持つラベルにはクロスドメイン機能がついています。したがって、scriptタグのsrc属性を使用してバックグラウンドデータを要求することができます。
したがって、バックグラウンドが直接JSON文字列に戻るとscriptタグでは解析できなくなります。
したがって、バックグラウンドは、フロントに戻り、関数名に戻り、JSON文字列をパラメータとして入力するべきである。
バックグラウンドのPHPファイルから戻ります。
①ajaxリクエスト時に、dataTypeを「json」に設定する
②バックカバーが戻ってきた場合は、依然としてコールバック関数を返す必要があります。しかし、ajaxは要求を送信する時、デフォルトでget要求を使って関数名に戻り、バックグラウンドで$GET['calback']はコールバック関数名を取り出します。
以上のJSはajaxとajaxのドメイン横断要求の実例を実現しました。つまり、小編集は皆さんに提供した内容の全部を共有しました。
最初のステップはXMLHttpRequestオブジェクトを獲得しました。
第二ステップ:状態モニタ関数の設定
第三ステップ:open一つの接続、trueは非同期要求です。
第四部:send一つの要求は、一つのオブジェクトと文字列を送ることができます。nullはデータを送る必要がありません。
第五ステップ:リスニング関数では、readyState=4&&status=200が要求成功を表していると判断します。
第六ステップ:レスポンスデータをレスポンスText、レスポンスXMLで受け取り、元のJS操作DOMで表示する
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function(){
console.log(ajax.readyState);
console.log(ajax.status);
if(ajax.readyState==4 && ajax.status==200){
console.log(ajax.responseText);
console.log(ajax.responseXML);// XML, null
console.log(JSON.parse(ajax.responseText));
console.log(eval("("+ajax.responseText+")"));
}
}
ajax.open("GET","h51701.json",true);
ajax.send(null);
二、ajaxのクロスドメイン要求[ドメイン間要求処理]JSに同源ポリシーが存在するため。異なるプロトコル名、異なるポート番号、異なるホスト名の下のファイルを要求すると、ソースポリシーに違反します。成功を要求することができません。クロスドメイン処理が必要です。
1、バックグラウンドPHPの設定:
フロントには何の設定も必要ありません。バックグラウンドで要求されたPHPファイルにheaderを書き込みます。
header("Access-Control-Allow-Origin:*");// PHP ,*
2、src属性+JSONPを使ってクロスドメインを実現する①Src属性を持つラベルにはクロスドメイン機能がついています。したがって、scriptタグのsrc属性を使用してバックグラウンドデータを要求することができます。
<scriptsrc="http://127.0.0.1/json.php"type="text/javascript"charset="utf-8"></script>
②srcはデータのロードに成功した後、直接にスクリプトラベルにロード内容を入れます。したがって、バックグラウンドが直接JSON文字列に戻るとscriptタグでは解析できなくなります。
したがって、バックグラウンドは、フロントに戻り、関数名に戻り、JSON文字列をパラメータとして入力するべきである。
バックグラウンドのPHPファイルから戻ります。
echo"callBack({$str})";
③戻る戻る関数をフロントで受信したら、直接scriptタグから呼び出します。したがって、このようなコールバック関数を成功を求めるコールバック関数として宣言する必要があります。
function callBack(data){
alert(" ");
console.log(data);
}
3、JQueryのajaxがJSONPを実現します。①ajaxリクエスト時に、dataTypeを「json」に設定する
②バックカバーが戻ってきた場合は、依然としてコールバック関数を返す必要があります。しかし、ajaxは要求を送信する時、デフォルトでget要求を使って関数名に戻り、バックグラウンドで$GET['calback']はコールバック関数名を取り出します。
echo"{$_GET['callback']}({$str})";
③バックグラウンドが戻ったら、ajaxは依然としてsuccessを成功のコールバック関数として使用できます。
success:function(data){}
もちろんバックグラウンドも任意にコールバック関数名を返すことができます。
echo"callBack({$str})";
フロントで成功を求めると、自動的にこの関数を呼び出します。第2条の②③歩に似ています。以上のJSはajaxとajaxのドメイン横断要求の実例を実現しました。つまり、小編集は皆さんに提供した内容の全部を共有しました。