Home > Developer > JavaScript
There are many cross-origin request methods,
1, iframe
2, document. domain
3, window. name
4. script
5, XDomainRequest (IE8 +)
6. XMLHTTPRequest (Firefox3.5 +)
7. postMessage (HTML5)
8. Background proxy
...
They have their own advantages and disadvantages, and the returned data formats are also different. You should choose carefully as needed. For example, if iframe returns an html clip, it is more suitable. If you use it to return JSON, you will not be worth the candle. At the beginning of this article, I will build a practical cross-origin request tool Sjax. The biggest drawback of using a script request is error handling. For example, if the Error 404 is returned, it is not like XMLHTTPRequest can return the status code 404 accurately. I put this in the last article.
This series mainly describes the method 4 listed above, that is, return data in JSON format through script. This method is now called JSONP. JSON is one of the most popular and widely used formats for frontend and backend communication. Compared with XML returned by early AJAX (X in AJAX is XML), JSON is more lightweight and has no redundant Tag tags. Parsing is also native. After the XML is returned to the front-end, it is first converted into a document and parsed layer by layer through the dom api. Parsing DOM is costly, especially in earlier IE versions (IE6/7/8). core js and dom communication are costly.
The idea of JSONP is simple.
1. Create a script tag on the front end, set src, and add it to the head (you can add it to the body ).
2. The background returns a js variable jsonp, which is the JSON data after the request.
3. Delete the script tag after the callback is complete (some cleanup operations, such as avoiding some browser memory leaks ).
Interface
View sourceprint? 1 Sjax. load (
2 url, // URL that spans the request
3 success, // callback function. A form parameter must be defined to receive the global variable jsonp returned by the background (the result returned by the background is as follows: jsonp =)
4 timestamp, // if it is set to true, a timestamp is added to prevent caching. By default, no timestamp is added.
5 );
Example:
View sourceprint? 01 <! Doctype html>
02
03
04 <meta charset = "UTF-8">
05 <title> sjax_0.1.js by snandy </title>
06 <script src ="Http://files.cnblogs.com/snandy/sjax_0.1.js> </script>
07
08 <body>
09 <p id = "p1" style = "background: gold;"> </p>
10 <input type = "button" value = "Get Name" onclick = "clk ()"/>
11 <script type = "text/javascript">
12 function clk (){
13 Sjax. load (
Http://files.cnblogs.com/snandy/jsonp.js,
15 function (){
16 document. getElementById (p1). innerHTML = Hi, + jsonp. name;
17}
18 );
19}
20 </script>
21 </body>
22
This html implements the simplest frontend and backend interaction function. Click the "Get Name" button to Get the name and display it on Section P.
The clk function calls the Sjax. load Method. S in Sjax indicates the script. The Ajax name used in my Ajax series is used here.
The request's background url is jsonp. js, which returns the following
View sourceprint? 1 jsonp = {name: jack };
Because it is a test, it is implemented in the simplest way. In fact, the request background does not need to be a js file. It can be any background language such as php or java. They may connect to the database for a series of business queries. In short, the final returned structure must be the variable jsonp, which is a js object. As for the complexity, no attention is required.
Okay. Try it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
