Cross-Domain Solutions

Introduction to Ajax:

Ajax is the abbreviation for Asynchronou Javascript +xml. Ajax communication is independent of data. Ajax can request additional data to the server without uninstalling the page, the core of which is the XMLHttpRequest object (XHR), XHR to the server to send the request and the server corresponding to provide a smooth interface, can be asynchronous to obtain more information. By default, XHR can only access resources in the same domain as the page that contains it.

Cors Introduction:

CORS (Corss-origin Resource sharing, cross-origin resource sharing) defines how the browser and the server should communicate when accessing cross-origin resources. Basic idea: Use a custom HTTP header to let the browser communicate with the server to determine whether the request or response succeeded or failed. For example, a simple get or post sends a request that has no custom header and attaches an additional Origin header to the request when it is sent: origin:http:// Nczonline.net, the server processes the request and queries the value of the Access-control-allow-origin, and responds if there is a match, otherwise rejects the request.

here are three common cross-domain solutions :

One, CORS (cross-source resource sharing)

1.IE to Cors support--xdr (xdomainrequest)

The use of XDR objects in IE implements Cors, which is used similar to the XHR object and is also called the Open () and send () methods after instantiation. The difference is that the XDR's open () method has only two parameters: the request type and the URL.

xhr=New  xdomainrequest (); Xhr.open (Method,url); Xhr.send ();

2. Other browsers support cors--native XHR

Most browsers ' XHR objects natively support cors, simply passing in the URL of the response in the open () method.

3. Cross-browser support for Cors

In both cases, cross-browser cors can be achieved. The simplest way to check whether XHR supports cors is to check the Withcredentials property, and then combine to check if the Xdomainrequest object exists.

functionCreatecorsrequest (method,url) {//Create a Xhr object        varXHR =NewXMLHttpRequest (); //Start Request        if("Withcredentials"inchxhr) {Xhr.open (Method,url,true); }Else if(typeofxdomainrequest!= ' undefined ') {XHR=Newxdomainrequest ();                  Xhr.open (Method,url); }Else{XHR=NULL; }                         returnXHR; }

4. Example

Here is a simple example of http://www.jsdemo.com/demoajax/demo3.htm cross-domain request data in http://www.othersite.com/weather.ashx. This is a locally built two test site.

WEATHER.ASHX first detects the source page and then decides whether to return to the Access-control-allow-origin header.

void ProcessRequest (HttpContext context) {        = "Text/plain";         = Context. request.servervariables["Http_referer"];         if (!string. IsNullOrEmpty (referrer) && referrer. IndexOf ("http://www.jsdemo.com") >-1)        {            "access-control-allow-origin", "http:// Www.jsdemo.com ");        }        " {\ "weather\": \ "clear \", \ "wind\": \ "Breeze \"} " );    }

Demo3.htm cross-domain requests through cors, and the results are parsed and displayed on the page.

var xhr=createcorsrequest ("Get", "http://www.othersite.com/weather.ashx");         Xhr.onload=function() {              if(xhr.status==200| | xhr.status==304) {                   var result=xhr.responsetext;                    var json=json.parse (result);                    var obj= document.getElementById ("result");                   obj.innerhtml= "weather: +json.weather+"; Wind: "+json.wind;                   }              }      Xhr.send ();

Second, the image ping

tags are not cross-domain constrained, we can use image tags to achieve a simple, one-way cross-domain communication. Image pings are typically used to track user clicks and ad exposure times.

Features: Image cross-domain requests can only be used for one-way communication between the browser and the server, it can only send a GET request, and cannot access the server's response content.

Let's take a look at a small example. demo4.htm triggers cross-domain requests when the client clicks a link.

<a href= "javascript:void (0); onclick=" click () "> Click me </a>    <script>         function  Click () {              var img=New  Image ();              Img.onload=function() {                   alert (' done ');                   }                   Img.src= "http://www.othersite.com/demo4.ashx?r=" +math.random ();              }     </script>

The server makes a simple count and sends back a pixel-sized image. The client receives the result and the popup prompts "done".

int count=0void  ProcessRequest (HttpContext context) {        = "Text/plain" ;        Count++        ; = "Image/gif" ;         New System.Drawing. Bitmap (1, 1);        Image. Save (context. Response.outputstream, System.Drawing.Imaging. ImageFormat. GIF);        Context. Response.Write (Count);    }

Iii. JSONP cross-domain requests

1.JSONP structure

JSONP is a common cross-domain request scheme, and the common JSONP request format is as follows:

Http://www.othersite.com/demo5.ashx?callback=showResult

The response result looks like a JSON structure wrapped in a function call:

Showresult ({"Weather": "Clear", "wind": "Breeze"})

The JSONP result consists of two parts: the callback function and the data. A callback function is typically a function that is specified at the time of the request, and is called on the page when the response completes, and the data is, of course, the result of the JSON data returned by the request.

2. Initiating the request:

The JSONP principle is implemented using dynamic <script> tags, where <script> elements and tags are not constrained by the loading of other domains. By creating a Script object, and setting its Src property to the URL address of the cross-domain request. When the request is complete, the JSONP response is loaded into the page and executed immediately.

<script>     function  showresult (JSON) {                         var obj= document.getElementById (" Result ");         obj.innerhtml= "weather: +json.weather+"; Wind: "+json.wind;     }      var script=document.createelement ("script");     Script.src= "Http://www.othersite.com/demo5.ashx?callback=showResult";     Document.body.insertBefore (script,document.body.firstchild); </script>

Reference Address: http://www.cnblogs.com/janes/p/3968781.html

Cross-Domain Solutions