Ajax, Es6 interview questions

1. What is the principle of Ajax

• Implementation principle:
  • At its heart is the XMLHttpRequest object
  • Internet Explorer uses ActiveXObject
• Common attributes:
  • The onreadystatechange property
    • The function that holds the server response

xhr.onreadystatechange=function(){
    // We can do something here
}
Copy the code

• ReadyState attribute
  • Stores the status information of the server response. The onReadyStatechange function is executed whenever readyState changes, and the readyState property may have values
  • Add a judgment statement to the onreadyStatechange function to test whether the response was successful

xhr.onreadystatechange=function(){
      // We can do something here
      if(xhr.readyState===4) {// Get the data from the service's response}}Copy the code

• responseText
  • You can get the data returned by the server via the responseText property

xhr.onreadystatechange=function(){
    // We can do something here
    if(xhr.readyState===4) {// Get the data from the service's response
        document.myForm.time.value= xhr.reponseText
    }
}
Copy the code

• Other attributes
  
  
• Common methods:
  • Open () method
    • Open () takes three arguments,The first parameter defines the method used to send the requestSecond parameterSpecify the URL of the server-side script,, the third parameterSpecifies that the current request should be processed asynchronously

xhr.opne('GET',test.php,true) // true represents asynchrony
Copy the code

• The send () method
  • The send() method sends the request to the server, assuming the HTML file is in the same directory as the PHP file, and the code looks like this

xhr.send(null)
Copy the code

• Other methods
• 
• Send an Ajax-get request
  • Create an XMLHttpRequest object
  • Setting the request Mode
  • Call the callback function
  • Send the request

// 1- Create an object
let xhr =new  XMLHttpRequest()
var url = `http://location:8080/ajaxGet/login`
// 2- Sets request parameters
xhr.opne('GET',url,true)
// 3- Send the request
xhr.send()
// 4- Register events
xhr.onreadystatechange=function(){
    if(xhr.readyState===4 && xhr.status===200) {var obj = document.getElementById('id')
            obj.innerHTML= xml.responseText 
    } else{
            alert('Ajax server returns error')}}Copy the code

• Send an Ajax-POST request
  • To send a POST request, add a request header; otherwise, an error message will be displayed

// 1- Create an object
let xhr =new  XMLHttpRequest()
var url = `http://location:8080/ajaxGet/login`
//2 -post requests must include a request header otherwise an error will be reported
xhr.setRequestHeader("Content-type"."application/x-www-form-urlencoded");
// 3- Sets request parameters
xhr.open('PSOT',url,true)
// 4- Send the request
xhr.send()
// 5- Register event
xhr.onreadystatechange=function(){
    if(xhr.readyState===4 && xhr.status === 200) {// The response succeeded. What do I do
            var obj = document.getElementById('id')
            obj.innerHTML= xml.responseText 
    }  else{
            alert('Ajax server returns error')}}Copy the code

Explain JavaScript’s same-origin policy

• meaning
  • The same origin policy means that the following three must be unified. If one is different, cross-domain will occur
    • The domain name
    • agreement
    • port
• purpose
  • In order to ensure user information security and prevent malicious websites from stealing data, the same-origin policy assumes that A user logs in to website A and then browses other websites, but website B can obtain the cookies of website A, and then user information will be leaked
• limit
  • Cookie,LocalStorage, and indexDB cannot be obtained
  • DOM not available
  • Ajax requests cannot be sent
• To evade restrictions
  • cookie
    • Cookie is a piece of information written by the server into the browser. Only web pages with the same origin can share cookies. However, the first-level domain names of two web pages are the same, but the second-level domain names are differentdocument.domainSharing Cookie Information
    • Two pages with different sources: unable to get each other’s DOM, useIframeandwindow.opneMethod to open a window
  • LocalStorage
    • The postMessage() method allows cross-window communication, regardless of whether the two are homologous or not. The method has two parameters: the specific information content of parameter 1 and the source (protocol + domain + port) of the receiving window of parameter 2 can also be set to * to indicate that the message is sent to all Windows without restriction
  • ajax
    • jsonp
    • cors

What is synchronous and what is asynchronous

• Single thread
  • JavaScript is a single-threaded language, so,JavaScript can only do one thing at a time, and single threading means that if there are multiple tasks at the same time, those tasks need to be queued before the next one can be executedBecause javaScript is a single-threaded execution, handle multiple tasks with time, queue, all tasks, a task has been completed before the next task to perform, if on a task execution time is very long (such as ajax request), then it will cause the next task waiting, seriously affect the user experience, so just can haveSynchronization taskandAsynchronous tasks

// Synchronize the code
function fun1() {
  console.log(1);
}
function fun2() {
  console.log(2);
}
fun1();
fun2();
/ / output
1
2
// If fun1 is an Ajax operation that takes some time, do we need to wait for fun1() to complete before executing fun2()?
Copy the code

• 
• Synchronization task
  • A synchronous task is,The next task can be executed only after the previous task is completedWhen we open the site, the rendering process of the site, such as the rendering of elements, is a synchronization task

// Synchronize the code
var num = 20;
console.log(num) // Output the result immediately

// Synchronize the code
var arr = [12.3224.34]
for(var i =0; i<arr.length; i++){console.log(arr[i])
}
// Synchronization code......... Much more, except callback(), Ajax and setTimeout, and the. Then () methods in Proimse, can be considered synchronized code
Copy the code

• Asynchronous tasks
  • An asynchronous task is,A task that does not enter the main thread but enters the task queue will enter the main thread only if the task queue informs the main thread that an asynchronous task is ready to executeWhen we open a website, loading images, loading music, for example, is an asynchronous task

function fun1() {
  console.log(1);
}
function fun2() {
  console.log(2);
}
function fun3() {
  console.log(3);
}
fun1();
setTimeout(function(){
  fun2();
},0);
fun3();
 
/ / output
1
3
2
Copy the code

• How asynchrony works (EventLoop is the same thing)
  • How is asynchrony implemented in javaScriptCallbacks and event loopsAsynchronous tasks do not enter the main thread, but enter it firstAsynchronous task queueThe task queue is essentially a followFirst in, last out, last in, first outThe data structure, which is also an event queue, such as a file read operation, is an asynchronous task that is first added toAsynchronous task queueWhen I/O completes, it will be in the task queue,Add an event, indicating that the asynchronous task has finished and can enter the execution stack. However, the main thread may not be free for processing at this time. The main thread will read the asynchronous task after it finishes processing other tasksAsynchronous task queueIn the code, a single thread from the task queue, the process is a continuous loop, each time the stack is emptied, will be inTask queueIf there is no task, wait until there is a new task, if there is a task, then it will be taken out for execution, this cycle process, is calledEvent loop
  • In summary
    • All synchronization tasks are executed on the main thread as a stack
    • In addition to the main thread, there is a task queue in which an event is placed whenever an asynchronous task has a result
    • Once all asynchronous tasks in the execution stack are completed, the system reads the task queue to check whether there are asynchronous tasks. After finishing the waiting state, the system enters the execution stack and starts execution
    • The main thread repeats all three steps

7. What are the common HTTP status codes and what do they mean

• Status code type
  • 1XX: Indicating message – indicating that the request has been received and processing continues
  • 2xx: Success: The request is successfully received, understood, or accepted
  • 3xx: Redirect – Further action must be taken to complete the request
  • 4XX: Client error – The request has a syntax error or the request cannot be implemented
  • 5xx: Server side error — the server failed to fulfill a valid request
• Common status codes and meanings

401 Unauthorized // The Request is Unauthorized. This status code must be used with the www-Authenticate header field using 403 Forbidden // The server received the request but refused to provide the service 404 Not Found // The requested resource did Not exist, eg: An incorrect URL is entered. 500 Internal Server Error // An unexpected Error occurs on the Server. 503 Server Unavailable // The Server cannot process requests from the clientCopy the code

• First handshake: When establishing a connection, the client sends a SYN packet (SYN = J) to the server and enters the SYN_SENT state, waiting for confirmation from the server. SYN: Synchronize Sequence Numbers
• Second handshake: After receiving a SYN packet, the server must acknowledge the client’s SYN (ACK = J +1) and send a SYN packet (ACK = K). In this case, the server enters the SYN_RECV state
• Third handshake: After receiving the SYN+ACK packet from the server, the client sends an ACK packet (ACK = K +1) to the server. After the packet is sent, the client and the server enter the ESTABLISHED state (TCP connection is successful) and complete the three-way handshake

1. Array expansion

• Extended operator
• Arrar.from()
• Arrar.of()
• Instance copyWithin ()
• Instances find() and findIndex()
• Examples of the fill ()
• Values instance entrens keys () () ()
• Instance inculecs ()
• Instance flat (), flatMap ()

Obejct extension & Method

• Property and method abbreviations
  • Attribute shorthand

let obj = 'is object';
let objName = {obj}
objName // {obj:'is object'}

/ / equivalent to the
const objName = {obj:obj}
/ / * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * line * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
function fn (x,y){
    return {x+y}
}
/ / is equivalent to
function fn (x,y){
    return {x:x,y:y}
}
fn(1.2) // Object {x:1,x:2}
Copy the code

• Methods shorthand

const Person={
    sayHi(){
        console.log('I'm the sayHi method in the Person object')}}/ / equivalent to the
const Person={
    sayHi:function(){
        console.log('I'm the sayHi method in the Person object')}}/ / * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * line * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
let url = 'htpps://www.baidu.com'
const ToUrl ={
    url, 
    erros: () {console.log('url is errors')}}/ / equivalent to the
let url = 'htpps://www.baidu.com'
const ToUrl ={
     // Equivalent to :url :url
    url,
    Erros :function() {}
    erros: () {console.log('url is errors')}}Copy the code

- Application Scenario 1(' This can be done in commonJS ')Copy the code

let ms = {};

function getItem (key) {
  return key in ms ? ms[key] : null;
}

function setItem (key, value) {
  ms[key] = value;
}

function clear () {
  ms = {};
}

module.exports = { getItem, setItem, clear };
/ / is equivalent to
module.exports = {
  getItem: getItem,
  setItem: setItem,
  clear: clear
};
Copy the code

• Application Scenario 2(Property getters and property setters can also be used in this way)

const cart = {
  _wheels: 4,

  get wheels () {
    return this._wheels;
  },

  set wheels (value) {
    if (value < this._wheels) {
      throw new Error('Too small! ');
    }
    this._wheels = value; }}Copy the code

• Notes (You cannot use abbreviations in constructors)

const obj = {
  f() {
    this.foo = 'bar'; }};new obj.f() / / an error
Foo. F cannot be used as a constructor because f is shorthand for object methods
Copy the code

• Property enumerable
  • Each attribute has a description of the object, this property is used to control the behavior of, obj. GeyOwnPropertyDescriptor method, can obtain the attribute description of object, describe eumerable attribute of the object, called an enumerable, if this property is false, means that certain actions will ignore the current sex

let obj = { foo : 123}
Object.getOwnPropertyDescriptor(obj, 'foo')
//  {
// value: 123,
// writable: true,
// enumerable: true,
// configurable: true
/ /}
Copy the code

• Property traversal
  • for in
    • for... inLoop over the object’s own and inherited enumerable properties (excluding Symbol properties)
  • Object.keys
    • Object.keysReturns an array containing the key names of all the enumerable attributes (excluding the Symbol attribute) of the object itself (excluding inheritance)
  • Object.getOwnPropertyNames(obj)
    • Object.getOwnPropertyNamesReturns an array containing the key names of all properties of the object itself (excluding the Symbol property, but including non-enumerable properties)
  • Object.getOwnPropertySymbols(obj)
    • Object.getOwnPropertySymbolsReturns an array containing the key names of all the Symbol properties of the object itself
  • Reflect.ownKeys(obj)
    • Reflect.ownKeysReturns an array containing all of the object’s own (not inherited) key names, whether they are symbols or strings or enumerable
  • Matters needing attention:
    • All five methods follow the same sequence rules for traversal of attributes
    • First, all numeric keys are iterated, sorted in ascending order
    • Next, all the string keys are iterated in ascending order by the time they were added
    • Finally, all Symbol keys are iterated in ascending order of time they were added
• Object extension operator
  • Object extension operator, used to fetch all traversable properties of the parameter object and copy them into the current object

let obj = { a: { b: 1}};let { ...x } = obj;
obj.a.b = 2;
x.a.b / / 2
Copy the code

• Since arrays are special objects, extension operators for objects can also be used for arrays

letfoo = {... ['a'.'b'.'c']}
foo
// {0: "a", 1: "b", 2: "c"}
Copy the code

• If the extension operator is followed by an empty object, it has no effect

{... {},a: 1}
// { a: 1 }
Copy the code

• If the extension operator is not followed by an object, it is automatically converted to an object

// the same as {... Object(1)}
{..1.} / / {}
Copy the code

• In the code above, the extended operator is followed by the integer 1, which is automatically converted to a numeric type, and returns an empty object because the object does not have the property

// the same as {... Object(true)}{... true}/ / {}

// the same as {... Object(undefined)}{... undefined}/ / {}

// the same as {... Object(null)}{... null}/ / {}
Copy the code

• If the operator is followed by a string, it is automatically converted to an array-like object, so it does not return an empty object

{...'hello'}
// {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}
Copy the code

• Object extension operators are equivalent to usingObject.assign()methods

letaClone = { ... a };/ / is equivalent to
let aClone = Object.assign({}, a);
// If you want to clone an object completely and copy its prototype properties, you can use the following methods
/ / write one
const clone1 = {
  __proto__: Object.getPrototypeOf(obj), ... obj };/ / write two
const clone2 = Object.assign(
  Object.create(Object.getPrototypeOf(obj)),
  obj
);

/ / writing three
const clone3 = Object.create(
  Object.getPrototypeOf(obj),
  Object.getOwnPropertyDescriptors(obj)
)
Copy the code

5. Set and Map data structures

• set
  • Similar to the form of an array, but with unique members and no duplicate values, a Set itself is a constructor that generates a Set data structure

const s = new Set(a); [2.3.5.4.5.2.2].forEach(x= > s.add(x));

for (let i of s) {
  console.log(i);
}
// 2 3 5 4
Copy the code

• Traversal operations that can be performed
  • Set.prototype.keys(): returns a traverser for key names
  • Set.prototype.values(): returns a traverser for key values
  • Set.prototype.entries(): returns a traverser for key-value pairs
  • Set.prototype.forEach(): Iterates through each member using the callback function
• map
  • It is essentially a combination of key-value pairs (Hash structures), but traditionally only strings are used as keys, which imposes significant limitations on how they can be used

const data = {};
const element = document.getElementById('myDiv');

data[element] = 'metadata';
data['[object HTMLDivElement]'] // "metadata"
Copy the code

• Traversal methods
  • The Map structure natively provides three traverser generating functions and one traversal method
  • Map.prototype.keys(): returns a traverser for key names
  • Map.prototype.values(): returns a traverser for key values
  • Map.prototype.entries(): returns a traverser for all members
  • Map.prototype.forEach(): Traverses all Map members