AJAX:
Asynchronous JavaScript and XML.Techniques that now allow browsers to communicate with the server without refreshing the current page are called Ajax. (B/S: front-end and back-end separation)
Example scenarios:
When search engines such as Baidu type out xxs, the input box will automatically pop up relevant information, web pages will not refresh when the map is enlarged or reduced, etc.
Principle:
When interacting with the server using ajax, the information sent and received is in a special data format, not the entire Web page program, and therefore does not need to be refreshed.That is, data is transmitted independently between the client and the server.The server no longer returns the entire page, but only the available information.
Send Ajax request steps:
1. Call the open method on behalf of the ready-to-send request.
2. If the request type is POST, set the response header.
3. Send http request instructions and pass parameters.
4. Declare callback functions for request state changes to receive server response information.
readyState: Represents the current state of an Ajax request with the following values:
0 means uninitialized.The open method has not been called yet
1 means loading.The open method has been called, but the send method has not yet been called
2 means the load is complete.send has been called.Request has started
3 represents interaction.
4 represents completion.Response sent.(Generally, you only need to judge this state).
Status: Response status code sent by the server, common status codes and their meanings:
404 Page not found
403 Forbidden access
500 internal service error
200 Everything is OK
304 was not modified
Note: Comparing XHR.status with 200 ensures that the server has sent a successful response
The contents of the json file:
"{\"user\":\"zhangsan\",\"age\":19,\"date\":\"2019-09-23T02:55:11.945Z\",\"money\":[1,2,3]}"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// XMLHttpRequest in js is similar to request, urlib in python
// XHR is an abbreviation of the XMLHttpRequest object, encapsulated in a window object, encapsulating the properties and methods for sending AJAX requests and receiving responses.
// If the XMLHttpRequest object exists, set the value of xhr to a new instance of the object.If it doesn't exist, check to see if an instance of ActiveObject exists
//Yes, if yes, assign xhr a new instance of Microsoft XMLHTTP
function getXHR(){
if(window.XMLHttpRequest){
return new window.XMLHttpRequest()
}else{
// Solve Microsoft's Special Case
new Window.ActiveXObject('Microsoft.XMLHTTP')
}
}
//Asynchronous Request Data Function
function jsonData(){
var xhr = getXHR() //Localization, conflict prevention
xhr.open('GET','data.json')
//xhr.setRequestHeader()
xhr.send(null)
xhr.onreadystatechange=function(){
if(xhr.readyState ==4 && xhr.status==200){
//Get the jaon string returned by the server
resp = xhr.responseText
htmlText = ''
//Parse the string as a json object, twice because JSON.parase(resp) is a string type
jsonObj = JSON.parse(JSON.parse(resp))
//console.log(typeof(jsonObj))//view type
//Organization Display html Format
htmlText = '<tr><td>' + jsonObj.user +'</td></tr>'
document.getElementById('userData').innerHTML = htmlText
}
}
}
// function setInnerHTML(id,text){
// document.getElementById(id).innerHTML = htmlText
// }
</script>
</head>
<body>
<input type="button" value="Load" onclick="jsonData()"/>
<table>
<thead>
<tr><td>User name</td></tr>
</thead>
<tbody id='userData'> </tbody>
</table>
</body>
</html>