Problems Existing in Traditional Websites
- Long page load times on slow internet
- After the form is submitted, if one of the contents does not meet the requirements, all form contents need to be resubmitted
- When the content of the form is large, it will cause waste of resources and increase user waiting time
about ajax
ajax : It is a set of methods provided by the browser, which can update the data without refreshing the page, improve the user experience of the webpage and reduce the waste of resources on the server side. Application scenarios
of ajax : pull and load more data on the page, and update the list without attributes , the form item leaves the focus validation data, and the search automatic matching under the search box, etc.
ajax operating environment
Ajax technology needs to be run and then used in the website environment, so we need to prepare a server in advance (this is implemented by the express framework)
The modules used:
path express
the code is as follows
// app.js
const express = require('express');
// 用于处理路径
const path= require('path');
// 处理路径
const app = express();
// 托管
app.use(express.static(path.join(__dirname, 'public')));
// 监听端口并返回
app.listen(3000,function(){
console.log('服务器启动成功 http://localhost:3000/');
})
The directory tree is shown in the figure
html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>hello word</h1>
</body>
</html>
Everyone will find out why I created index.html?
Because: index.html in the website directory is equivalent to the way after entering the door. After opening the website, if there is no specified page, the browser will automatically find index.html.
After creating it, run app.js and open it, and http://localhost:3000/it will be found automatically index.html and used the
ajax operation principle
After the page is distributed after the request, if the html gets the data again, it will cause the website to refresh, which seriously affects the user's use and server resource consumption. Therefore, if it needs to be realized, it is necessary to ask others to help obtain the data. The data is realized by the ajax help
page Acquisition, the implementation does not need to implement a global refresh
The steps of ajax implementation
create ajax object
There is a constructor ( ) in JavaScript XMLHttpRequest();to use it to create an ajax object
var xhr = new XMLHttpRequest();
xml: data format (currently most data formats are in json format)
http: network request
Request: request
Determine the request address and request method
Use the open method to implement the request. The first parameter is the request method, the second parameter is the request address, and the third one will be mentioned later. Generally, only with these two parameters can the request be made.
xhr.open('GET', 'http://localhost:8080/', true);
send request
Now that we have set up the request address and request method, although we have set the parameters, the current situation is that we have installed nuclear warheads on Dongfeng Express, but we have not been able to call the one in Japan that has a good life , so It's time to issue a launch order (send a request)
xhr.send();
Get the response given by the server
Finally, Dongfeng Express sent it with hope, but after sending it out, we need to determine whether the express customer has signed for it and whether he is still satisfied, so we need to make a return visit (receive response) so we need to call the satellite to see ()
xhr.onload =function(){
}
parse the response
Because the satellite was called to see it before, the satellite sent back the data, saved it in the management office, and then it needs to be published (used responseText)
xhr.onload =function(){
console.log(xhr.responseText);
}
After the last return visit, we found that there are still some problems with our own services (atomic dan’s power is too small). The Maoxiong’s experiment next door has already started trial operation of the Big Ivan express service, so we will continue to experiment Create a stronger courier service
ajax
experiment ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button onclick="get_xrz()">发送快递</button>
<script>
function get_xrz() {
// 创建ajax对象
console.log(1);
var xhr = new XMLHttpRequest();
// 告诉东风快递客户位置（告诉ajax向哪里发送快递以什么方式发送请求）
xhr.open("get", "http://localhost:3000/xrz");
// 确认客户信息之后发送快递（发送请求）
xhr.send();
// 由于发送快递之后不知道什么时候才能签收，所以我们要密切关注对方
xhr.onload = function () {
console.log(xhr.responseText);
};
}
</script>
</body>
</html>
interface
response:
The format of the server response data
In general projects, most of the data that the server responds to will be in JSON format. When the client gets the data, it needs to be processed before it can be used. So we create
a new interface to return the data.
We send a request to view it.
We seem to have found some through the above picture. Clue
Let's check it through the code,
and the output is as follows
. Didn't we say it is in json format, but why is it in string format?
Reason: In http transmission, whether it is the request parameter or the response content, if it is an object type, it will always be converted into an object character for transmission,
so we will get a string
Convert the server response string to a json object
There is a JSON object under the window global scope. We can use the parse method to convert the JSON string into a JSON object.
So we can add it
and we can see it.
