Use jquery jsonp to implement cross-origin Ajax request. Net *. handler and WebService, and return JSON data

Development Environment: Visual Studio 2005 SP1

Deployment environment: Windows Server 2008 r2 + IIS 7

 

1. Create a data source project crossdomain

The main file is as follows:

1. handler. ashx
As the response of jquery cross-origin Request *. Handler, the Code is as follows:

Using system; <br/> using system. collections. generic; <br/> using system. web; <br/> using system. web. services; <br/> namespace crossdomain <br/> {<br/> /// <summary> <br/> /// $ codebehindclassname $ abstract description <br/> // /</Summary> <br/> [WebService (namespace = "http://tempuri.org/")] <br/> [webservicebinding (conformsto = wsiprofiles. basicprofile1_1)] <br/> public class handler: ihttphandler <br/> {<br/> Pu BLIC void processrequest (httpcontext context) <br/>{< br/> context. response. contenttype = "text/plain"; <br/> string callbackmethodname = context. request. params ["jsoncallback"]; <br/> string currentcity = context. request ["city"]; <br/> currentcity = string. isnullorempty (currentcity )? "Beijing": "Shenyang"; <br/> string result = callbackmethodname + "({/" city/":" + "/" "+ currentcity + "/", /"datetime/": "+"/"" + datetime. now + "/"}); "; <br/> context. response. write (result); <br/>}< br/> Public bool isreusable <br/>{< br/> Get <br/>{< br/> return false; <br/>}< br/>

2. WebService. asmx
As the response of jquery cross-origin request WebService, the Code is as follows:

Using system; <br/> using system. collections. generic; <br/> using system. web; <br/> using system. web. services; <br/> namespace crossdomain <br/> {<br/> /// <summary> <br/> // Summary of WebService <br/> // </Summary> <br/> [WebService (namespace = "http://tempuri.org/")] <br/> [webservicebinding (conformsto = wsiprofiles. basicprofile1_1)] <br/> [system. componentmodel. toolboxitem (false)] <br/> public class W Ebservice: system. web. services. webService <br/> {<br/> [webmethod] <br/> Public void helloworld (string city) <br/>{< br/> string callbackmethodname = httpcontext. current. request. params ["jsoncallback"]? ""; <Br/> city = string. isnullorempty (city )? "Beijing": "Shenyang"; <br/> string result = callbackmethodname + "({/" city/":" + "/" "+ city + "/", /"datetime/": "+"/"" + datetime. now + "/"}); "; <br/> httpcontext. current. response. write (result); <br/> httpcontext. current. response. end (); <br/>}< br/> [webmethod] <br/> Public void WS (string name, string time) <br/>{< br/> httprequest request = httpcontext. current. request; <br/> string callback = request ["Callback"]; <br/> httpresponse response = httpcontext. current. response; <br/> response. write (callback + "({MSG: 'This is" + name + "jsonp'})"); <br/> response. end (); <br/>}< br/>

3. Web. config
You need to modify the Web. config file,Note WebServices
Section (this is the key to requesting WebService to obtain data)
The details are as follows:

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <configuration> </P> <p> <etettings/> <br/> <connectionstrings/> </P> <p> <system. web> <br/> <! -- <Br/> set compilation DEBUG = "true" to insert the debugging symbol into the compiled page. <br/>. However, this <br/> affects performance, so this value is set to true only during development. <Br/> --> <br/> <compilation DEBUG = "false"> <br/> </compilation> <br/> <! -- <Br/> you can configure ASP. net in the <authentication> section to <br/> identify the Security Authentication Mode of the user. <br/>. <Br/> --> <br/> <Authentication mode = "Windows"/> <br/> <! -- <Br/> if an error is not handled during request execution, <br/> You can configure the corresponding processing steps in the <customerrors> section. Specifically, <br/> developers can configure the <br/> HTML error page to be displayed <br/> to replace the error stack trace. <Br/> <customerrors mode = "remoteonly" defaultredirect = "genericerrorpage.htm"> <br/> <error statuscode = "403" Redirect = "noaccess.htm"/> <br/> <error statuscode = "404" Redirect = "filenotfound.htm"/> <br/> </customerrors> <br/> --> <br/> <WebServices> <br/> <protocols> <br/> <Add name = "httpget"/> <br/> <Add name = "httppost"/> <br/> </protocols> <br/> </WebServices> <br/> </system. web> <br/> </configuration> <br/>

 

2. Create a cross-origin request test project crossdomainrequesttest

The main file is as follows:

 1.crossdomainrequesthandler.htm
Cross-origin Request *. Handler obtains the josn format data test page. The Code is as follows:

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <title> </title> <br/> <MCE: script Type = "text/JavaScript" Language = "JavaScript" src = "JS/jquery-1.4.4.js" mce_src = "JS/jquery-1.4.4.js"> </MCE: SCRIPT> <br/> <MCE: Script Type = "text/JavaScript" Language = "JavaScript" src = "JS/jquery-1.4.4.js" mce_src = "JS/jquery-1.4.4.js"> </MCE: SCRIPT> <br/> <MCE: script Type = "text/JavaScript" Language = "JavaScript"> <! -- <Br/> $ (document). Ready (function () {<br/> // var clienturl = "http: // localhost: 4508/handler. ashx? Jsoncallback =? "; <Br/> var clienturl =" http: // 192.168.120.179: 8086/handler. ashx? Jsoncallback =? "<Br/> var currentcity =" Harbin "; <br/> $. ajax ({<br/> URL: clienturl, <br/> datatype: "jsonp", <br/> data: {City: currentcity}, <br/> success: onsuccess, <br/> error: onerror <br/>}); <br/> function onsuccess (JSON) {<br/> $ ("# data" ).html ("City:" + JSON. city + ", time:" + JSON. datetime); <br/>}< br/> function onerror (XMLHttpRequest, textstatus, errorthrown) {<br/> targetdiv = $ ("# data "); <Br/> If (errorthrown | textstatus = "error" | textstatus = "parsererror" | textstatus = "notmodified") {<br/> targetdiv. replacewith ("an error occurred when requesting data! "); <Br/> return; <br/>}< br/> If (textstatus =" timeout ") {<br/> targetdiv. replacewith ("request data timeout! "); <Br/> return; <br/>}</P> <p> // --> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <Div id = "data"> </div> <br/> </body> <br/> </ptml>

2.crossdomainrequestwebservice.htm
Cross-origin request WebService *. asmx

Obtain the josn format data test page. The Code is as follows:

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <title> </title> <br/> <MCE: script Type = "text/JavaScript" Language = "JavaScript" src = "JS/jquery-1.4.4.js" mce_src = "JS/jquery-1.4.4.js"> </MCE: SCRIPT> <br/> <MCE: Script Type = "text/JavaScript" Language = "JavaScript"> <! -- <Br/> $ (document). Ready (function () {<br/> // var clienturl = "http: // localhost: 4508/WebService. asmx/helloworld? Jsoncallback =? "; <Br/> var clienturl =" http: // 192.168.120.179: 8086/WebService. asmx/helloworld? Jsoncallback =? "; <Br/> var currentcity =" Harbin "; <br/> $. getjson (<br/> clienturl, <br/> {City: currentcity}, <br/> function (JSON) {<br/> $ ("# data" ).html ("City:" + JSON. city + ", time:" + JSON. datetime); <br/>}< br/>); <br/>}); <br/> function onsuccess (responsedata) {<br/> $ ("# data" response .html (responsedata. city); <br/>}< br/> function onerror (XMLHttpRequest, textstatus, errorthrown) {<br/> targetdiv =$ ("# data"); <Br/> If (errorthrown | textstatus = "error" | textstatus = "parsererror" | textstatus = "notmodified") {<br/> targetdiv. replacewith ("an error occurred when requesting data! "); <Br/> return; <br/>}< br/> If (textstatus =" timeout ") {<br/> targetdiv. replacewith ("request data timeout! "); <Br/> return; <br/>}</P> <p> // --> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <Div id = "data"> </div> <br/> </body> <br/> </ptml> <br/>

3. Results:

City: Shenyang, time: 14:49:37