How does JavaScript implement cross-origin requests?

What is a cross-origin request?

A simple understanding is to send a request to a server file that is not in the same domain name. This is an example. For example, if baidu.com sends a request to phpernote.com, the two domain names are different, so this is cross-origin. For the sake of security, this is not allowed. In addition, it should be noted that requests sent between different subdomain names, different ports of the same domain name, or different protocols of the same domain name are also considered as cross-domain requests. Basically, they are classified as the following types:

(1) http://www.baidu.com sends requests to http://www.phpernote.com

(2) http://www.phpernote.com sends requests to http://image.phpernote.com

(3) http://www.baidu.com: 8000 send requests to http://www.phpernote.com

(4) http://www.phpernote.com sends requests to https://www.phpernote.com

(5) The http://www.phpernote.com sends a request to http: // 112.65.242.67 (assuming that the IP address corresponding to the domain name www.phpernote.com is 112.65.242.67)

The above five cases are considered cross-origin requests.

When will cross-origin requests be used?

Sometimes we encounter this cross-origin request operation when using Javascript For Ajax operations.

Why cannot I directly implement cross-origin requests using javascript?

For security reasons, the browser does not allow Javascript requests to cross-origin resources due to the restrictions of the javacript same-origin policy.

How can I solve the problem that javascript cannot implement cross-origin requests?

The solution used in this article is to use FlyJSONP to implement cross-origin requests. FlyJSONP is a lightweight JavaScript class library, also known as the JSON plug-in. The total size after compression is about 3 kb, which does not need the support of other frameworks.

FlyJSONP address: http://alotaiba.github.com/FlyJSONP/

So how can I use the FlyJSONP class library to implement cross-origin requests?
 
(1) first load the Javascript script FlyJSONP, namely: <script language = "javascript" src = "http://www.phpernote.com/flyjsonp.min.js"> </script>
 
(2) initialize the instance of FlyJSONP. The debug parameter can be set to true or false, that is, FlyJSONP. init ({debug: true}). This parameter indicates whether debugging information is enabled. The parameter value is true or false;
 
(3) The next step is to request data using the get or post method. The specific instance code is as follows:

// FlyJSONP implements cross-origin GETfunction getData () {FlyJSONP. init ({debug: true}); // initialize the instance of FlyJSONP. The debug parameter can be set to true or falseFlyJSONP. get ({url: 'http: // sending (data) {// send the request to the console successfully. log (data) ;}, error: function (errorMsg) {// sending request failed console. log (errorMsg) ;}}) ;}// FlyJSONP implements cross-origin POSTfunction postData () {FlyJSONP. init ({debug: true}); // initialize the instance of FlyJSONP. The debug parameter can be set to true or falseFlyJSONP. post ({url: 'http: // encrypt (data) {alert (data );}});}

Note: When the server outputs data to the client, the output must be a json string; otherwise, the client cannot receive the data.

Articles you may be interested in

• JQuery obtains the height and width of the visible area of the browser window, and the height of the scroll bar.
• Php defense against XSS and ajax cross-origin attacks
• Php uses curl to implement get and post requests
• Summary of php post request Simulation Methods
• Php sends the GET and POST requests separately.
• Jquery obtains the index number of the current element in the Peer element.
• Solution for IE6 to garbled characters when sending an odd Chinese Character request via get
• Php sends a get request.