Ajaxクロスドメイン実装方法-jsチュートリアル-php.cn

Ajaxクロスドメイン実装方法

php中世界最好的语言

リリース： 2018-04-04 14:22:23

オリジナル

976 人が閲覧しました

今回は、Ajax クロスドメインの実装方法について説明します。Ajax クロスドメイン実装の注意点について、実際の事例を見てみましょう。

ajax入門

AJAXとは「Asynchronous Javascript And XML」(Asynchronous JavaScript and XML)の略で、インタラクティブなWebアプリケーションを作成するためのWeb開発技術を指します。

AJAX = 非同期 JavaScript および XML (標準ユニバーサルマークアップ言語のサブセット)。

AJAX は、高速で動的な Web ページを作成するためのテクノロジーです。

AJAX を使用すると、バックグラウンドでサーバーと少量のデータを交換することで、Web ページを非同期に更新できます。これは、ページ全体を再読み込みしなくても、Web ページの一部を更新できることを意味します。

従来の Web ページ (AJAX を使用しない) では、コンテンツを更新する必要がある場合、Web ページ全体をリロードする必要があります。

本題に入りましょう

2 日前、xz さんから、ajax でクロスドメイン呼び出しを実装する方法を知っているかと尋ねられました。私はこの概念について聞いたことがなかったので、実装方法も知っていました。 xz さんは、Ajax クロスドメインを呼び出す方法はいくつかあると述べました。1 つは document.domain を設定することで実現される iframe メソッドで、もう 1 つは jsonp を設定することで実現されます。過去 2 日間で情報を確認し、いくつかのデモを作成したので、以下にメモします。

ローカルに 3 つのサイトを構築し、クロスサブドメインとクロスドメインをシミュレートするホストファイルを設定しました

coolkissbh.com

blog.coolkissbh.com

coolkiss.com

1. Ajax クロスドメイン呼び出し問題はありますか?

coolkissbh.comはjqueryの$.getを使用してblog.coolkissbh.comページを呼び出します

クロスドメインリクエスト、IE 7および8はアクセス拒否エラーを報告します
IE 6.0はこれをポップアップしますこのページは、その管理下にない情報にアクセスしています。これはセキュリティ上のリスクを引き起こします。続行しますか?

Firefox はエラーを報告しませんが、リクエストは行いません

2. Ajax クロスドメイン実装方法

1. サブドメイン全体で ajax を実装する

要件: blog.coolkissbh.com の下のページを非同期にリクエストするために Coolkissbh.com のページを実装する

実装方法: iframe を使用する、AjaxProxy.aspx などの iframe.com の src 属性を設定して blog.coolkissbh を埋め込むと、ページが Ajax をリクエストします

AjaxProxy リクエストが完了すると、返されたデータが Coolkissbh のメインページに送り返されます。 com を親オブジェクト経由で実行します。したがって、実際の非同期リクエストは依然として blog.coolkissbh.com のドメイン名で発生します

注: このメソッドを通じて実装されたクロスサブドメイン Ajax リクエストは、coolkissbh.com と AjaxProxy.aspx のリクエストページで同じ設定を設定する必要があります。ページドメイン名、つまり

document.domain = "coolkissbh.com";

注: ドメインの設定の問題に関しては、ドメイン全体にわたる場合、上記の方法を使用すると、Firefox は

違法なドキュメントを表示します。ドメイン値" コード: "1009 エラー。そのため、返されたデータを処理するためにドメイン全体で 2 番目のメソッドのみを使用できます。

AjaxProxy.aspx は、ajax によって返されたデータをグローバル変数に保存し、coolkissbh.com は setInterval を使用してiframe ページが読み込まれたかどうかを確認し、読み込みが完了した場合は、AjaxProxy.aspx のグローバル変数値を取得します。その後、その他の処理を行います。

ここで問題があります。当初は、AjaxProxy.aspxのajaxリクエストが完了した後、親メソッドを呼び出して同時にデータを返す予定でしたが、IEでは最初に「権限が拒否されました」エラーが表示されますクリックして、もう一度クリックすると正常になります。 Firefox では問題ありませんが、理由はわかりません。

2. ドメイン全体に ajax を実装します

要件: Coolkiss.com 配下のページを非同期でリクエストするために、coolkissbh.com のページを実装します

実装方法: 前述したように、クロスドメインは、ドメイン方式。ただし、script タグを使用して、coolkiss.com ドメイン名のページに script タグの src 属性を設定し、そのページにコールバック関数を渡すことで実現できます。例:

RequestAjax_CrossSite = function() {
var obj = $("#crossSitePage");
obj.attr("src", "http://coolkiss.com/CrossSite.aspx?callback=handleData3");
}
handleData3 = function(data) {
$("#ResponseData").html(data);
}

ログイン後にコピー

CrossSite.aspx は、string を返し、返されたデータをコールバックに渡し、コールバック関数を実行して、Ajax を実装します。例:

Response.Clear();
Response.Write(string.Format (" {0}('{1}')", Request["callback"], responseData));
Response.End();

注: このメソッドは、サブドメイン間の Ajax 問題に対処するためにも使用できます。 , ただし、jquery のように ajax 呼び出しのさまざまなステータスを取得することはできません

3. クロスドメイン ajax は、実際には、2 番目のメソッドと同じです。

jquery 1.2 は、クロスドメイン ajax 呼び出し、つまり $.getJSON 関数のサポートを追加しました

呼び出し方法は次のとおりです:

以下は、coolkissbh.com

//使用jsonp实现跨全域
RequestAjax_JSONP = function() {
var obj = $("#crossSitePage");
$.getJSON("http://coolkiss.com/CrossSite.aspx?callback=?&t=" + Math.random(), function(data) {
//alert(data);
$("#ResponseData").html(data.content);
});
}

ログイン後にコピー

coolkiss のページです。 .com バックグラウンド処理コード、コールバックに json オブジェクトを渡します:

public partial class CrossSite : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
LoadData_JSONP();
}
}
protected void LoadData_JSONP()
{
string responseData = "{content:\"hello world from coolkiss.com\"}";
if (Request["callback"] != null && !string.IsNullOrEmpty(Request["callback"]))
{
Response.Clear();
Response.Write(string.Format("{0}({1})", Request["callback"], responseData));
Response.End();
}
}
}

ログイン後にコピー

callback =?自動的に function(data) 関数に置き換えられます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JSONP による Ajax クロスドメインアクセスの処理方法

Ajax+Session が失敗した直後にログインページにリダイレクトする

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