Detailed JS cross-domain principle and 2 solutions _javascript tips

1. What is cross-domain

We often use Ajax on the page to request access to data from other servers, where there is a cross-domain problem with the client.

Cross-domain problems are caused by a homology policy in JavaScript language security restrictions.

In simple terms, the homology policy refers to a script that reads 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:

2. Principle of realization

In the HTML DOM, a script label can access data on the server across a domain. Therefore, you can specify that the SRC attribute of the script is a Cross-domain URL, enabling Cross-domain access.

For example:

This type of access is not possible. But the following methods are acceptable.

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

If we return this JSON string, we have no way to reference this string. So, the value that is required to return must be the var json={"name": "Zhangsan"}, or JSON ({"Name": "Zhangsan"})

In order for the program not to complain, we must also create a json function .

3. The solution

Programme I
Server side:

protected 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 ">
 
 

Scenario Two: using jquery to complete

Through the Jsonp of jquery. Using this method, there is a requirement on the server side.

The server side is as follows:

  protected void Page_Load (object sender, EventArgs e)
  {
    string callback = request.querystring["Jsoncallback"];< c3/>string result = callback + "({\" name\ ": \" zhangsan\ ", \" date\ ": \" 2012-12-03\ "})";

    Response.Clear ();
    Response.Write (result);
    Response.End ();
  }

Client:

$.ajax ({ 
        async:false, 
        URL: "http://192.168.0.5/Web/web1.aspx", 
        type: "Get", 
        dataType: ' Jsonp ', 
        //jsonp Value Customization, if using Jsoncallback, then the server side, to return a jsoncallback value corresponding to the object. 
        JSONP: ' Jsoncallback ', 
        ///parameters to be passed, when there are no arguments, be sure to write 
         data:null, 
        timeout:5000, 
        //return JSON type 
         ContentType: "Application/json;utf-8", 
        //The object returned by the server segment contains the Name,data property. 
        Success:function (Result) { 
          alert (result.date); 
        }, 
        error:function (JQXHR, Textstatus, Errorthrown) { C17/>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 objects:

jsonp1354506338864 ({"Name": "Zhangsan", "date": "2012-12-03"})

At this time, the requirement of cross domain model data is realized.

The above is about JS Cross-domain principle and 2 kinds of solution Introduction, I hope to learn from the Cross-domain knowledge point of help, we can also combine other related articles to study.