JS で ajax および ajax クロスドメイン リクエストを実装する方法

以下のエディターは、ajax と ajax クロスドメイン リクエストを実装するネイティブ JS の例を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。エディターをフォローして一緒に見てみましょう

1. ネイティブ JS で ajax を実装します

最初のステップは XMLHttpRequest オブジェクトを取得することです

2 番目のステップ: ステータス リスニング関数を設定します

3 番目のステップ:接続を開きます。true は非同期リクエストです

パート 4: リクエストを送信します。オブジェクトと文字列を送信できます。null を送信するためにデータを渡す必要はありません

ステップ 5: listen 関数で、readyState=4&&status=200 を判断します。リクエストが成功したことを示します

第6ステップ：responseTextとresponseXMLを使用してレスポンスデータを受け取り、ネイティブ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);

2. Ajaxクロスドメインリクエスト

[Cross -ドメインリクエスト処理] JSの同一オリジンポリシーによる。異なるプロトコル名、異なるポート番号、異なるホスト名を持つファイルをリクエストすると、同一生成元ポリシーに違反し、リクエストは成功しません。クロスドメイン処理が必要です。

1. バックグラウンド PHP 設定: バックグラウンドでリクエストされた PHP ファイルにヘッダーを書き込む必要はありません。

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 は、データのロードに成功した後、ロードされたコンテンツを script タグに直接配置するため、バックグラウンドによって直接返される JSON 文字列は、構文解析

したがって、バックエンドはリターン関数名をフロントエンドに返し、JSON文字列をパラメータとして渡す必要があります

バックエンドPHPファイルのReturn:

echo"callBack({$str})";

③ フロントエンドが返されたreturnを受け取ったとき関数の場合、ラベル内で呼び出されるスクリプトで直接使用されます。したがって、このようなコールバック関数をリクエスト成功時のコールバックとして宣言する必要があります。

function callBack(data){
  alert("请求成功");
  console.log(data);
 }

3. JQuery の ajax 実装 JSONP

① ajax リクエストを行うときは、dataType を「json」に設定します② バックエンドが戻ったときに、やはりコールバック関数を返す必要があります。ただし、Ajax がリクエストを送信するときは、デフォルトで get リクエストを使用して戻り関数名をバックグラウンドに送信します。バックグラウンドは $_GET['callback'] を使用してコールバック関数名を取得できます。バックグラウンドが返される場合でも、Ajax は引き続き Successful コールバック関数として success を使用できます:

echo"{$_GET['callback']}({$str})";

もちろん、バックグラウンドは自由にコールバック関数名を返すこともできます。

success:function(data){}

リクエストが成功すると、フロントデスクが自動的にこの関数を呼び出します。項目2の②③と同様の手順です

以上、皆様のお役に立てれば幸いです。

関連記事:

JavaScriptで非同期画像アップロードを実装する方法

jqueryで隠し要素関数を実装する方法

jQueryで検証フォームのパスワード一貫性を実装する方法

JSでの関連方法配列関数を使用するには

WeChat アプレットでのピッカー コンポーネントの使用方法について

以上がJS で ajax および ajax クロスドメイン リクエストを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。