A summary of common methods for JavaScript cross-domain requests

First, Window.name

1, Server return

The code is as follows	Copy Code
<script>window.name= ' {' id ': ' 3″, ' name ': ' Leisure '} ';</script>

2, define an IFRAME, add onload event <iframe id= "iframe1″onload=" Iload "><iframe>

The code is as follows

Copy Code

<script type= "Text/javascript" > var load = false; function Iload () { if (load = = False) { Processing with the domain, the IFRAME will be reloaded again after the request document.getElementById (' iframe1′). Contentwindow.location = '/'; Load = true; } else { Get the content of the window.name, note that the same domain must be processed before access! var data = document.getElementById (' iframe1′). Contentwindow.name; alert (data); {' id ': ' 3″, ' name ': ' Leisure '} Load = false; } } </script>

3. Define a form, set target for the form as the ID of the IFRAME, and then submit the form

The code is as follows	Copy Code
<form action= "url" method= "POST" target= "iframe1″> <button type= "Submit" value= "Submit"/> </form>

Second, JSONP

Server returns

The code is as follows	Copy Code
Callback ({"id": "3″," name ":" Leisure "}); <script type= "Text/javascript" > function callback (data) { alert (data); } </script> <script type= "Text/javascript" src= "Http://www.example.com.cn/product.jsp?id=5&jsonp=callback" ></ Script>

Cases

The JSONP format that the PHP page returns should be like this:

The code is as follows	Copy Code
<?php echo $_get["callback"]. ' ( { Title: "The Principles of beautiful Web design, 2nd Edition", URL: "http://www.sitepoint.com/books/design2/", Author: "Jason Beaird", Publisher: "SitePoint", Price: { Currency: "USD", amount:39.95 } } ); ' ?>

The static HTML initiation request code can refer to the following:

The code is as follows

Copy Code

<script language= "javascript" src= "Your URL/zt/access_count/js/jquery-1.4.2.min.js" ></script> <script language= "javascript" src= "Your URL/zt/access_count/js/jquery.jsonp-2.1.4.min.js" ></script> <script type= "Text/javascript" > $ (document). Ready (function () { Insert_vote (); }) Function Insert_vote () {  var j = null;  $.ajax ({   type: ' Get ',   url: ' Your URL/zt/access_count/jsonp.php ',   datatype: ' Jsonp ',   jsonp: ' Callback ',    data:{"a": "Insert", "type": "AA", "Time": "BB", "id": "dd", "Allowvote": "CC"},   async:false, & Nbsp; success:function (data) {    j = data;    //alert ("1");    alert (J.title);   }  }) &NBSP }   function init () {  $.ajax ({     datatype: ' Jsonp ',   & Nbsp; data: ' id=10 ',   &NBSP;&NBSP;JSONP: ' Jsonp_callback ',     url: ' Your URL/zt/access _count/jsonp.php ',     success:function ()      {     & nbsp; //do stuff    alert (jsonp.respond);     },  }); } function Init2 () { $.ajax ({ Async:false, URL: ' Your URL/zt/access_count/jsonp.php ',//cross-domain URL Type: ' Get ', DataType: ' Jsonp ', JSONP: ' Jsoncallback ',//default callback Data: ' id=10 ',//Request timeout:5000, Beforesend:function () { Jsonp way This method is not triggered. The reason may be that datatype, if specified as JSONP, is no longer an AJAX event. }, Success:function (JSON) { Client jquery predefined callback functions that dynamically execute the callback function after successfully acquiring JSON data on a cross-domain server alert (json.respond.title); if (json.actionerrors.length!=0) { alert (json.actionerrors); } }, Complete:function (XMLHttpRequest, Textstatus) { }, Error:function (XHR) { Jsonp way This method is not triggered Request Error Handling Alert (Please check the correlation network condition for errors); } }); } </script>

Common methods:

The code is as follows

Copy Code

Initialize the data, the same cookie is counted once a minute of traffic function Init_count (pagetype, id) { var j = null; $.ajax ({ Type: ' Get ',///Use Get method to access background DataType: "Jsonp",//Return data in JSON format JSONP: "Callback", URL: "http://app2.zhnews.net/zt/access_count/manage.php",//background address to access data:{"OPP": "Main", "PageType":p Agetype, "id": ID}, Async:false, Success:function (data) { alert (data.total); $ (' #pc_1 '). HTML (msg.total); $.each (data, function (I, v) { var tmp = V.record.split (":"); var month_view = tmp[tmp.length-1]; $ ("label[id=pc_" +v.page_id+ "]"). HTML (v.total); $ ("label[id=pcm_" +v.page_id+ "]"). HTML (V.week); }) } }) }

Third, Jquery.getjson

JSON is a lightweight data interchange format. The reason JSON is fascinating to JavaScript developers is that JSON itself is an object in JavaScript

First we define the specification of the interface, just like this:

http://your website/jsonp/ticker?symbol=ibm&amp;callback=showprice

symbol is the request condition, callback is the callback function name.

In the paging file, we use the support of jquery:

Server returns JSON format data test ({"id": "3″," name ":" Leisure "});

The test function name is defined in the callback parameter

The code is as follows	Copy Code
$.getjson (url + "? callback=?", data, function (data) { }

Cases

The code is as follows	Copy Code
JQuery JSONP Support var url = "http://your url/api/suggest.php?symbol=ibm&callback=?"; Jquery.getjson (URL, function (data) {alert ("Symbol: + Data.symbol +", Price: "+ Data.price"); });

Notice callback=? This parameter must be brought on, and jquery will automatically generate a function name to replace this question mark! Jquery.getjson is actually implemented in a JSONP way.

Iv. Flash cross-domain server add crossdomain.xml

code is as follows	copy code
http:// Www.example.com.cn/crossdomain.xml <?xml version= "1.0″?> <cross-domain-policy> < Allow-access-from domain= "*.another.com.cn"/> </cross-domain-policy>