Insert picture description here

JS-communication, AJAX

1. Communication

1) What is the same-origin policy and restrictions

The same origin policy restricts how documents or scripts loaded from one source interact with resources from another source. This is a key security mechanism used to isolate potentially malicious files.

*Cookie, LocalStorage and IndexDB cannot be obtained
*DOM cannot be obtained
*AJAX request cannot be sent

2) How to communicate between front and back ends

*Ajax (used under the same origin)
*WebSocket (without restriction on the same origin policy)
*CORS (supporting the same origin, cross-domain communication)

3) How to create Ajax

*XMLHttpRequest object workflow
*Compatibility processing
*Event triggering conditions
*Event trigger sequence
(1) Create an XMLHttpRequestobject, that is, create an asynchronous call object;
(2) Create a new HTTPrequest, and specify the HTTPrequest method, URLAnd verification information;
(3) Set HTTPthe function that responds to the request status change;
(4) Send the HTTPrequest;
(5) Obtain the data returned by the asynchronous call;
(6) Use JavaScript and DOM to achieve partial refresh.

var xhr = new XMLHttpRequest()
xhr.open("GET","/api",false)  //true。false是否异步执行
xhr.onreadystatechange = function() {
    
    
    if (xhr.readyState == 4) {
    
    
        if(xhr.status == 200) {
    
    
                alert(xhr.responseText)
        }
    }
}
xhr.send(null)

4) Several ways of cross-domain communication

(5 of them must be mentioned, others will ask the principle)

JSONP

Hash (Hash change does not change the page, search change will change the page)

postMessage

WebSocket

CORS

二、 AJAX

1 knowledge points

1.1 XMLHttpRequest

(Ie: how to create AJAX)

1.2 Status code description

readyState (state value):
0-(uninitialized) the send() method has not been called
1-(loading) the send() method has been called, and the request is being sent
2-(loading complete) the send() method has been executed All corresponding content received
3-(Interactive) Responsive content is being parsed
4-(Completed) Responsive content is parsed, ready to be called on the client

status (status code):
2**-indicates that the request was successfully processed. For example, 200
3**-Need to redirect, the browser jumps directly to
4**-Client request error. E.g. 404
5**-server error

1.3 Cross-domain

1.3.1 What is cross-domain

The browser has a same-origin policy and does not allow ajax to access other domain interfaces

http://www.yourname.com/page1.html
http://m.imooc.com/course/ajaxcourserecom?cid=459
跨域条件：协议、域名、端口，有一个不同就算跨域
（http默认端口80，https默认端口43）

Three tags that can cross-domain:
There are three tags that allow cross-domain loading of resources
img src=***>
link href=***>
script src=***>

The scene of three tags:
img> used for statistics, statistics website may be other domains
link> script> CDN can be used, CDN is also other domains
script> can be used for JSONP

Cross-domain notice:
All cross-domain requests must be approved by the information provider
. If you can get it without permission, it is a loophole in the browser's same-origin policy

1.3.2 JSONP

The principle of JSONP implementation:
Utilize the feature that the src or href attribute is not restricted by the same-origin policy ,
dynamically create script tags, assign remote interfaces to src to obtain data,
and receive and process data through callback functions to achieve cross-domain goals.

var script = document.createElement('script');
script.type = 'text/javascript';

// 传参并指定回调执行函数为onBack
script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);

// 回调执行函数
function onBack(res) {
    
    
    alert(JSON.stringify(res));
}

1.3.3 Set the http header on the server side

Insert picture description here

2 Q&A

Topic:
*Manually write an ajax without relying on third-party libraries
*Several cross-domain implementation methods

2.1 Manually write an ajax without relying on third-party libraries

(Same as "One")

2.2 Several cross-domain implementation methods

(Same as "One")