In jquery, the $. Ajax function uses jsonp to implement Ajax cross-origin request for ASP. NET WebService to successfully obtain data.

In jquery, the $. Ajax function uses jsonp to implement Ajax cross-origin request for ASP. NET WebService to successfully obtain data.

Development Environment:Visual Studio 2010 SP1

Deployment environment:Window 7 SP1 + iis7

 

In jquery, the $. Ajax method supports cross-origin reading of JSON data. The principle is to use a concept called jsonp. Of course, the essence is to dynamically load JS through the script tag. It seems that this is a good way to achieve real cross-origin.

$. Ajax usage jquery manual has been written in great detail. It is easy to refer to the manual. It should be noted that the jsonp used by $. Ajax requires the cooperation between the client and the server.

 

Sort out several solutions that have been tried but failed before!

1. Solution 1:I tried to write an Ajax function to request WebService, JavaScriptCodeNo error is reported. however, the callback function is not executed, which proves that the Server (IIS) has no response. I used a method to test whether a request has been sent to the WebService. When initializing the WebService, I created a TXT file, when any data is written, the request is sent, and a similar test is performed in the method. The result shows that the self-written Ajax function does not request WebService. Why? I don't know. If you have encountered such a problem and have already solved it, please let me know. Thank you.
2. Solution 2:At the beginning, I thought it was an IIS environment or permission issue. I changed to Visual Studio testing environment to publish the WebService. The results were the same and there were no requests.
3. Solution 3:Google has checked a lot of information, including official examples such as msdn, cnblogs, and jquery. However, the official examples only provide snippets with incomplete code, and their URL addresses are filled with local addresses, instead of the remote (network) address, or even the $. the formats in Ajax functions have different writing methods. They all have been tried and fail.
4. Solution 4:Later I saw someone saying that my WebService didn't add the class feature [system. web. script. services. scriptservice] and [system. web. script. services. scriptmethod], I am wondering, what is the relationship between this remote access (cross-origin call) and this feature? However, I did it and added it. It turns out that it has no meaning at all.

 

Successful Solution:

The following are several important factors for the successful solution::

1.BecauseWebServiceGet is not supported by default.Request,ThereforeWeb. configIn the configuration file<System. Web>Add the following elements to the node:

 1   <  System. Web  >  2   <  WebServices  >  3          <  Protocols  >  4             <  Add  Name  = "Httpget"  />  5             <  Add  Name  = "Httppost"  />  6           </ Protocols  >  7   </  WebServices  >  8   </  System. Web  > 

Some netizens did not ask questions here, but asked questions via QQ.

When I was helping them perform remote debugging, I did not pay attention to it. Later I found out that the problem was that they put this configuration on the client.ProgramInstead of web service programs. Depressing ..

It should be emphasized that it is placed in the web. config of the Web Service website, rather than in the web. config of the client program.

 

2.InURLAdd ParametersJsoncallback =?,Note:Jsoncallback =?Is the key! Where?The symbol will beIt is automatically replaced with other callback method names. We will ignore the specific process and principle here. What we care about isJsoncallback =?What role does it play? OriginalJsoncallback =?After the method is replaced, the method name is passed to the server. What do we do on the server? The server must accept parametersJsoncallback, And thenJsoncallbackAs JSONThe data method name is returned.

 

3.SetDatatypeType:"Jsonp"

 

WebServiceThe Code is as follows::

 1   Using  System. Web;  2   Using  System. Web. Services;  3   ///   <Summary> 4   ///  Summary of userservice  5   ///   </Summary>  6 [WebService (namespace = "  Http://tempuri.org/  "  )]  7 [Webservicebinding (conformsto = Wsiprofiles. basicprofile1_1)]  8   Public  Class  Userservice: system. Web. Services. WebService  9   {  10   [Webmethod]  11       Public   Void Getloginid ( String  Loginid)  12   {  13           String Callback = httpcontext. Current. request ["  Jsoncallback  "  ];  14           Bool BL = True ; //  This is a method for calling the business logic layer (BLL ).  15                                 //  Returns a Boolean value.  16                                 //  If this parameter is omitted, the value is true.  17 Httpcontext. Current. response. Write (callback + 18               "  ({Result :'  " + BL + "  '})  "  );  19           //  The word "result" is a custom property.  20           //  Will serve as the property of the callback parameter for your call results  21  Httpcontext. Current. response. End ();  22   }  23 }

AspxPage andJavascriptThe script code is as follows::

 1 <% @ Page Language = "  C #  " Autoeventwireup = "  True  " Codefile = " Default. aspx. CS  " Inherits = "  _ Default  " %> 2    3 <! Doctype HTML public "  -// W3C // dtd xhtml 1.0 transitional // en  "   "  Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd  " > 4 <HTML xmlns ="  Http://www.w3.org/1999/xhtml  " > 5 <Head runat = "  Server  " > 6 <Title> test </title> 7 <SCRIPT type = "  Text/JavaScript  " Src = "  Scripts/jquery-1.7.2.js " > </SCRIPT> 8 <SCRIPT type = "  Text/JavaScript  " > 9           //  Initialization Method After document is loaded  10   $ (Function Init (){  11 $ ( "  # Txtloginid  " ). BIND ( " Blur  "  , Ckloginid );  12   });  13           //  Account Verification and prompt  14   Function ckloginid (){  15               VaR Id = $ ( "  # Txtloginid  "  );  16  $. Ajax ({  17 URL: "  Http: // localhost: 5311/userservice. asmx/getloginid? Jsoncallback =?  "  ,  18 Datatype: "  Jsonp  "  ,  19 Data :{ "  Loginid  " : Id. Val ()},  20   Success: onsuccess,  21   Error: onerror  22   });  23   }  24   Function onsuccess (JSON ){  25   Alert (JSON. Result );  26   } 27   Function onerror (XMLHttpRequest, textstatus, errorthrown ){  28 Targetdiv = $ ( "  # Data  "  );  29               If (Errorthrown | textstatus = "  Error  " | Textstatus = "  Parsererror  " | Textstatus = "  Notmodified  "  ){  30 Targetdiv. replacewith ( "  An error occurred while requesting data!  "  );  31                   Return  ;  32   }  33               If (Textstatus ="  Timeout  "  ){  34 Targetdiv. replacewith ( "  Request data timeout!  "  );  35                   Return  ;  36   }  37   }  38 </SCRIPT> 39 </Head> 40 <Body> 41 <Form ID = "  Form1  " Runat = "  Server  " > 42 <Table border = "  0  " Cellspacing = " 0  " Cellpadding = "  0  " Width = "  100%  " > 43 <Tr> 44 <TD> 45 <Asp: Label id = "  Lblloginid  " Runat ="  Server  " TEXT = "  Account & nbsp; No.  " Clientidmode = "  Static  " > </ASP: Label> 46 <Asp: textbox id = "  Txtloginid  " Runat = "  Server " Clientidmode = "  Static  " > </ASP: textbox> 47 </TD> 48 </Tr> 49 </Table> 50 </Form> 51 </Body> 52 </Html>

Running result:

Do not delete the following lines. Thank you !!!

http://www.cnblogs.com/VAllen/archive/2012/07/12/JQueryAjaxRegion.html