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是通过动态3f1c4e4b6b16bbbd69b2ee476dc4f83a元素来使用的，使用时可以为src属性指定一个跨域URL。
这里的fa606c102b26eb7f8e8a6d6e20193568元素与a1f02c36ba31691bcfe87b2722de723b元素类似，都有能力不受限制的从其他域加载资源。因为JSONP是有效的JS代码，所以在请求完成后，即在JSONP响应加载到页面中以后，就会立即执行。来看一个例子。

function handleResponse (response) {    
console.log('u r at IP address ' + response.ip + ', which is in ' + response.city + ', ' + response.region_name);
} 
var script = document.createElement('script');
script.src = 'http://freegeoip.net/json/?callback=handleResponse';
document.body.insertBefore(script, document.body.firstChild);

这个例子通过查询地理定位服务来显示IP地址和地理位置信息。

JSONP之所以在开发人员中极为流行，主要原因是它非常简单易用。与图像Ping相比，它的优点在于能够直接访问响应文本，支持在浏览器与服务器之间双向通信。不过，JSONP也有两点不足。

首先，安全性问题。JSONP是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码，而此时除了完全放弃JSONP调用之外，没有办法追究。因此在使用不是自己运维的Web服务时，一定得保证它安全可靠。
其次，要确定JSONP请求是否失败并不容易。

CORS和JSONP对比

JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。SONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。

以上がAjaxクロスドメインの基本的な処理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。