今回は、Ajax クロスドメイン リクエストの使用方法と、Ajax クロスドメイン リクエストを使用する際の 注意事項 について説明します。以下は実際的なケースです。
この記事では、クロスドメインの問題に遭遇したが、それがクロスドメインの問題であるとは知らず、その後、それがクロスドメインの問題であることは知っていたが、それを解決する方法がわからなかった初心者の話をします。次に、クロスドメインの問題を解決し、最終的に、Ajax のクロスドメイン問題を解決する 2 つの方法を見つけました。クロスドメインの問題かどうかはわかりません
その理由は、再利用と繰り返しの開発を減らすために、別のユーザークロスドメインについては知っているが、その解決方法がわからない
問題の正確な原因がわかったら、残っているのは問題の解決策を見つけることだけです。私は長い間グーグルで検索しましたが、再び同僚の指導のもと、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); }}); });
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"} })
最終的なバックグラウンド 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; }
データ型を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; }
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); } });
補足: Ajax のクロスドメイン問題には 3 つの解決策があります:
1. 中間遷移層を通じてクロスドメイン問題を解決します
(1) Web プロキシ サーバーを介して異なるドメインのアプリケーションを統合します。分離されているため、すべてのアプリケーションは 1 つのドメイン名の下にあります。 (Apache、nginxなど)(2)跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作。
2.通过