homologous

Same-origin concept: If the protocol, domain name, and port (port 80 by default) of two pages are the same, the two pages have the same source.

** Same-origin policy: ** is a security feature provided by browsers

The browser stipulates that the JavaScript of site A does not allow resource interaction with non-cognate site C. For example:

① Cookies, LocalStorage, and IndexedDB of non-same-origin web pages cannot be read

② DOM of non-homologous web pages cannot be accessed

③ Unable to send Ajax requests to non-same-origin addresses

Cross domain

Cross-domain: If one or more of the protocols, domain names, and ports of two urls are different, they are cross-domain

The root cause of cross-domain is that the same origin policy of the browser does not allow resource interaction between non-same origin urls

Browser interception of cross-domain requests

** Note: ** browsers allow cross-domain requests, but the data returned by cross-domain requests will be blocked by browsers and cannot be retrieved by the page

How are cross-domain data requests implemented

Nowadays, the two main solutions to achieve cross-domain data requests are JSONP (front-end solution) and CORS (back-end solution).

JSONP:Early appearance, good compatibility (compatible with low versions of IE). Is a temporary solution that front-end programmers are forced to come up with to solve cross-domain problems.disadvantagesisOnly supportGETRequested, not supportedPOSTThe request.

**CORS: ** is a late arrival, a W3C standard that is the ultimate solution for cross-domain Ajax requests. Support for GET and POST requests. The disadvantage is that it is not compatible with some older browsers

JSONP

JSONP (JSON with Padding) is a “usage mode” of JSON that can be used to solve the problem of cross-domain data access in mainstream browsers.

**JSONP is implemented as follows :** Requests the cross-domain data interface through the SRC attribute of the

Listing: Make an Ajax cross-domain request

1 <! DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, Initial-scale =1.0"> 7 <meta http-equiv=" x-UA-compatible "content=" IE =edge"> 8 <title>Document</title> 9 <script src="./lib/jquery.js"></script> 10 </head> 11 12 <body> 13 <script> 14 $.ajax({ 15 method: 'GET', 16 url: 'http://www.liulongbin.top:3006/api/jsonp', 17 data: { 18 name: 'zs', 19 age: 20 20 }, 21 success: function (res) { 22 console.log(res) 23 } 24 }) 25 </script> 26 </body> 27 28 </html>Copy the code

jQueryIn theJSONP

JQuery provides the $.ajax() function, which can initiate JSONP data requests in addition to real Ajax data requests, for example:

1 $.ajax({ 2 url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20', 3 / / if you want to use $. Ajax () launched the json request, Datatype: 'jsonp', 5 Success: function(res) {6 console.log(res) 7} 8})Copy the code

By default, JSONP requests with jQuery automatically carry a callback=jQueryxxx parameter, which is the name of a randomly generated callback function

Custom parameter and callback function name

If you want to customize the JSONP parameters and callback function names when making JSONP requests using jQuery, you can specify the following two parameters:

1 $.ajax({ 2 url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20', 3 dataType: 'jsonp', 4 // The name of the argument sent to the server, default is callback 5 jsonp: 'callback', 6 // The custom callback function name, default is jQueryxxx format 7 jsonpCallback: 'abc', 8 success: function(res) { 9 console.log(res) 10 } 11 })Copy the code

JSONP in jQuery

JSONP in jQuery also implements cross-domain data access via SRC attributes of

  • Dynamically appends a

  • After the JSONP request succeeds, dynamically remove the

The list is as follows:

1 <! DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, Initial-scale =1.0"> 7 <meta http-equiv=" x-UA-compatible "content=" IE =edge"> 8 <title>Document</title> 9 <script SRC ="./lib/jquery.js"></script> 10 </head> 11 12 <body> 13 <button ID ="btnJSONP"> </button> 14 <script> 15 $(function () { 16 $('#btnJSONP').on('click', function () { 17 $.ajax({ 18 url: 'http://liulongbin.top:3006/api/jsonp? Address = Beijing &location= ', 19 // The name of the parameter to be sent to the server. The default value is callback 20 dataType: 'jsonp', 21 // Custom callback function name, default jQueryxxx format 22 jsonpCallback: 'ABC ', 23 success: function (res) { 24 console.log(res) 25 } 26 }) 27 }) 28 }) 29 </script> 30 </body> 31 32 </html>Copy the code

Anti-shake & throttling

Anti – shake: If the event is triggered frequently, anti – shake can ensure that only the most trigger takes effect! The previous N triggers will be ignored!

Throttling: Throttling can reduce the frequency of event firing if the event is fired frequently, so throttling is selectively executing a portion of the event!

Throttle valve

Concept: Before each operation, check whether the throttle valve is empty

If the throttle valve is empty, the next operation can be performed. If the value is not empty, the next operation cannot be performed.

After the current operation is complete, the throttle valve must be reset to empty, indicating that the next operation can be performed.

Life is often seen as follows:

Whether the toilet of high-speed railway is occupied or not is controlled by the traffic light. The red light means occupied and the green light means available.

Assuming that it takes five minutes for everyone to go to the bathroom, the occupied bathroom cannot be used by anyone else within five minutes.

After the previous person has finished using the bathroom, the red light needs to be reset to green, indicating that the next person can use the bathroom.

Before the next person goes to the bathroom, they need to check whether the control light is green to see if they can go to the bathroom.

Display: follow the mouse angel movement (angel picture on the bottom of the code, if necessary can be downloaded)

1 <! DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, Initial-scale =1.0"> 7 <meta http-equiv=" x-UA-compatible "content=" IE =edge"> 8 <title>Document</title> 9 <script src="./lib/jquery.js"></script> 10 <style> 11 html, 12 body { 13 margin: 0; 14 padding: 0; 15 overflow: hidden; 16 } 17 18 #angel { 19 position: absolute; 20 } 21 </style> 22 </head> 23 24 <body> 25 <! <img SRC ="./angel.gif" Alt ="" id="angel" /> 27 28 <script> 29 $(function () {30 // 1. Var angel = $('#angel') $('#angel') Var timer = null 34 // 2. $(document). On ('mousemove', function (e) {36 // Step 3: Check whether the throttle valve is empty. If not, the interval between the last execution is less than 16 milliseconds. 37 if (timer) {return} 38 // 3. Set the image position 39 // Step 2: 40 timer = setTimeout(function () {41 $(angel).css('top', e.pagey + 'px').css('left', E.pagex + 'px') 42 console.log(' OK ') 43 // Empty timer throttle when mouse follow effect is set, 44 timer = NULL 45}, 16) 46 47}) 48}) 49 </script> 50 </body> 51 52 </ HTML >Copy the code