최근 Ajax는 웹 서비스를 방문 할 때 크로스 도메인 문제를 겪었습니다. 온라인으로 정보를 검색하고 다음과 같이 요약했습니다 (많은 사람들이 잘 복사했다고 생각합니다)
<< JSON을 사용하여 데이터를 전송하고 JSONP에 크로스 도메인을 사용하십시오 >>
먼저 구현 된 코드를 추가하겠습니다.
프론트 엔드 코드 :
$ .ajax ({type : "get", url : "http : //localhost/service1.asmx/getelevatorstatusjsondata? {alert (data [i] .id + "-" + data [i] .name}} {a, b, c);서버 코드 :
/// <summary> /// 상태 데이터 정보 가져 오기 //// </summary> /// <returns> </returns> [webMethod] public void getelevatorStatusjsondata () {list <list <deviceInfo >> elevatordatas = new List <deviceInfo >> (); 목록 <SendDicDate> searchList = XmlSerializeHelper.xmlDeserializeFromFile <list <senddicdate >> (@configutil.servicepath + configutil.getConfigbyKey ( "XmlPath") + "Query directive information.xml", encoding.utf8); foreach (SearchList의 SendDicDate 항목) {String key = item.portno + "-" + item.bordrate + "-" + item.sendtype; List <DeviceInfo> DeviceInfolist = (list <deviceInfo>) context.cache.get (key); elevatordatas.add (deviceinfolist); } 문자열 result = ""; DataContractJsonSerializer JSON = 새로운 DataContractJsonSerializer (elevatordatas.getType ()); 사용 (MemoryStream Stream = New MemoryStream ()) {json.writeObject (stream, elevatordatas); 결과 = encoding.utf8.getString (stream.toArray ()); } 문자열 JSONCALLBACK = httpcontext.current.request [ "jsonCallback"]; 결과 = jsonCallback + '(' + result + ')'; httpcontext.current.response.write (결과); httpcontext.current.response.end (); }기음#
위는 C# 서버를 호출하는 구현 코드이며 다음은 Java 측입니다. 매개 변수는 다를 수 있지만 원칙은 동일합니다.
자바:
문자열 callbackfunname = context.request [ "Callbackparam"]; context.response.write (callbackfunname + "([{/"name/":/"john/"}]");PS : 클라이언트의 JSONP 매개 변수는 URL을 통해 매개 변수를 전달하고 JSONPCALLBACK 매개 변수의 매개 변수 이름을 전달하는 데 사용됩니다. 발음하기가 어렵고 간단한 용어로 다음과 같습니다.
JSONP : ""
JSONPCALLBACK : ""
그건 그렇고 : Chrome 브라우저에서 헤더 정보 컨텍스트를 설정할 수도 있습니다. response.addheader ( "Access-Control-Ollow-Origin", "*"); 크로스 도메인 요청의 목적을 달성하기 위해 서버에서 AJAX의 다음 매개 변수를 설정할 필요가 없습니다.
데이터 유형 : "JSONP", JSONP : "CallbackParam", JSONPCALLBACK : "JSONPCALLBACK1"
데이터는 일반 AJAX 요청 모드에서 얻을 수 있습니다.
다음은 원칙입니다. 다른 사람들이 설명한 것을 읽을 때 매우 합리적입니다.
1. 잘 알려진 문제. AJAX는 도메인에 대한 액세스 권한이없는 일반 파일을 직접 요청합니다. 정적 페이지, 동적 웹 페이지, 웹 서비스 또는 WCF라면 크로스 도메인 요청이라면 정확하지 않습니다.
2. 그러나 웹 페이지에서 JS 파일을 호출 할 때 크로스 도메인인지 여부에 영향을받지 않는다는 것을 발견했습니다 (그뿐만 아니라 "SRC"속성이있는 모든 태그에는 크로스 도메인 기능이 있음을 발견했습니다.
3. 따라서이 단계에서 Pure Web (ActiveX Controls, Server Proxy, Future HTML5 Websockets 등을 통해 도메인의 데이터에 액세스하려면 클라이언트가 호출 및 추가 처리를 위해 원격 서버의 JS 형식 파일에 데이터를로드하려고 시도 할 수 있습니다.
4. 우리는 복잡한 데이터를 간결하게 설명 할 수있는 JSON이라는 순수한 문자 데이터 형식이 있다는 것을 알고 있습니다. 더 좋은 점은 JSON이 JS에 의해 기본적으로 지원되므로 클라이언트가 원하는 대로이 형식으로 데이터를 처리 할 수 있다는 것입니다.
5.이 솔루션이 나오고 있습니다. 웹 클라이언트는 Cross-Domain 서버에서 호출 스크립트와 동일한 방식으로 JS 형식 파일 (일반적으로 JSON을 접미사로)을 호출합니다. 서버가 JSON 파일을 동적으로 생성하려는 이유는 클라이언트가 필요한 데이터를로드하는 것이 분명합니다.
6. 클라이언트가 JSON 파일을 성공적으로 호출 한 후 필요한 데이터를 얻습니다. 나머지는 자신의 요구에 따라 처리하고 표시하는 것입니다. 원격 데이터를 얻는 이러한 방법은 Ajax와 매우 유사 해 보이지만 실제로 다릅니다.
7. 클라이언트가 데이터를 사용하도록 촉진하기 위해 비공식 전송 프로토콜이 점차 형성되었습니다. 사람들은 그것을 JSONP라고 부릅니다. 이 프로토콜의 핵심 사항 중 하나는 사용자가 콜백 매개 변수를 서버로 전달할 수 있도록하는 것입니다. 서버가 데이터를 반환하면이 콜백 매개 변수를 기능 이름으로 사용하여 JSON 데이터를 래핑하여 클라이언트가 자체 기능을 사용자 정의하여 반환 데이터를 자동으로 처리 할 수 있습니다.
스마트 개발자는 서버가 제공 한 JS 스크립트가 동적으로 생성되는 한 발신자가 매개 변수를 전달하고 서버를 "xxx 함수를 호출하는 JS 코드를 원한다면 저에게 반환하기를 원합니다"라고 생각하기 쉽습니다. 서버가 클라이언트의 요구에 따라 JS 스크립트를 생성하고 응답 할 수 있습니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w.w.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><Html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> </title> <script type = "text/javaScript"> // 비행 정보 쿼리를 얻은 후 콜백 함수 결과 var flight handler = function (data) {alert ( '비행 결과+'query ' piao ' + data.tickets +'Zhang '); }; // JSONP 서비스의 URL 주소를 제공합니다 (주소 유형에 관계없이 최종 반환 값은 javaScript 코드입니다) var url = "http://flightquery.com/jsonp/flightresult.aspx?code=ca1998&callback=FlighThandler"; // 스크립트 태그를 만들고 속성을 설정 var script = document.createElement ( 'script'); script.setattribute ( 'src', url); // 스크립트 태그를 헤드에 추가하면 호출이 시작됩니다. </script> </head> </body> </html> <! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/xhtml1/dtd/xhtml1-transital.dtd"> xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> 제목없는 페이지 </title> <script type = "text/javaScript"src = jquery.min.js "> </script> <script> <script> <script> <script> <script> <avaScript"> jquery (wector). 유형 : "get", async : false, url : "http://flightquery.com/jsonp/flightresult.aspx?code=ca1998", Datatype : "JSONP", JSONP : "Callback", "Callback", // JSONP Callback 기능 이름의 매개 변수 이름을 얻으려면 // jsonpcallback : "flighthandler", // 사용자 정의 jsonp 콜백 함수 이름, 기본값은 jQuery에 의해 자동으로 생성 된 임의의 함수 이름입니다. "?", jQuery는 자동으로 데이터를 자동으로 처리합니다 : 기능 (JSON) {ALERT ( 'query flight Information :' + json.price + 'Yuan, Piao :' + JSON.PRICE + 'YUAN, PIAO : Zhang조금 이상하지 않습니까? 이번에는 왜 Flighthandler 기능을 작성하지 않았습니까? 그리고 실제로 성공적으로 실행되었습니다! 하하, 이것은 jQuery의 신용입니다. JQuery가 JSONP 유형 AJAX를 처리하면 (도움이 될 수는 없지만 불평합니다. 아주 좋지 않습니까?