ホームページ > 記事 > バックエンド開発 > Ajax クロスドメインリクエストの原則の詳細な例

Ajax クロスドメインリクエストの原則の詳細な例

小云云オリジナル: 2018-05-17 16:27:111801ブラウズ

この記事では、主に Ajax のクロスドメインリクエストの原理を詳しく紹介します。Ajax はどのようにしてクロスドメインリクエストを行うのか?これには一定の参考価値がありますので、興味のある方は参考にしていただければ幸いです。

以下に示す 2 つのローカルサイトを構築しましょう

最初のステップは、Apache サーバーをローカルに構築することです。
2 番目のステップは、サーバーの構成後に 2 つの仮想ドメイン名をローカルに構成することです。 C ドライブにフォルダーを作成し、「HTML5」という名前を付けます。 4 番目のステップは、Apache 仮想ホストの構成ファイルを見つけて、その構成ファイルを開きます

Ajax クロスドメインリクエストの原則の詳細な例 5 番目のステップは、HTML5 ファイルを作成することです。 3 番目のステップでは、フォルダー a とフォルダー b をそれぞれ作成します

6 番目のステップは、図に示すように、Apache 仮想ホストの構成ファイルを変更することです

修改Ajax クロスドメインリクエストの原則の詳細な例 7 番目のステップは、ホストファイルを変更することですそして a と b の URL (通常はホスト) を追加します。ファイルパスは C:WindowsSystem32driversetc の下にあります

Ajax クロスドメインリクエストの原則の詳細な例 HTML5/a フォルダーの下に 7.ajax.html ファイルを作成します

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>获取同域下内容</title>
<script>
window.onload = function() {
 var oBtn = document.getElementById(&#39;btn&#39;);
 // 忽略IE6
 oBtn.onclick = function() {
 //创建一个ajax对象
 var xhr = new XMLHttpRequest();
 //监听事件
 xhr.onreadystatechange = function() {
 if (xhr.readyState == 4) {
 if (xhr.status == 200) {
 alert(xhr.responseText);
 }
 }
 }
 xhr.open(&#39;get&#39;, &#39;Ajax クロスドメインリクエストの原則の詳細な例&#39;, true);
 xhr.send();
 }
}
</script>
</head>
<body>
 <input type="button" value="获取同域下内容" id="btn" />
</body>
</html>

まずリクエストを見てみましょう同じドメインの下にあります

私たちは HTML5/a を使用しています php ファイルを作成し、'hello' を返します

Ajax クロスドメインリクエストの原則の詳細な例この時点で、現在のページを開いています

http://www.a.com/7 .ajax.html

、ボタンをクリックすると、データが要求されていることがわかります Ajax クロスドメインリクエストの原則の詳細な例

Ajax クロスドメインリクエストの原則の詳細な例しかし、それがクロスドメインの場合は、つまり、リクエストしたデータと現在のファイルが同じドメインに属していないため、クロスドメインリクエストが発生し、通常この場合、アクセスが禁止されます

たとえば、ここでは Ajax クロスドメインリクエストの原則の詳細な例ファイルを置きます。 HTML5/a フォルダーの直下から b フォルダーに移動します

今回クリックすると、リクエストがエラーを報告しました。これは、クロスドメインリクエストが制限されていることを意味します

Ajax クロスドメインリクエストの原則の詳細な例この時点で、バックエンドが連携するには、出力時に「Access-Control-Allow-Origin」ヘッダー情報を追加するようにバックエンドに指示する必要があります

例: 図に示すように、これはクロスドメインリクエストである限りを意味します。ドメイン名はクロスドメインポリシーの影響を受けません

Ajax クロスドメインリクエストの原則の詳細な例この時、クリックすると正常にクロスドメインデータを取得できます

IEと互換性を持たせたい場合は、 need

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ajax跨域请求</title>
<script>
window.onload = function() { 
 /*
 在标准浏览器下，XMLHttpRequest对象已经是升级版本，支持了更多的特性，可以跨域了
 但是，如果想实现跨域请求，还需要后端的相关配合才可以
 XMLHttpRequest : 增加很多功能，他也不推荐使用onreadystatechange这个事件来监听，推荐使用onload

 */
 var oBtn = document.getElementById(&#39;btn&#39;);
 oBtn.onclick = function() {
 // 这是标准浏览器写法
 var xhr = new XMLHttpRequest();
 xhr.onreadystatechange = function() {
 if (xhr.readyState == 4) {
 if (xhr.status == 200) {
 alert(xhr.responseText);
 }
 }
 }
 xhr.open(&#39;get&#39;, &#39;http://www.b.com/Ajax クロスドメインリクエストの原則の詳細な例&#39;, true);
 xhr.send();
 /*
 如果你想兼容IE浏览器,可以特地为IE做兼容,忽略IE6
 XDomainRequest : IE如果想实现跨域请求，则需要使用这个对象去实现
 var oXDomainRequest = new XDomainRequest();
 oXDomainRequest.onload = function() {
 alert(this.responseText);
 }
 oXDomainRequest.open(&#39;get&#39;, &#39;http://www.b.com/Ajax クロスドメインリクエストの原則の詳細な例&#39;, true);
 oXDomainRequest.send();
 */
 }
}
</script>
</head>

<body>
 <input type="button" value="获取同域下内容" id="btn" />
</body>
</html>

Ajax クロスドメインリクエストの原則の詳細な例

関連記事