간단한 jsonp 예

현재 jsonp는 매우 유행하고 있으며, 많은 사람들이 매우 복잡하게 쓰는 것을 보고, 지금은 간단한 호출을 한다.
먼저 서비스 측을 써서TestHandler를 만듭니다.ashx

  public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/x-javascript";
            string callback = context.Request.QueryString["callback"].Trim();
            string name = context.Request.QueryString["name"].Trim();
            string str = callback + "([{\"SuitName\":\"" + name + "\"}]);";
            context.Response.Write(str);
        }

htm 코드:

 

        
        

        
        
            function displayResult(data) {
                $("#msg").text(data[0].SuitName);
            }
            $(function () {

                $("#btn1").click(function () {
                    var url = "TestHandler.ashx?name=majiang&callback=displayResult"
                    $.getScript(url);

                });

            });
        
    

여기서 getScript를 통해 jsonp를 만드는 데 있어서는 디스플레이 Result가 전역 함수로 정의된 결함이 있습니다. 만약 jquey가 1.6 이상의 버전이라면 원시적인 aax로 만들 수도 있습니다. 코드는 다음과 같습니다.

 

        
        

        
        
            $(function () {
                $("#btn1").click(function () {
                    $.ajax({
                        cache: true,
                        url: "TestHandler.ashx",
                        dataType: 'JSONP',
                        data: "name=majiang",
                        jsonp: 'callback',
                        jsonpCallback: 'displayResult',
                        success: function (data) {
                            $("#msg").text(data[0].SuitName)
                        }
                    });
                });

            });  
        
    

그중의 jsonp:'콜백', jsonpCallback:'displayResult'는 URL의 추가 부분으로
callback=displayResult
ㅋㅋ 이 정도면 됐어 간단하지