Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "how to understand Ajax cross-domain requests". In the actual case operation process, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

homologous strategy restriction

The same-origin policy prevents scripts loaded from one domain from getting or manipulating document attributes on another domain. That is, the domain of the requested URL must be the same as the domain of the current Web page. This means that browsers segregate content from different sources to prevent manipulation between them. This browser policy is old and has existed since Netscape Navigator version 2.0. -- From developerWorks

The so-called homology refers to the same domain name, protocol and port.

A roar from the ground

This article explains how to use Ajax to achieve cross-domain requests, then know the "homology policy", you can solve a lot of questions: "Why my Ajax can't load data!" "" Why would the browser console give me such a nice code error! "

Example 1

Let's start with an error demonstration.

Client code:

The copy code is as follows:

//client requests script on another machine using getJSON method

$.getJSON("http://172.22.22.120/new/ajax.php",function(json){

alert(json.website);

});

Server PHP script code:

The copy code is as follows:

Firefox error message:

According to the concept of same-origin policy, localhost and 172.22.22.120 are from different domain names, so cross-domain requests are naturally rejected by browsers.

JSONP

JSONP (JSON with Padding) is a usage pattern for JSON that allows web pages to request data from other domains. Another novel approach to this problem is cross-source resource sharing. Due to the same-origin policy, web pages located at server1.example.com generally cannot communicate with servers other than server1.example.com, with HTML elements being an exception. Using this open strategy of elements, web pages can get JSON data dynamically generated from other sources, and this usage pattern is called JSONP. The data captured with JSONP is not JSON, but arbitrary JavaScript, executed with JavaScript interpreter instead of JSON parser. -- From Wikipedia

How should I understand this? I personally think so, with cross-domain request data, cross-domain server returns a piece of [JavaScript code], yes, you are right, not json format data, JavaScript code, so, this code is executed by JavaScript interpreter. The above example is more intuitive:

Example 2

Client code:

The copy code is as follows:

//This is a callback method

function cb(data){

alert(data.website);

}

Server PHP script code:

The copy code is as follows:

What happens to the browser, I won't say, of course, is that the cb method is called:

So, again with the jsonp concept, the cross-domain server returns the json data to the client as parameters along with the callback function, taking advantage of the same-origin policy.

JQuery Support for JSONP

This article will talk about cross-domain requests for ajax. I said so much earlier. Of course, I will talk about the topic below.

As of version 1.2, jQuery has native support for JSONP callbacks. If you specify a JSONP callback, you can load JSON data in another domain. The syntax of the callback is: url? callback=?。jQuery automatically? Replace with the name of the build function to call.

Example 3:$.getJSON method cross-domain request

Example 4:$.ajax method custom callback method

Example 3

Client code:

The copy code is as follows:

//client requests script on another machine using getJSON method

//browser generates a random callback parameter

$.getJSON("http://172.22.22.120/new/ajax_jsonp.php? callback=? ",function(json){

alert(json.website);

});

Server PHP script code:

The copy code is as follows:

$.getJSON is easy to use, but you just can't specify callback functions.

Example 4

Client code:

The copy code is as follows:

$.ajax({

type : "GET",

url : "http://172.22.22.120/new/ajax_jsonp.php",

dataType : "jsonp", //data format specified as jsonp

jsonp: "callback", //service point gets callback method from this key

jsonpCallback:"cb", //Specify callback method

success : function(json){

},

});

//callback method

function cb(data){

alert(data.website);

}

The server-side PHP script code is the same as in Example 3.

"How to understand Ajax cross-domain request" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.