ASP.NET JQuery 와 Asp.net 과 JSONP를 사용하여 크로스도메인간 호출 (ClientScript에서 다른IP의 웹서비스 호출)

[붉은냐옹이]

유쾌한 냐옹이입니다.

Asp.net 웹페이지에서 jquery 및 jsonp를 이용하여 다른 IP의 웹서비스를 사용하는 방법입니다.

아래 예제를 토대로 설명 시작합니다.

1.ClientScript 쪽 소스

<script type="text/xxxxjavascript" src="jquery-1.6.2.js"></script>
<script type="text/xxxxjavascript" src="jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/xxxxjavascript" language="xxxxjavascript">
    function Push() {
        $.ajax({
            url: "http://192.168.10.102/TestApp/DBManager.asmx/Hello",
            data: "{}",
            dataType: 'jsonp',
            success: function (data) {
                alert(‎"성공 : " + data.d);
            },
            error: function (result) {
                alert(‎"에러 : " + result.status + ' ' + result.statusText);
            }
        });
    }
</script>


<!-- 컨트롤 정의 -->
<input id="Button1" type="button" value="button" [안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xxonclick="Push()" /></h2>

위 구문 중 $.ajax부분이 비동기로 호출하는 구문이고 url에 해당 웹서비스의 asmx파일 및 슬래시('/')뒤에 함수명을 적어주시면 됩니다. data부분은 매개변수를 입력하면 됩니다.

dataType을 jsonp로 하였기때문에 다른IP의 웹서비스를 호출할 수 있게 됩니다.

2. 웹서비스 쪽 소스

DLL 파일로 아래 ContentTypeHttpModule을 생성합니다.

1. using System;   
2. using System.Collections.Generic;   
3. using System.IO;   
4. using System.Linq;   
5. using System.Text;   
6. using System.Web;   
7.   
8. namespace ContentTypeHttpModule   
9. {   
10.     public class ContentTypeHttpModule : IHttpModule   
11.     {   
12.         private const string JSON_CONTENT_TYPE = "application/json; charset=utf-8";  
13.  
14.         #region IHttpModule Members   
15.         public void Dispose()   
16.         {   
17.         }   
18.   
19.         public void Init(HttpApplication app)   
20.         {   
21.             app.BeginRequest += OnBeginRequest;   
22.             app.ReleaseRequestState += OnReleaseRequestState;   
23.         }  
24.         #endregion   
25.   
26.         public void OnBeginRequest(object sender, EventArgs e)   
27.         {   
28.             HttpApplication app = (HttpApplication)sender;   
29.             HttpRequest resquest = app.Request;   
30.             if (!resquest.Url.AbsolutePath.Contains("DBManager.asmx")) return;   
31.   
32.             if (string.IsNullOrEmpty(app.Context.Request.ContentType))   
33.             {   
34.                 app.Context.Request.ContentType = JSON_CONTENT_TYPE;   
35.             }   
36.         }   
37.   
38.         public void OnReleaseRequestState(object sender, EventArgs e)   
39.         {   
40.             HttpApplication app = (HttpApplication)sender;   
41.             HttpResponse response = app.Response;   
42.             if (app.Context.Request.ContentType != JSON_CONTENT_TYPE) return;   
43.   
44.             response.Filter = new JsonResponseFilter(response.Filter);   
45.         }   
46.     }   
47.   
48.     public class JsonResponseFilter : Stream   
49.     {   
50.         private readonly Stream _responseStream;   
51.         private long _position;   
52.   
53.         public JsonResponseFilter(Stream responseStream)   
54.         {   
55.             _responseStream = responseStream;   
56.         }   
57.   
58.         public override bool CanRead { get { return true; } }   
59.   
60.         public override bool CanSeek { get { return true; } }   
61.   
62.         public override bool CanWrite { get { return true; } }   
63.   
64.         public override long Length { get { return 0; } }   
65.   
66.         public override long Position { get { return _position; } set { _position = value; } }   
67.   
68.         public override void Write(byte[] buffer, int offset, int count)   
69.         {   
70.             string strBuffer = Encoding.UTF8.GetString(buffer, offset, count);   
71.             strBuffer = AppendJsonpCallback(strBuffer, HttpContext.Current.Request);   
72.             byte[] data = Encoding.UTF8.GetBytes(strBuffer);   
73.             _responseStream.Write(data, 0, data.Length);   
74.         }   
75.   
76.         private string AppendJsonpCallback(string strBuffer, HttpRequest request)   
77.         {   
78.             return request.Params["callback"] + "(" + strBuffer + ");";   
79.         }   
80.   
81.         public override void Close()   
82.         {   
83.             _responseStream.Close();   
84.         }   
85.   
86.         public override void Flush()   
87.         {   
88.             _responseStream.Flush();   
89.         }   
90.   
91.         public override long Seek(long offset, SeekOrigin origin)   
92.         {   
93.             return _responseStream.Seek(offset, origin);   
94.         }   
95.   
96.         public override void SetLength(long length)   
97.         {   
98.             _responseStream.SetLength(length);   
99.         }   
100.   
101.         public override int Read(byte[] buffer, int offset, int count)   
102.         {   
103.             return _responseStream.Read(buffer, offset, count);   
104.         }   
105.     }   
106. }  

3. 만들어진 ContentTypeHttpModule DLL을 참조추가로 하여 웹서비스 프로젝트에 추가 해 줍니다. 

위 예에서는 ICSService쪽 참조에 참조추가가 되겠습니다.

4. 웹서비스의 Web.config파일에 httpModules속성에 ContentTypeHttpModule을 사용함을 명시합니다.

Web.config 파일의 <system.web> 하위에 DLL을 참조하도록 아래 부분을 추가 해 준다.

 <httpModules>
        <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        <add name="ContentTypeHttpModule" type="ContentTypeHttpModule.ContentTypeHttpModule, ContentTypeHttpModule"/>
      </httpModules>

 5. 웹서비스에 UseHttpGet =  true 속성과 ResponseFormat = ResponseFormat.Json 부분을 추가 해 줍니다.

        [WebMethod]
        [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
        public string Hello()
        {
            return "Hello Nyaonge~";
        }

---

매개변수가 있는 웹서비스의 함수를 호출 하려면 호출 시 아래와 같은 순서로 한다.

<1>. 호출하고자 하는 웹페이지에서 jquery의 [json2.js] 파일을 추가 한다. (JSON 객체 사용하기 위함)

json2.js

<2>. 사용할 때 아래와 같이 작성한다.
data : { 웹서비스의 매개변수명 : JSON.stringify(매개변수값) },


    function Push() {
        $.ajax({
            url: "http://192.168.10.102/TestApp/DBManager.asmx/SelectPresetByCameraCode_Web",
            data: { CameraCode : JSON.stringify("1") },
            dataType: "jsonp",
            success: function (data) {
                alert(‎"성공 : " + data.d);
            },
            error: function (result) {
                alert(‎"에러 : " + result.status + ' ' + result.statusText);
            }

        });

위는 제가 만들어 본 예제소스고 원본 예제소스를 올립니다.

2146.JSONP-Prototype (2).zip

[심재운]

짱...~~~~ GOOD

[붉은냐옹이]

알려주셔서 빨리해결했어요