ホームページ > 記事 > ウェブフロントエンド > ネイティブ JS は、ajax および ajax クロスドメインリクエストを実装します。

ネイティブ JS は、ajax および ajax クロスドメインリクエストを実装します。

小云云オリジナル: 2018-01-05 10:39:502696ブラウズ

この記事では主に、ajax と ajax クロスドメインリクエストを実装するネイティブ JS の例を紹介します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

1. ネイティブ JS を使用して ajax を実装します

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

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

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

4 番目の部分: リクエストを送信します。null を送信するためにデータを渡さずにオブジェクトと文字列を送信できます

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

ステップ 6: を使用しますレスポンスデータを受け取り、Native JSを使用してDOMを操作して表示するresponseTextとresponseXML

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

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

1. バックエンド PHP 設定:

バックエンドで要求される PHP ファイルにヘッダーを書き込む必要はありません。

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. src属性+JSONPを利用してクロスドメインを実現

① src属性を持つタグにはクロスドメイン機能が付いています！そのため、script タグの src 属性を使用して、バックグラウンドデータをリクエストできます

header("Access-Control-Allow-Origin:*");//表示允许哪些域名请求这个PHP文件，*表示所有域名都允许

② src は、データのロードに成功した後、ロードされたコンテンツを script タグに直接配置するため、バックグラウンドによって直接返される JSON 文字列は、スクリプトタグ内にあります解析中

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

バックエンドの PHP ファイルは次を返します:

<scriptsrc="http://127.0.0.1/json.php"type="text/javascript"charset="utf-8"></script>

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

echo"callBack({$str})";

3. JQueryのajax実装JSONP

① ajaxリクエストを行う際、dataTypeを「json」に設定します

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

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

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

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

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

ネイティブ JS は、ajax および ajax クロスドメイン リクエストを実装します。

関連記事

ネイティブ JS は、ajax および ajax クロスドメインリクエストを実装します。