Three main methods of ajax processing cross-origin in jquery _ jquery-js tutorial

This article mainly introduces three methods of ajax processing cross-origin in jquery. Due to the influence of the same-origin JavaScript policy, JavaScript can only access documents under the same domain name. To implement cross-origin, you can use the following methods:

I. Cross-origin processing method:

1. Proxy

2. XHR2

XMLHTTPREQUEST Level2 (and XHR2) provided in html5. However, ie10 or lower does not support

You only need to fill in the response header on the server:

Header ("Access-Control-Allow-Origin: *");/* indicates that all domains are acceptable. */header ("Access-Control-Allow-Methods: GET, POST ");

3. jsonP

Principle:

Ajax itself cannot cross-origin,
Cross-origin is implemented by generating a script tag. Because the src attribute of the script tag has no cross-origin restrictions.

In fact, after the ype: 'jsonp' is set, the $. ajax method has nothing to do with ajax XmlHttpRequest. Instead, the jsonp protocol is used. JSONP is an unofficial protocol that allows the server to integrate Script tags to return to the client and implement cross-origin access through javascript callback.

Cross-origin ajax Syntax:

(The Rest Of The write method is the same as that of non-Cross-origin ):

For example

/* The current URL is localhost: 3000 */js Code $. ajax ({type: "get", url: "http: // localhost: 3000/showAll",/* url: Write an exotic request address */dataType: "jsonp ", /* Add ype */jsonpCallback: "cb",/* set a callback function. The name can be obtained at will, just like the name in the following function */success: function () {... });/* On an exotic server, */app. js app. get ('/showall', students. showAll);/* This is the same as that for non-Cross-origin operations * // * in the showAll function of a foreign server, */var db = require (". /database "); exports. showAll = function (req, res) {/** set the response header to allow ajax cross-origin access **/res. setHeader ("Access-Control-Allow-Origin", "*");/* indicates that all requests from other countries are acceptable. */res. setHeader ("Access-Control-Allow-Methods", "GET, POST"); var con = db. getCon (); con. query ("select * from t_students", function (error, rows) {if (error) {console. log ("Database error:" + error);} else {/* Note that the returned result is jsonP's callback function name + Data */res. send ("cb (" + JSON. stringify (r) + ")");}});}

Ii. Cross-origin ajax access and JQuery Methods

Cross-origin of JS, I think many programmers still think that JS cannot be cross-origin. In fact, this is a wrong idea. Many people find a solution on the Internet, there are many articles that teach you how to use IFRAME. Is it so complicated? In fact, it is very simple. If you use JQUERY, a getjson method will be done, and a line of code will be done.

Paste the method below.

// Cross-domain (across all Domain Names) $. getJSON ("http://user.hnce.com.cn/getregion.aspx? Id = 0 & jsoncallback =? ", Function (json) {// the data format of the remote request page is required :? (Json_data) // For example ://? ([{"_ Name": "Hunan Province", "_ regionId": 134 },{ "_ name": "Beijing", "_ regionId": 143}]) alert (json [0]. _ name) ;}); $. getJSON ("http://user.hnce.com.cn/getregion.aspx? Id = 0 & jsoncallback =? ", Function (json) {// the data format of the remote request page is required :? (Json_data) // For example ://? ([{"_ Name": "Hunan Province", "_ regionId": 134 },{ "_ name": "Beijing", "_ regionId": 143}]) alert (json [0]. _ name );});

Note: getregion. in aspx, when outputting JSON data, you must use Request. queryString ["jsoncallback"] puts the obtained content before the returned JSON data. If the actually obtained value is 42342348, the returned value is 42342348 ([{"_ name ": "Hunan Province", "_ regionId": 134 },{ "_ name": "Beijing", "_ regionId": 143}])

Because the cross-origin principle of getJSON is? Randomly change the method name and return the executed method to achieve cross-origin response.

The following is a real example of cross-origin execution: