JS cross-Domain and solutions

1. What is a cross-domain

We often use Ajax on the page to request access to data from other servers, where there are cross-domain issues for the client.

Cross-domain issues are caused by the same-origin policy in JavaScript language security restrictions.

In simple terms, the same origin policy refers to a script that can read only the properties of windows and documents from the same source, where the same source refers to a combination of host names, protocols, and port numbers.

For example:

same domain name, different port

URL	Description	whether to allow communication
http://www.a.com/a.js http://www.a.com /b.js	under the same domain name	allow
http://www.a.com/lab/a.js http://www.a.com/script/b.js	different folders under the same domain name	allow
http://www.a.com:8000/a.js http://www.a.com/b.js	does not allow
http://www.a.com/a.js https://www.a.com/b.js	same domain name, different protocol /td>	not allowed
http://www.a.com/a.js http://70.32.92.74/b.js	domain name and domain name corresponding IP	Do not allow
http://www.a.com/a.js http://script.a.com/b.js	primary domain same, subdomain different	not allowed
http://www.a.com/a.js http://a.com/b.js	same domain name, different level two domain name (ibid.)	not allowed (cookies are not allowed in this case Q)
http://www.cnblogs.com/a.js http://www.a.com/b.js	different domain names	do not allow

2. Principle of implementation

In the HTML DOM, a script tag is a cross-domain access to the data on the server. Therefore, you can specify the SRC attribute of the script as a cross-domain URL for cross-domain access.

For example:

This type of access is not possible. But the following is a good way to do it.

<script src= "http://192.168.0.5/Web/web1.aspx" type= "Text/javascript" ></script>

There is a requirement for the returned data, that is, the data returned by the server cannot be simple as {"Name": "Zhangsan"}

If this JSON string is returned, there is no way to reference the string. Therefore, the value to be returned must be var json={"name": "Zhangsan"}, or JSON ({"name": " Zhangsan "})

In order to make the program not error, we must also establish a JSON function.

3. Solution

Programme I

Server-side:

        void Page_Load (object sender, EventArgs e)        {            string result = "callback ({\" name\ ": \" zhangsan\ ", \" Date\ ": \" 2012-12-03\ "})";            Response.Clear ();            Response.Write (result);            Response.End ();        }  

Client:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en ""Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">http://www.w3.org/1999/xhtml ">Text/javascript "> var result = null; Window.onload = function () {var script = document.createelement ("script"); script.type = "text/javasc Ript "; SCRIPT.SRC = "http://192.168.0.101/ExampleBusinessApplication.Web/web2.aspx"; var head = document.getElementsByTagName ("head") [0]; Head.insertbefore (script, head.firstchild);}; function callback (data) {result = data;} function B_click () {alert (result.name);} </script>button" value= "clickme!" onclick= "B_click();"/></body>

Scenario two, complete with jquery

Through the Jsonp of jquery. Using this approach, there are requirements for the server side.

The server side is as follows:

        void Page_Load (object sender, EventArgs e)        {            string callback = request.querystring["jsoncallback" ];            string result = Callback + "({\" name\ ": \" zhangsan\ ", \" date\ ": \" 2012-12-03\ "})"; Response.Clear (); Response.Write (Result); Response.End (); }

Client:

$.ajax ({
AsyncFalse
URL: "http://192.168.0.5/Web/web1.aspx ",
Type: "GET ",
DataType: ' Jsonp ',
Jsonp the value of the custom, if using Jsoncallback, then the server side, to return a jsoncallback value corresponding to the object.
JSONP: ' Jsoncallback ',
To pass the parameter, do not pass the argument, also must write on
DataNull
timeout:5000,
Return JSON type
ContentType: "Application/json;utf-8 ",
The object returned by the server segment contains the Name,data property.
Successfunction (Result) {
                     alert (Result.date);
               },
                 Error: function (JQXHR, Textstatus, Errorthrown) {
                     alert (Textstatus);
               }
           });

In fact, when we execute this JS, JS sends a request to the server:

Http://192.168.0.5/web /web1.aspx?jsoncallback=jsonp1354505244726&_=1354505244742

The server also returns the following object:

 jsonp1354506338864 ({"name": "zhangsan", "date ":" 2012-12-03 "})     

The requirements for cross-domain sample data are implemented at this time.