Home > Developer > Web Develop
Recently studied the Jsonp, summarizes here
1, what is the homologous strategy? Cross-domain?
First, Jsonp is a means to solve cross-domain. Cross-domain is because browsers are satisfied with one Origin policy.
What is homologous:
URLs consist of protocols, domain names, ports, and paths, and if the protocol, domain name, and port of the two URLs are the same, they are homologous.
Homologous policy:
Browser's Origin policy, which restricts "document" or script from different sources, reads or sets some properties on the current document
Scripts loaded from one domain do not allow access to the document properties of another domain.
2. Ways to solve cross-domain problems
(1), Ajax directly request common files have no access to cross-domain issues, no matter you are static pages, dynamic Web pages, Web services, WCF, as long as the cross-domain request, is not allowed; but we also found that the Web page on the call JS file is not affected by whether cross-domain (not only that, We also found that all tags that have the attribute "src" have cross-domain capabilities, such as <script>, , <iframe>);
(2), so can judge, the current stage if you want to through the pure Web side (ActiveX control, Server Agent, belongs to the future of HTML5 WebSocket, etc.) access to data across domains is only one possibility, that is, on the remote server to try to load the data into the JS format of the file, For client invocation and further processing;
(3), it happens that we already know that there is a kind of pure character data format called JSON can be concise description of complex data, even better is the JSON is also JS native support, so in the client can almost arbitrary processing of this format of data;
(4), such a sub-solution is to be seen, the Web client by the same way as the call script to invoke the cross-domain server dynamically generated JS format files (typically JSON suffix), it is obvious that the server to dynamically generate JSON files, The goal is to load the data that the client needs.
(5), the client after the successful call to the JSON file, but also to obtain their own data, the rest is to do their own needs to deal with and show that the way to get remote data looks very much like Ajax, but in fact, it is not the same.
(6), in order to facilitate the use of data by the client, gradually formed an informal transport protocol, people call it Jsonp, one of the main points of the protocol is to allow users to pass a callback parameter to the server, The callback parameter is then used as the function name to wrap the JSON data when the server returns data, so that the client can customize its own function to automatically process the returned data.
3. Cross-Domain server
JSONP is implemented using the cross-domain capability of <script>, where SRC is the file directory under another domain, enabling cross-domain access.
First I on a server Apache on two ports 80 and 800,apache The default port is 80, just open 800 port, enter the/etc/httpd/conf/httpd.conf configuration file, the last paragraph of the comment is rewritten as follows:
1 <virtualhost *:800>2 ServerAdmin [email protected]host.example.com3 documentroot/var/www/web14 ServerName 101.200.175.86:8005 # errorlog logs/ Dummy-host.example.com-error_log6 # Customlog logs/dummy-host.example.com-access_log Common7 </VirtualHost>
Restart, open the Web page, url:800 can enter the new domain, the root directory of the Web page is www/web1/.
4. Examples of JSONP
Now we have two domains, create a new jsonp.html file under Port 800, create a new re.php file under Port 80, where the HTML file will invoke PHP files in other domains to implement a query fetch data function
Jsonp.html
1<!doctype html>234<meta charset= "UTF-8" >5<title>Document</title>6<script>7 varLocalhandler =function(data) {8 alert (DATA.A); //Returns the value of a in the background array 9 }Ten varurl = "Http://101.200.175.86/re.php?callback=localHandler"; One //Create a script tag, set its properties A varScript = document.createelement (' script '); -Script.setattribute (' src ', URL); - //Add the script tag to head, and the call starts thedocument.getElementsByTagName (' head ') [0].appendchild (script); -</script> - -<body> +<button id= "Getotherdomainthings" >1111111</button> - +</body> AParameters can be added to the URL
Http://flightQuery.com/jsonp/flightResult.aspx? code=ca1998&callback=flighthandler
Pass in PHP file, realize the function of retrieving
re.php
1<?PHP2 3 $callback=$_request[' Callback '];//request accepts both get and post4 5 $output=Array(' a ' = ' Apple ', ' b ' = ' Banana '));6 7 if($callback) {8 Header(' Content-type:text/javascript ');9 Echo $callback. ' ('. Json_encode ($output) . ‘);‘;//Json_encode method, object converted to JSONTen}Else { One Header(' Content-type:application/x-json '); A EchoJson_encode ($output); - } - the?> -~Results:
5. How to implement jquery
In jquery, the Jsonp method is integrated into Ajax, but Ajax and JSONP are completely different, Ajax is passed through XMLHttpRequest objects, JSONP is the use of <script> in various domains of delivery.
Example:
1<!doctype html>234<meta charset= "UTF-8" >5<title>Document</title>6<script typpe= "Text/javascript" src= "Jquery-2.1.1.js" ></script>78<body>9<script>Ten$(function(){ One $.ajax ({ AType: "Get", -URL: "http://101.200.175.86/re.php", -DataType: "Jsonp",//set to JSONP format, automatic format substitution function name and other functions are implemented theJSONP: "Callback",//The parameter name passed to the request handler or page to obtain the name of the JSONP callback function, equal to callback=? - //jsonpcallback: "Localhandler",//callback=? In the function? The value can not be written, Jqeury will automatically process -Successfunction(data) { - alert (DATA.A); + } - }) + }) A</script> at</body> -JSONP's study notes
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
