Cross-domain issues in a detailed

1. What is called cross-domain.

Basically, different protocols, domain names, ports are different domains, the details are as follows:

URL description whether to allow the pass-through Letter Http://www.a.com/a.js
Http://www.a.com/b.js allowed under the same domain name
Http://www.a.com/lab/a.js
Http://www.a.com/script/b.js different folders under the same domain name allow
Http://www.a.com:8000/a.js
Http://www.a.com/b.js the same domain name, different ports are not allowed
Http://www.a.com/a.js
Https://www.a.com/b.js the same domain name, different protocols not allowed
Http://www.a.com/a.js
Http://70.32.92.74/b.js domain and domain name corresponding IP is not allowed
Http://www.a.com/a.js
Http://script.a.com/b.js primary domain, different subdomains are not allowed
Http://www.a.com/a.js
Http://a.com/b.js the same domain name, different level two domain names (IBID.) are not allowed (cookies are not allowed in this case)
Http://www.cnblogs.com/a.js

Http://www.a.com/b.js different domain names are not allowed

Source: http://www.qdfuns.com/notes/17203/516a7995fc37af52832a6ea038ded262.html

2.JS Troubleshooting cross-domain issues

Objective

Because of the nature of the development model of Sencha Touch 2, it basically determines that its native data interaction can be achieved almost exclusively through Ajax.

Of course, by calling the powerful PhoneGap plug-in and then packaging, you can achieve 100% socket communication and local database functions, or through the HTML5 WebSocket can also be implemented with the server communication and service-side push function, but both of these methods have their limitations, The former needs phonegap support, the latter requires that the user device must support WebSocket, so it is not considered a ST2 native solution, only the original Ajax.

When it comes to Ajax, it inevitably faces two problems, the first of which is the format in which AJAX exchanges data. The second is how cross-domain requirements are addressed. Both problems now have different solutions, such as data can be described by a custom string or XML, and cross-domain can be resolved by a server-side proxy.

But the best-known or preferred solution so far is to use JSON to spread data across domains by JSONP. And that's what this article is going to tell you.

JSON (JavaScript Object Notation) and Jsonp (JSON with Padding) have only one letter difference, but they're not the same thing at all: JSON is a data interchange format, And Jsonp is a kind of unofficial cross-domain data interaction protocol that is created by the ingenuity of the developers. We use the latest spy war film to make an analogy, JSON is used by the underground to write and exchange information "code", and Jsonp is the message written with the signal to his comrades using the connection method. See, No. One is the format of describing information, and the other is the method agreed by both parties to the information delivery.

Since we are talking casually, we are not going to use dogma to tell, but focus on helping developers understand whether they should choose to use and how to use them.

What is JSON

In a nutshell, JSON is a text-based data exchange, or a data description format, and you should choose whether or not he should first focus on the advantages it has.

The advantages of JSON:

1, based on plain text, cross-platform transmission is extremely simple;

2, JavaScript native support, background language almost all support;

3, lightweight data format, occupies very few characters, especially suitable for internet transmission;

4, readability is strong, although less than the XML so at a glance, but in a reasonable order after indentation is easy to identify;

5, easy to write and analysis, of course, if you want to know the data structure;

The drawback of JSON is of course, but it doesn't seem to matter to the author, so it's not a separate explanation.

The format or rule of JSON:

JSON can describe a data structure in a very simple way, and XML can do it all, so it's completely pitches in cross-platform terms.

1. JSON has only two data type descriptors, curly braces {} and square brackets [], the remaining English colons: is the map, comma, is the delimiter, the English double quotation mark "" is the definition.

2, curly braces {} are used to describe a set of "different types of unordered key-value pairs" (each key-value pair can be interpreted as an attribute description of OOP), and square brackets [] are used to describe a set of "ordered sets of data of the same type" (which corresponds to an array of OOP).

3, if there are more than one of the two sets of children, it is separated by commas.

4. The key value pairs are separated by a colon: and the key name is suggested with the English double quotation mark "" to facilitate the parsing of different languages.

5, JSON internal data type is nothing more than string, number, Boolean, date, null so several, the string must be enclosed in double quotation marks, the rest are not, the date type is special, here does not expand the narrative, but it is recommended if the client is not sorted by date function requirements, It would be nice to pass the date and time directly as a string, which would save a lot of trouble.

JSON instance:

Describe a person var man = {"Name": "Bob", "age": +, "Company": "IBM", "Engineer": true}//Get this person's information var personage = person.
 
Age; Describe several people var members = [{' Name ': ' Bob ', ' age ': +, ' company ': ' IBM ', ' Engineer ': TR
    UE}, {"Name": "John", "age": +, "Company": "Oracle", "Engineer": false},
 
{"Name": "Henry", "Age": $, "Company": "Microsoft", "Engineer": false}] Read where John's company name is var johnscompany = members[1].
 
Company;
    Describe a meeting var conference = {"conference": "Future Marketing", "Date": "2012-6-1", "Address": "Beijing", "Members": [{"Name": "Bob", "age": +, "Company": "IBM", "En
            Gineer ": true}, {" Name ":" John "," age ": +," Company ":" Oracle ", "Engineer": false}, {"Name":" Henry "," Age ": $," Company ":" Microsoft "," Engineer ": false}]}/ /Read attendee Henry whether engineer var Henryisanengineer = conference. MEMBERS[2]. Engineer;

About JSON, that's all, more details, please consult the information in the development process in-depth study.

What is Jsonp

Let's talk about how JSONP is produced:

In fact, there are a lot of jsonp on the Internet, but the uniform, and foggy, for many people just contact to understand some difficulties, small not only, try to use their own way to explain the problem, see if it helps.

1, a well-known problem, Ajax directly request ordinary file There is no access to cross-domain issues, no matter you are static pages, dynamic Web pages, Web services, WCF, as long as the cross-domain requests, are not allowed;

2, but we also found that the Web page when the JS file is not affected by whether or not cross-domain impact (not only that, we also found that the "src" attribute of the label has the ability to cross-domain, such as <script>, , <iframe >);

3, so can judge, the current stage if you want to through the pure Web side (ActiveX control, Server Agent, belongs to the future of HTML5 WebSocket, etc.) access to data across domains is only one possibility, that is, on the remote server to try to load the data into the JS format of the file, For client invocation and further processing;

4, it happens that we already know that there is a kind of pure character data format called JSON can be concise description of complex data, even better is the JSON is also supported by JS native, so in the client can almost arbitrary processing of this format of data;

5, such a solution is to be seen, the Web client by the same way as the call script to invoke the cross-domain server dynamically generated JS format files (usually JSON suffix), it is obvious that the server to dynamically generate JSON files, The goal is to load the data that the client needs.

6, the client in the JSON file after the successful call, but also to obtain their own required data, the rest is to do their own needs to deal with and show that the way to get remote data looks very much like Ajax, but in fact, it is not the same.

7, in order to facilitate the use of data by the client, gradually formed an informal transport protocol, people call it Jsonp, one of the main points of the protocol is to allow users to pass a callback parameter to the server, The callback parameter is then used as the function name to wrap the JSON data when the server returns data, so that the client can customize its own function to automatically process the returned data.

If there is some ambiguity about how the callback parameter is used, there are specific examples to explain later.

JSONP Client-specific implementations:

No matter jquery or ExtJS, or other support JSONP framework, they do the work behind the scenes are the same, I would like to gradually explain the JSONP in the client implementation:

1. We know that even if the code in the cross-domain JS file (which is, of course, conforms to the Web Scripting Security Policy), the Web page can be executed unconditionally.

The remote server remoteserver.com root directory has a remote.js file code as follows:

Alert (' I am a remote file ');

There is a jsonp.html page code below the local server localserver.com:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
 
There is no doubt that the page will pop up a prompt form that shows cross-domain invocation success.

2. Now we define a function on the jsonp.html page and then pass in the data in the remote Remote.js to make the call.

The jsonp.html page code is as follows: