Ajax クロスドメインリクエストの使用方法

今回は、Ajax クロスドメイン リクエストの使用方法と、Ajax クロスドメイン リクエストを使用する際の 注意事項 について説明します。以下は実際的なケースです。

この記事では、クロスドメインの問題に遭遇したが、それがクロスドメインの問題であるとは知らず、その後、それがクロスドメインの問題であることは知っていたが、それを解決する方法がわからなかった初心者の話をします。次に、クロスドメインの問題を解決し、最終的に、Ajax のクロスドメイン問題を解決する 2 つの方法を見つけました。

クロスドメインの問題かどうかはわかりません

その理由は、再利用と繰り返しの開発を減らすために、別のユーザー

権限管理システムを開発して、他のユーザーから認証と認可情報を取得するためです。とりあえずシステム A と呼び、例としてシステム B を使用します。システムBでは、ajaxを使用してシステムAのインターフェースを呼び出しました（データ形式はjsonです）。システムAの対応するURLにアクセスすると、通常はjsonデータが返されますが、同じものをリクエストするにはajaxを使用しました。システム B の URL は少し混乱します。何もなかったかのように、子供からの反応はありませんでした。このような変更を長い間繰り返しましたが、それでも解決できなかったので、同僚に助けを求め、ajax のクロスドメインの問題である可能性があることを思い出させたので、問題をクロスドメインの問題として解決しました。

クロスドメインについては知っているが、その解決方法がわからない

問題の正確な原因がわかったら、残っているのは問題の解決策を見つけることだけです。私は長い間グーグルで検索しましたが、再び同僚の指導のもと、jQuery の ajax には、クロスドメインの問題を解決するために使用できる jsonp などの属性があることを知りました。

解決策を見つける

これで、クロスドメインの問題を解決する方法がわかりました。残りは実装の詳細です。導入プロセスではエラーが避けられません。 json と jsonp の 2 つの形式の違いが理解できなかったので、Google で解決するのに時間がかかりました。

まず、jQuery の ajax を使用してページ上のクロスドメインの問題を解決する方法の簡単なバージョンを見てみましょう:

$(document).ready(function(){
var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"
+"?id=1&callback=?';
$.ajax({
url:url,
dataType:'jsonp',
processData: false, 
type:'get',
success:function(data){
alert(data.name);
},
error:function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}});
});

このように記述しても問題ありません。最初は、エラー処理関数は単なるアラートです。 (「エラー」) エラーの原因をさらに特定するために、処理関数を上記の実装に変更します。アラートの最後の行は parsererror として使用されます。私は困惑したので、グーグルで検索を続け、最終的に万能のスタックオーバーフローで答えを見つけました。リンクはここにあります。その理由は、jsonp の形式が json 形式と少し異なるため、サーバー側のコードが少し異なるためです。

json形式とjsonp形式の違いを比較してください:

json形式:

{
"message":"获取成功",
"state":"1",
"result":{"name":"工作组1","id":1,"description":"11"}
}

jsonp形式:

callback({
"message":"获取成功",
"state":"1",
"result":{"name":"工作组1","id":1,"description":"11"}
})

バックグラウンドに渡されるURLのコールバックのパラメータで違いがわかります。 Shenma callback は驚くべきことに、jsonp には json よりも 1 つ多くの層 callback() があります。それで、あなたはそれに対処する方法を知っています。したがって、背景コードを変更します。

最終的なバックグラウンド Java コードは次のとおりです:

@RequestMapping(value = "/getGroupById")
public String getGroupById(@RequestParam("id") Long id,
HttpServletRequest request, HttpServletResponse response)
throws IOException {
String callback = request.getParameter("callback");
ReturnObject result = null;
Group group = null;
try {
group = groupService.getGroupById(id);
result = new ReturnObject(group, "获取成功", Constants.RESULT_SUCCESS);
} catch (BusinessException e) {
e.printStackTrace();
result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED);
}
String json = JsonConverter.bean2Json(result);
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.print(callback + "(" + json + ")");
return null;
}

まずクエリ結果を json 形式に変換し、次にパラメーター コールバックを使用して json の外側に別のレイヤーを追加して jsonp にする必要があることに注意してください。

データ型をjsonpとして指定するAjaxは、さらなる処理に使用できます。

これでクロスドメインの問題は解決しましたが、パーサーエラーの原因を確認してみましょう。その理由は、json 形式のデータを ajax が処理するために盲目的に jsonp 形式のデータとして扱うため、このエラーが発生するためです。 このとき、サーバー側のコードは次のようになります。

@RequestMapping(value = "/getGroupById")
@ResponseBody
public ReturnObject getGroupById(@RequestParam("id") Long id,
HttpServletRequest request, HttpServletResponse response){
String callback = request.getParameter("callback");
ReturnObject result = null;
Group group = null;
try {
group = groupService.getGroupById(id);
result = new ReturnObject(group, "获取成功", Constants.RESULT_SUCCESS);
} catch (BusinessException e) {
e.printStackTrace();
result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED);
}
return result;
}

さて、ajax クロスドメインを解決する最初の方法です。問題は終わります。

解決策を追加

Google での検索の過程で、クロスドメインの問題を解決するために特別に設計された jQuery プラグイン、jquery-jsonp を偶然発見しました。

最初の方法の基礎により、jsonp プラグインを使用するのは比較的簡単で、サーバー側のコードを変更する必要はありません。

jquery-jsonp プラグインを使用してクロスドメインの問題を解決する方法を見てみましょう。

var url="http://localhost:8080/WorkGroupManagment/open/getGroupById"
+"?id=1&callback=?";
$.jsonp({
"url": url,
"success": function(data) {
$("#current-group").text("当前工作组:"+data.result.name);
},
"error": function(d,msg) {
alert("Could not find user "+msg);
}
});

ここまで、クロスドメインの問題を解決する 2 つの方法を紹介しました。

補足: Ajax のクロスドメイン問題には 3 つの解決策があります:

1. 中間遷移層を通じてクロスドメイン問題を解決します

(1) Web プロキシ サーバーを介して異なるドメインのアプリケーションを統合します。分離されているため、すべてのアプリケーションは 1 つのドメイン名の下にあります。 (Apache、nginxなど)

（2）跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作。

2.通过<script>标签解决跨域问题</script>

注意：凡是拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img alt="Ajax クロスドメインリクエストの使用方法" >、<iframe></script>

示例：

前台脚本：

<script> 
var flightHandler = function(data){ 
alert(&#39;你查询的航班结果是：票价 &#39; + data.price + &#39; 元，&#39; + &#39;余票 &#39; + data.tickets + &#39; 张。&#39;); 
}; 
var url = "http://abc.com:8080/AjaxCrossDomain/data/data.jsp?code=CA1998&callback=flightHandler"; 
var script = document.createElement(&#39;script&#39;); 
script.setAttribute(&#39;src&#39;, url); 
document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script); 
</script>

后台data.jsp内容：

使用jquery的jsonp来实现跨域访问，例子如下：

<script> 
$(function(){ 
$.ajax({ 
type: "get", 
async: false, 
url: "http://abc.com:8080/AjaxCrossDomain/jsonp/data.jsp", 
dataType: "jsonp", 
jsonp: "callback", 
jsonpCallback:"flightHandler", 
success: function(json){ 
alert(&#39;您查询到航班信息：票价： &#39; + json.price + &#39; 元，余票： &#39; + json.tickets + &#39; 张。&#39;); 
}, 
error: function(){ 
alert(&#39;fail&#39;); 
} 
}); 
}); 
</script>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

HTML5+ajax怎么做出预览图片效果

怎么实现不刷新的Ajax分页

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