Use of ajax jsonp for cross-origin requests

Source: Internet
Author: User

The error method is directly executed to indicate an error. ajax jsonp has never been used before. Its understanding is similar to that of common ajax requests, but it is not well understood. This error occurs, after debugging (checking the backend code and js attribute settings), I am surprised and puzzled. Therefore, I decided to carefully study the use of ajax jsonp and share my learning experience on the success of the test!
First, paste the code that can be successfully executed:
(Page) Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Untitled Page </title>
<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>
<Script type = "text/javascript">
JQuery (document). ready (function (){
$. Ajax ({
Type: "get ",
Async: false,
Url: "ajax. ashx ",
DataType: "jsonp ",
Jsonp: "callbackparam", // The parameter name passed to the request handler or page for obtaining the jsonp callback function name (default: callback)
JsonpCallback: "success_jsonpCallback", // custom jsonp callback function name. The default value is the random function name automatically generated by jQuery.
Success: function (json ){
Alert (json );
Alert (json [0]. name );
},
Error: function (){
Alert ('fail ');
}
});
Var a = "firstName Brett ";
Alert ();
});
</Script>
</Head>
<Body>
</Body>
</Html>

(Handler)Copy codeThe Code is as follows: <% @ WebHandler Language = "C #" Class = "ajax" %>
Using System;
Using System. Web;
Public class ajax: IHttpHandler {
Public void ProcessRequest (HttpContext context ){
Context. Response. ContentType = "text/plain ";
String callbackFunName = context. Request ["callbackparam"];
Context. Response. Write (callbackFunName + "([{name: \" John \ "}])");
}
Public bool IsReusable {
Get {
Return false;
}
}
}

(Packet capture request)

Ajax request parameters:
DataType String
Expected data type returned by the server. If this parameter is not specified, jQuery automatically determines Based on the MIME information of the HTTP package. For example, the xml mime type is recognized as XML. In 1.4, JSON will generate a JavaScript Object, and script will execute this script. The data returned by the server is parsed based on this value and passed to the callback function. Available value:
"Xml": returns an XML document, which can be processed by jQuery.
"Html": returns plain text HTML information. The script tag is executed when the dom is inserted.
"Script": returns plain text JavaScript code. Results are not automatically cached. Unless the "cache" parameter is set. ''' Note: ''' during remote requests (not in the same domain), all POST requests will be converted to GET requests. (Because the script tag of DOM will be used for loading)
"Json": Return JSON data.
"Jsonp": JSONP format. When calling a function in the form of JSONP, such as "myurl? Callback =? "Will jQuery be replaced automatically? For the correct function name to execute the callback function.
"Text": returns a plain text string.
Jsonp String
Rewrite the name of the callback function in a jsonp request. This value is used to replace "callback =? "The" callback "section of the URL parameter in this GET or POST request, for example, {jsonp: 'onjsonpload'} causes" onJsonPLoad =? "To the server.
JsonpCallback String
Specify a callback function name for the jsonp request. This value is used to replace the random function name automatically generated by jQuery. This function is mainly used to make jQuery generate a unique function name, which makes it easier to manage requests and conveniently provide callback functions and error handling. You can also specify the callback function name when you want the browser to cache the GET request.
The main difference between ajax jsonp and common ajax requests is the processing of request response results. The response result shown in the code above is:
Success_jsonpCallback ([{name: "John"}]); ---- In fact, it is to call the jsonp callback function success_jsonpCallback and pass in the method (as the parameter value) to the response string or json ), the underlying implementation of this architecture should be:

Copy codeThe Code is as follows: function success_jsonpCallback (data)
{
Success (data );
}

Ajax jsonp has no influence on synchronous or asynchronous requests. Well, if there is anything wrong or incomplete, I hope you will forgive me. Please leave a message and throw bricks!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.