Talk about jquery and cross-domain access



As the product continues to evolve, applications need to be deployed to different servers, and when a request is suddenly executed, the browser does not respond, realizing that we also need cross-domain access.

Internet search " Crossdomain "can find a lot of things, you can most of the level is rotten, patchwork, unintelligible." For cross-domain access from principle to application, one of the best-written articles is theCRoss-domain Communications with JSONP, part 1:combine JSONP andjquery to Quickly build powerful mashups, take some time to read it, there is no doubt about it.

Do not want to do the translation of bricks, comb a few things I feel important.

Because of the browser's own policy, asynchronous requests to sites with different domains from the page source can cause security errors. There are generally three ways to break this limit: Visit the site where the page is acting, and use the IFrame to access different domains of the site; the rest is now the mainstream JSONP . ( JSON with Padding ).

JSONPis definitely the name of a pit daddy, and its essence is the use of dynamic insertionJavaScriptthe principle (dynamicjavascript Insertion). Although the browser blocks asynchronous requests across domains, theHTML Headerin the<script>and the<link>tags can refer to files from any source, we can dynamically create a<script>the label that will it'ssrcset the server address of the asynchronous request so that it can be requested across domains. but in this mode, the browser takes over the request and processes the response result. For browsers, it is only throughGETmethod attempts to download the contents of the requested address and considers this to be aJSfiles, usingJavaScriptengine to execute the code. So if you want to get the results of the response, then you have to think in the download, the first response should be encapsulated intoJSONform, the request initiator also needs to provide a callback function that, when downloaded, executes the callback function as a parameter in response to the result.

combined with the whole process, IJSONPIt is understood that: useJSONfills the response result. JQueryin theAjaxmethod toJSONPhave good support, even without special statements,JQueryinternal based on the request address automatically judge, if it is cross-domain on the startJSONP, if this domain is a regularAJAX. But because the return result of a cross-domain request is not regularJSON, so not only the client has a special method, but also the server needs toJSONPDedicated support: The server needs to know what the callback function is after the download is complete, and it needs to execute the callback functionJavaScriptThe statement is written to the response stream.

This specialized support JSONP The service side is called " JSONP Service "The vast majority of documents that can be searched on the Internet are all about how the client calls, not the service side, so it took a lot of effort to find the way."

The process of cross-domain requests is shown in a simple example below.

Service Side ( ASP. NET MVC 3.0 )

    [HttpGet]    Public ActionResult UserPath (Guid id,string callback)    {        String UserPath = createuserdir (ID);        String output = String.Format ("{0} (\" {1}\ ");", callback, UserPath);        This. Response.Write (output);        return new Httpstatuscoderesult (+);    }

first, the service side should support HttpGet method, the callback function should be one of the requested parameters (as in the example above Callback ), The response flow is a compliance JavaScript a string of syntax specifications , which must contain a call statement for the callback function. The response here is simple, just a string.

Client ( JQuery 1.9 )

    var url = "Http://server2/Pronunciation/UserPath?id=" + StudentID + "&callback=?";    $.getjson (URL, null, function (result) {        runtime. Addrecordrootpath (result);    });

clients can use the JQuery provided by any AJAX related functions, Getjson simple enough, so recommend. The example uses an anonymous function as a callback function, so "callback=? " "If the callback is a defined function, it should be" callback=<functionname> ".

The method is a bit around, and if you understand the principle, it's simple.

Talk about jquery and cross-domain access