Ajaxクロスドメインの基本的な処理

1. AJAX

AJAX (非同期 JavaScript および XML) とは、JavaScript を使用して非同期ネットワーク リクエストを実行することを意味します。
クロスドメインは、主にプロキシ サーバー、JSONP、CORS を設定することで実現できます。
JavaScript で完全な AJAX コードを記述することは複雑ではありませんが、注意する必要があります。AJAX リクエストは非同期で実行されます。 、コールバック関数を通じて応答を取得する必要があります。

関連する推奨事項: 「Python ビデオ 」

##Ajax を作成するプロセスは、一般に次のとおりです。

XMLHttpRequest オブジェクト、つまり非同期呼び出しオブジェクトの作成、XHR オブジェクト属性の決定、新しい HTTP リクエストの作成、HTTP リクエストのメソッド、URL、検証情報の指定、応答する関数の設定HTTP リクエストのステータスの変更、HTTP リクエストの送信、非同期呼び出しによって返されたデータの取得、JavaScript と DOM を使用した部分更新の実装。 ＃＃＃＃＃＃コード。

var xmlhttp;function createXMLHttpRequest () {
    xmlhttp = null;    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }    // 异步调用服务器段数据
    if (xmlhttp != null) {        // 创建http请求
        xmlhttp.open('GET/POST', url, true);        // 设置http请求状态变化的函数
        xmlhttp.onreadystatechange = httpStateChange;        // 发送请求
        xmlhttp.send(null);
    } else {        console.log('不支持XHR');
    }
} 
// 响应HTTP请求状态变化的函数function httpStateChange () { //判断异步调用是否完成
    if (xmlhttp.readyState == 4) {//readyState==4表示后台处理完成了
        if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status == 304){        //判断异步调用是否成功,如果成功开始局部更新数据
            //code...
        } else{            console.log("出错状态码：" + xmlhttp.status + "出错信息：" + xmlhttp.statusText);
        }
    }
}

IE の下位バージョンの場合は、ActiveXObject オブジェクトに変更する必要がありますが、標準の書き込みと IE の書き込みを混在させたい場合は、次のように記述できます。

var request;if (window.XMLHttpRequest) {
   request = new XMLHttpRequest();
} else {
  request = new ActiveXObject('Microsoft.XMLHTTP');
}

ウィンドウ オブジェクトに XMLHttpRequest 属性があるかどうかを検出して、ブラウザが標準の XMLHttpRequest をサポートしているかどうかを判断します。注意: ブラウザが特定の JavaScript 機能をサポートしているかどうかを検出するために、ブラウザの navigator.userAgent を使用しないでください。第一に、文字列自体が偽造される可能性があり、第二に、IE のバージョンを通じて JavaScript 機能を判断するのは非常に複雑になるためです。

XMLHttpRequest オブジェクトを作成した後、まず onreadystatechange のコールバック関数を設定する必要があります

。コールバック関数では、通常、readyState === 4 によってリクエストが完了したかどうかを判断するだけで済みます。完了した場合は、ステータスに基づいて成功応答かどうかを判断します。

XMLHttpRequest オブジェクトの open() メソッドには 3 つのパラメータがあります。最初のパラメータは GET か POST かを指定し、2 番目のパラメータは URL アドレスを指定し、3 番目のパラメータは非同期を使用するかどうかを指定します。 trueなので書く必要はありません。 3 番目のパラメータを false に指定しないでください。指定しないと、AJAX リクエストが完了するまでブラウザが応答を停止します。このリクエストに 10 秒かかる場合、10 秒以内にブラウザが「サスペンドデス」状態になっていることがわかります。

最後に send() メソッドを呼び出して、実際にリクエストを送信します。 GET リクエストにはパラメーターは必要ありませんが、POST リクエストには本文部分を文字列または FormData オブジェクトとして渡す必要があります。

2. クロスドメインセキュリティ制限

ブラウザの「同一生成元ポリシー」により、プロトコル、ドメイン名、ポート番号が異なる場合はアクセスできません。 AJAX自体はドメインを越えることができず、AJAXは通常のファイルを直接リクエストするため、勝手にドメインを越えてアクセスしてしまう問題があり、クロスドメインリクエストである限りは許可されませんが、バックエンドとの間でドメインを越えることは可能です。

同一生成元ポリシーはブラウザを制限しますが、サーバーを制限しないため、サーバーはドメインを越えることができます。

JavaScript が外部ドメイン (つまり、他の Web サイト) から URL をリクエストできないためですか?おそらく次のような方法がまだあります。

2.1 CORS

CORS (Cross-Origin Resource Sharing、クロスオリジン リソース共有) は、クロスドメイン リソースを参照する方法を定義する W3C のドラフトです。サーバーはサーバーとどのように通信する必要があります。

CORS の背後にある基本的な考え方は、カスタム HTTP ヘッダーを使用して、ブラウザーがサーバーと通信して、要求または応答が成功するか失敗するかを判断できるようにすることです。

たとえば、GET または POST を使用して送信される単純なリクエストにはカスタム ヘッダーがなく、メイン コンテンツは text/plain です。このリクエストを送信するときは、追加の Origin ヘッダーをそれに添付する必要があります。このヘッダーには、リクエストされたページのソース情報 (プロトコル、ドメイン名、ポート) が含まれており、サーバーがこのヘッダー情報に基づいて応答するかどうかを決定できるようになります。以下は、Origin ヘッダーの例です。

Origin: http://www.nczonline.net

サーバーがリクエストが受け入れられると判断した場合、Access-Control-Allow-Origin ヘッダーで同じソース情報を送り返します (パブリック リソースの場合は、「*」を送り返すことができます) ）。例:

Access-Control-Allow-Origin: http://www.nczonline.net

そのようなヘッダーがない場合、またはこのヘッダーはあってもソース情報が一致しない場合、ブラウザはリクエストを拒否します。通常、ブラウザはリクエストを処理します。リクエストにもレスポンスにも Cookie 情報が含まれていないことに注意してください。

現在、すべてのブラウザがこの機能をサポートしており、IE ブラウザは IE10 よりも古いものには対応できません。 CORS 通信プロセス全体はブラウザによって自動的に完了し、ユーザーの参加は必要ありません。開発者にとって、同じソースからの CORS 通信と AJAX 通信に違いはなく、コードはまったく同じです。ブラウザーが AJAX リクエストがクロスオリジンであることを検出すると、追加のヘッダー情報が自動的に追加され、追加のリクエストが行われることもありますが、ユーザーはそれを感じません。

したがって、CORS 通信を実現する鍵となるのはサーバーです。サーバーが CORS インターフェイスを実装している限り、クロスオリジン通信が可能です。

通常の Ajax リクエストは次のようになります:

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/damonare",true);
    xhr.send();</script>

上記の damonare 部分は相対パスです。CORS を使用したい場合、関連する Ajax コードは次のようになります:

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://segmentfault.com/u/trigkit4/",true);
    xhr.send();</script>

このコードと前のコードの違いは、相対パスが他のドメインの絶対パスに置き換えられることです。これは、ドメインを越えてアクセスするインターフェイス アドレスです。

服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

2.2 图像Ping

我们知道，一个网页可以从任何网页中加载图像，不用担心跨域不跨域。这也是在线广告跟踪浏览量的主要方式。我们也可以动态的创建图像，使用它们的onload和onerror事件处理成西来确定是否接收到了响应。

动态创建图像经常用于图像Ping。
图像Ping是与服务器进行简单、单向的跨域通信的一种方式。请求的数据是通过查询字符串形式发送的，而响应可以是任意内容，但通常是像素图或204响应。通过图像Ping，浏览器得不到任何具体的数据，但通过侦听load和error事件，它能知道响应是什么时候收到的。

来看下面的例子。

var img = new Image();
img.onload = img.onerror = function () {    console.log('Done');
};
img.src = 'http://www.example.com/test?name=Nico';

这里创建了一个Image的实例，然后将onload和onerror事件处理程序指定为同一个函数。这样无论是什么响应，只要请求完成，就能得到通知。请求从设置src属性那一刻开始，而这个例子在请求中发送了一个name参数。

图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。
图像Ping有两个主要的缺点：

只能发送GET请求。无法访问服务器的响应文本。

因此，图像Ping只能用于浏览器与服务器间的单向通信。

2.3 JSONP

JSONP是JSON with padding（填充式JSON或参数式JSON）的简写，是应用JSON的一种新方法。JSONP与JSON看起来差不多，只不过是被包含在函数调用中的JSON，如下。

callback({'name': 'Azure'});

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的，而数据就是传入回调参数中JSON数据。下面是一个典型的JSONP请求。

http://freegeoip.net/json/?callback=handleResponse

这个URL是在请求一个JSONP地理定位服务。通过查询字符串来指定JSONP服务的回调参数是很常见的，就像上面的URL所示，这里指定的回调函数的名字叫handleResponse()。

JSONP是通过动态

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション

1 か月前 By DDD

Windows11 KB5054979の新しいものと更新の問題を修正する方法

3週間前 By DDD

Atomfallのクレーンコントロールキーカードを見つける場所

1 か月前 By DDD

KB5055523を修正する方法Windows 11にインストールできませんか？

2週間前 By DDD

Inzoi：学校と大学への応募方法

3週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7754

15

Java チュートリアル

1643

14

CakePHP チュートリアル

1398

52

Laravel チュートリアル

1293

25

PHP チュートリアル

1234

29

もっと見る

Related knowledge

jQuery AJAX リクエストで発生した 403 エラーを解決する方法 Feb 20, 2024 am 10:07 AM

タイトル: jQuery AJAX リクエストの 403 エラーを解決する方法とコード例。403 エラーは、サーバーがリソースへのアクセスを禁止するリクエストを指します。このエラーは通常、リクエストにアクセス許可がないか、サーバーによって拒否されたために発生します。 jQueryAJAX リクエストを行うときにこのような状況に遭遇することがありますが、この記事ではこの問題の解決方法とコード例を紹介します。解決策: 権限を確認します。まず、要求された URL アドレスが正しいことを確認し、リソースにアクセスするための十分な権限があることを確認します。

PHP と Ajax: オートコンプリート提案エンジンの構築 Jun 02, 2024 pm 08:39 PM

PHP と Ajax を使用してオートコンプリート候補エンジンを構築します。 サーバー側スクリプト: Ajax リクエストを処理し、候補を返します (autocomplete.php)。クライアント スクリプト: Ajax リクエストを送信し、提案を表示します (autocomplete.js)。実際のケース: HTML ページにスクリプトを組み込み、検索入力要素の識別子を指定します。

jQuery AJAXリクエスト403エラーを解決する方法 Feb 19, 2024 pm 05:55 PM

jQuery は、クライアント側の開発を簡素化するために使用される人気のある JavaScript ライブラリです。 AJAX は、Web ページ全体をリロードせずに、非同期リクエストを送信し、サーバーと対話するテクノロジーです。ただし、jQuery を使用して AJAX リクエストを行うと、403 エラーが発生することがあります。 403 エラーは通常、セキュリティ ポリシーまたは権限の問題が原因で、サーバーによってアクセスが拒否されたエラーです。この記事では、jQueryAJAX リクエストで 403 エラーが発生した場合の解決方法について説明します。

jQuery AJAX エラー 403 の問題を解決するにはどうすればよいですか? Feb 23, 2024 pm 04:27 PM

jQueryAJAX エラー 403 の問題を解決するにはどうすればよいですか? Web アプリケーションを開発する場合、非同期リクエストを送信するために jQuery がよく使用されます。ただし、jQueryAJAX の使用時に、サーバーによってアクセスが禁止されていることを示すエラー コード 403 が発生する場合があります。これは通常、サーバー側のセキュリティ設定が原因ですが、回避する方法があります。この記事では、jQueryAJAX エラー 403 の問題を解決する方法と具体的なコード例を紹介します。 1.作る

Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか? Mar 09, 2024 pm 05:36 PM

Ajax を使用して PHP メソッドから変数を取得することは、Web 開発では一般的なシナリオであり、Ajax を使用すると、データを更新せずにページを動的に取得できます。この記事では、Ajax を使用して PHP メソッドから変数を取得する方法と、具体的なコード例を紹介します。まず、Ajax リクエストを処理し、必要な変数を返すための PHP ファイルを作成する必要があります。以下は、単純な PHP ファイル getData.php のサンプル コードです。

PHP と Ajax: 動的に読み込まれるコンテンツを作成するためのソリューション Jun 06, 2024 pm 01:12 PM

Ajax (非同期 JavaScript および XML) を使用すると、ページをリロードせずに動的コンテンツを追加できます。 PHP と Ajax を使用すると、製品リストを動的にロードできます。HTML はコンテナ要素を含むページを作成し、Ajax リクエストはロード後に要素にデータを追加します。 JavaScript は Ajax を使用して XMLHttpRequest を通じてサーバーにリクエストを送信し、サーバーから JSON 形式で商品データを取得します。 PHP は MySQL を使用してデータベースから製品データをクエリし、それを JSON 形式にエンコードします。 JavaScript は JSON データを解析し、ページ コンテナーに表示します。ボタンをクリックすると、製品リストをロードするための Ajax リクエストがトリガーされます。

PHP と Ajax: Ajax のセキュリティを向上させる方法 Jun 01, 2024 am 09:34 AM

Ajax セキュリティを向上させるには、いくつかの方法があります。 CSRF 保護: トークンを生成してクライアントに送信し、それを検証リクエストのサーバー側に追加します。 XSS 保護: htmlspecialchars() を使用して入力をフィルタリングし、悪意のあるスクリプトの挿入を防ぎます。 Content-Security-Policy ヘッダー: 悪意のあるリソースの読み込みを制限し、スクリプトとスタイル シートの読み込みを許可するソースを指定します。サーバー側の入力を検証する: Ajax リクエストから受け取った入力を検証して、攻撃者による入力の脆弱性の悪用を防ぎます。安全な Ajax ライブラリを使用する: jQuery などのライブラリによって提供される自動 CSRF 保護モジュールを利用します。

ajaxのバージョンは何ですか? Nov 22, 2023 pm 02:00 PM

Ajax は特定のバージョンではなく、一連のテクノロジーを使用して Web ページのコンテンツを非同期に読み込み、更新するテクノロジーです。 Ajax には特定のバージョン番号はありませんが、ajax のバリエーションまたは拡張機能がいくつかあります: 1. jQuery AJAX; 2. Axios; 3. Fetch API; 4. JSONP; 5. XMLHttpRequest Level 2; 6. WebSocket; 7. Server -送信イベント; 8、GraphQL など

See all articles