Problems existing in traditional websites

  • In the case of a slow network speed, the page takes a long time to load and users have to wait
  • After the form is submitted, if one item fails, you need to fill in all the forms again
  • A page is reloaded, wasting resources and increasing user waiting time

Ajax overview

Ajax: Ajax

Is a set of methods provided by the browser, can realize the page without refreshing the update data, improve the experience of browsing website applications. (Partially refresh the page when the user is browsing the web page)

Ajax application scenarios

  1. More data is pulled and loaded on the page
  2. There is no refresh page for list data
  3. Form items leave focus data validation
  4. Search box prompts text drop – down list

Ajax runtime environment

Ajax technology needs to run in the web environment to be effective, and the current course will use the server created by Node as the web server.

How Ajax works

In the traditional website application, it is by the browser itself to send requests to the server, by the browser itself to receive the server response to the data, because the browser in the request and response can not handle the user’s other operations, such as browsing pull the page. User experience is affected.

Ajax is designed to send requests to the server during browsing and update the data in response to the page without refreshing the page. This allows the browser to handle user actions instead of requests and responses.

Ajax sends requests and responses during the developer’s control, we can do load prompts to further improve the user experience.

Ajax implementation steps

  1. Creating Ajax objects
var xhr = new XMLHttpRequest();
Copy the code

XML- Server side transmission data format, now using JSON format, XML only do understand.

  1. Tell Ajax where the request is made and how
xhr.open('get', 'http://www.example.com');
Copy the code
  1. Send the request
xhr.send();
Copy the code

Since the request is affected by the speed of the network, the exact time can not be obtained directly after the send() method, we need to add an event handler for the onload event under the XHR object.

  1. Get the response data from the server to the client
xhr.onload = function () {
    console.log(xhr.responseText);
}
Copy the code

The data format of the server-side response

In a real project, the server-side will most likely take JSON objects as the format for the response data. When the client gets the response data, it concatenates the JSON data with the HTML string and displays the concatenated result on the page.

In the process of HTTP request and response, both request parameters and response contents, if they are object types, will eventually be converted into object strings for transmission.

Json.parse () // Converts JSON strings to JSON objectsCopy the code

Request parameter passing

Traditional web site form submission

<form method="get" action="http://www.example.com"> <input type="text" name="username"/> <input type="password" name="password"> </form> <! -- -- -- > http://www.example.com?username=zhangsan&password=123456Copy the code
  • GET request mode
xhr.open('get', 'http://www.example.com?name=zhangsan&age=20');
Copy the code
  • POST request mode
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') xhr.send('name=zhangsan&age=20');
Copy the code

The request message

The blocks of data that are passed during HTTP requests and responses are called messages. They contain the data to be transmitted and additional information in a specified format.

The format of the request parameters

  1. application/x-www-form-urlencoded
Name = zhangsan&age = 20 & sex = maleCopy the code
  1. application/json
{name: 'zhangsan', age: '20', sex: 'male '}Copy the code

Specifying the content-Type attribute as application/ JSON in the request header tells the server that the current request parameter is in JSON format.

Json.stringify () // Converts a JSON object to a JSON stringCopy the code

Note: GET requests cannot submit JSON object data format, and traditional web site form submission does not support JSON object data format.