cross-domain ajax
Because the browser same origin policy prohibits another ajax request data on the domain name from a domain name.
The browser's same-origin policy is a security restriction on JavaScript implementation.
The so-called homologous refers to the domain, protocol, ports are the same.
URL components:
http ---- Hypertext Transfer Protocol
image.baidu.com
---- domain
80 ---- port
/ Search / detail ---- Resource Directory
ct = 503316480 & z = undefined ---- queries sent to the server data field
#header ---- anchor
Determining whether the request is a cross-domain as follows:
http://local.com/index.html
request
http://native.com/index.php
- across domains
https://www.abc.com/index.html
request
http://www.abc.com/index.php
- across domains
http://www.abc.com:8888/index.html
request
http://www.abc.com:8889/index.php
- across domains
http://www.abc.com/item/index.html
request
http://www.abc.com/index.php
- homologous, non-cross-domain
localhost request 127.0.0.1 - across domains
Several mainstream cross-domain solution:
The first: proxy requests through the service side language. Such as PHP, server-side language php there is no cross-domain restrictions.
- allow the server to get content to other sites and then return to the page.
The second: jsonp cross-domain
- jsonp cross-domain capability is the use of cross-domain script tag request for resources
- Now called jsonp, obviously the purpose or json, but cross-domain acquisition
- use js create a script tag, the json url to assign attributes scr script and this script into a page, the browser to allow cross-domain access to resources
- callback is a callback method existent pages, the parameter is conceivable json
- To comply with the agreed service callback method is generally end with a callback or cb
- Note: jsonp only to get request
Third: CORS Cross-Origin Resource Sharing
- CORS is a W3C standard, stands for "Cross-Origin Resource Sharing" (Cross-origin resource sharing)
- It allows the browser to cross the source server, XMLHttpRequest request issued to overcome the limitations of using AJAX only homologous
- CORS entire communication process, the browser is done automatically, without user involvement
- For developers, there is no difference AJAX communication CORS communicate with homologous, exactly as it was
- communication is the key to achieving CORS server, as long as the server implements CORS interface, you can communicate across source
CORS is not difficult to achieve, just to do some settings to the server: If
<?php
header ( "Access-Control-Allow-Origin: *"); // allow any source
Note: IE10 does not support the following CORS
Fourth: nginx proxy cross-domain
Promise - "Commitment"
Promise is ES6 asynchronous programming a solution, more reasonable and more powerful than traditional solutions (callback functions and events).
Promise, simply is a container, which holds a asynchronous operation has not been completed and is expected to complete in the future.
Promise is a constructor, to create a Promise object.
Promise object represents an asynchronous operation, there are three states:
Pending (ongoing)
fulfilled (has succeeded)
rejected (failed)
Promise object changes state, only two possibilities:
From pending becomes fulfilled
From pending changes to rejected
Once the status change, it will not change any time can get this result.
With Promise object, the process may be asynchronous operation to synchronous operation expressed, to avoid deeply nested callback function.
var p = new Promise(function(resolve, reject) {
// do something ...
IF (/ * * asynchronous operation success /) {
resolve(value);
} else {
reject(error);
}
});
Promise constructor takes a function as a parameter, two parameters are the function resolve and reject.
resolve and reject the two functions are provided by the JavaScript engine, you do not have to deploy.
Function is to resolve the role of the state of the object from Promise "in progress" to "success" (i.e., changed from pending resolved), upon successful call asynchronous operation, and the result of the asynchronous operation, to pass out as a parameter.
Function is to reject the role of the state of the object from Promise "in progress" to "failed" (i.e., changed from pending Rejected), invoked when an asynchronous operation fails, and the asynchronous operation errors may be, as a parameter to pass out .
p.then(function(value) {
// success
}, function(error) {
// failure Optional
});
The method then Promise example:
The first parameter is the callback function resolved state
The second parameter (optional) is the callback rejected state
Method returns a new instance Promise
The method of Example catch Promise: specify a callback function for when an error occurs.
Promise.all may be multiple instances Promise Promise packaged into a new instance.
1. It accepts an array as a parameter.
2. Promise Array objects may be, may also be other values, only state Promise will wait for change.
3. When all the sub Promise are completed, the completion Promise, the return value is an array of all the values.
4. If there is any failure, the Promise fails, the return value is the result of a failure of the sub Promise.
Promise.all([p1,p2,p3])
1.Promise transformation function nesting
2.Promise transformation ajax nested dependent
Learn fetch and axios
fetch: AJAX is known as a substitute, it is based on the promise of design.
ajax not fetch further packaging, but native js, code structure much simpler than ajax.
axios: is based on the promise of a HTTP library, you can use the browser and node.js in.
vue official recommendation of the HTTP request repository.