Deep understanding JSONP Addressing cross-domain access

in the project we do take full advantage of Jsonp cross-domain This feature, completed a simple single sign-on function and authority Unified authentication control, the realization of the idea is not complex with a variety of single-sign-on products can be said negligible compared to each has various benefits, each has its advantages, Depending on the development experience of our own or project managers, the degree of understanding of the various frameworks often determines the overall structure of the current development project.

This is not a new thing produced in a vacuum, just a feature of JS is not mentioned before we did not notice that the original JS can also cross the domain, we have learned about the things we understand is not deep enough, some superficial, JS most in the browser run to complete a variety of dynamic effects, JS developers should initially consider the characteristics of the browser, in order to not be restricted by the browser to the JS assigned to this sacred duty, browser restrictions is a security policy inside a strategy, called homologous strategy.

Homologous policy

Homologous means that the protocol, the domain name, the port is the same, as long as there is a different and so is not the same origin of the access address, a browser on a page is not the same origin of the address to obtain data, when each page load the browser will automatically determine whether the data obtained from a source address, If it is not blocked by the browser.

Like the security of the Conference, only allow a certain type of people with a pass, others will not let into the block outside, and JS has a feature can cross security through the special way into the non-blocking.

Resolve the same-origin policy issue Jsonp
JSONP (JSON with Padding) is a "usage pattern" of data format JSON that allows Web pages to obtain data from other domains.

The reason why it is called JSONP can be understood as the main function and purpose is to obtain JSON format data from other domains, which is its main application, and other functions are not used for the time being.

Principle

The principle is also easy to understand, it can cross-domain is the use of the script tag cross-domain capabilities, just imagine? Have you ever thought about the introduction of a common JS file, how it is loaded into the page to go why its src attribute to write an address can be elsewhere to load the JS file on the page, tested this SRC attribute can be filled with any valid address, Even files that are not in the same project directory structure are available.

For example this link;

<span style= "FONT-SIZE:14PX;" ><script type= "Text/javascript" src= "_js/jquery-2.0.0.min.js" ></script></span>

It is just a reference, loaded in the file when a lot of such function functions () {} ..., the same as JSONP is a pattern, it returns the JS function is not the same as the above link, but the function called to do the callback function should be defined in advance, Inside the function is the JSON data returned. Let's look at an example:

<span style= "FONT-SIZE:14PX;" ><script type= "Text/javascript" >function Getjson (JSON) {alert ("Get json= by src attribute" +json.result); </script><script type= "Text/javascript" src= "http://localhost:28080/application1/login.do?method= Logininterface&callback=getjson&name=lilongsheng "></script></span>

This is my own write a JS tag, its SRC address is another Tomcat deployed in the Application1 application's login interface address, and the above call is in another tomcat in the Application2 JSP page, belong to a different source call, And look at the Application1 interface class

<span style= "FONT-SIZE:14PX;" > Public    actionforward logininterface (actionmapping mapping, actionform form,            httpservletrequest request, HttpServletResponse response)    {    /** determines if the login succeeds */boolean IsLogin = false;//Gets the user name and password from the URL    String name= Request.getparameter ("name");    String Pwd=request.getparameter ("pwd"); try {//callback function name string callbackfunname = Request.getparameter ("callback");// JSON data wrapped with JSONP string, Callbackfunname + "({\" result\ ": \" "+ name +" \ "})"; SYSTEM.OUT.PRINTLN (data);//Return to interface print (data,request,response);} catch (Exception e) {e.printstacktrace ();} return null;    } </span>

The returned result is Gejson ({"Result": "Lilongsheng"}), which returns a JS code that automatically executes the Getjson function, while the contents of the curly brace {} are passed to the function as arguments, completing the cross-domain invocation.

It can be seen from the above that the script tag can be used to obtain JSON data from a place that has no origin.

Let's take a look at how jquery is used, simply by adding a parameter to the method, and feeling a lot simpler, because the framework already encapsulates some of the details in the call relationship, as long as we set the parameters it supports cross-domain access, called as follows:

<span style= "FONT-SIZE:14PX;" >function Getjsonp () {var name=$ ("#name"). Val (), Var pwd=$ ("#pwd"). Val (); $.ajax ({url: "http://localhost:28080/ Application1/login.do?method=logininterface&name= "+name+" &pwd= "+pwd,type:" Post ", DataType:" Jsonp ", Jsonp : ' Callback ', success:function (data) {alert (data.result);},error:function () {Alert ("Network connection failed! ");}});} </span>

In addition to jquery and other frameworks such as EXT support this feature, they are based on the JavaScript base Class library encapsulated, so all have JS features.

About the application of Jsonp has recorded a episode of video, the following is

Jsonp Video Demo: Http://pan.baidu.com/s/1dDIjnTR

Deep understanding JSONP Addressing cross-domain access