1: Interface
The interface is just a button and a div used to display the data returned by the server
2: js implements Ajax
Note: I am creating the XMLHttpRequest object here, and I am not using the compatibility writing method. In practice, compatibility writing is required.
Step 7 to complete Step 8, if you need to process the data, process the data.
3: The data in the background is data in json format, which is an array.
4: Effects
Clicking the button will have the following effect, and the page will not refresh.
Summarize:
Ajax: A technology that allows the browser to communicate with the server without refreshing the entire page. It is not a new technology, but an integration of several technologies.
The traditional web model: the client sends a request to the server, the server returns the entire page to the client, and so on.
In the Ajax model: data is transferred independently between the client and the server, the server no longer returns the entire page to the client.
The readyState property represents the current state of the Ajax request. Its value is represented by a number.
0: The open method has not been called yet.
1: Loading. The open method has been called, but the send method has not been called
2: It has been loaded. The send method is called, the request has started
3: Interacting. The server is sending a response.
4: Done. The response is sent.
The readystatechange event is fired every time the value of the readyState property changes
In the XMLHttpRequest object, the status codes sent by the server are stored in the status attribute.
By comparing this value with 200 or 304, you can be sure whether the server sent a successful response.
404: page not found (not found)
403: Forbidden (forbidden)
500: Internal service error
200: everything is normal (ok)
304: not modified
The format of interactive data can be: html ordinary text json xml
html, json, normal text: they are all transmitted as text
html, json, ordinary text data: obtained through the responseText property
xml type data: obtained through the responseXML attribute