1. The preliminary preparation is to download node.js from the official website of nodejs.cn and install it
Enter node -v in cmd to find the version number, which means the installation is successful
Enter npm init --yes in the root directory of the terminal in webstrom to initialize the project
Then install express npm i express
Create a new Js file for simple use of express
//Introduce express
const express=require('express');
//Create application object
const app=express();
//Create routing rules
app.get('/',(request,response)=>{
response.send ("hllo express");
});
//Listening port
app.listen(8000,()=>{
console.log("The service has started, listening on port 8000!");
});
The effect is as follows:
When the port number is occupied, you can end the process taskkill /f /t /im node.exe
2. The basic use of AJAX, binding events
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#result{
width:200px;
height: 100px;
border: solid 1px cornflowerblue}
</style>
</head>
<body>
<button id="btn">发送点击请求</button>
<div id="result"></div>
<script>
//获取btn元素
const btn=document.getElementsByTagName('button')[0];
// const btn=document.getElementById("btn");
const result=document.getElementById("result");
//Create object
btn.οnclick=function () {
//Bind event
const xhr=new XMLHttpRequest();
//Initialize the request method and url
xhr.open('GET',"http://127.0.0.1:8000/server");
//Send
xhr.send();
// The result returned by the event binding processing server
//readystate is an attribute in the xhr object, indicating the state 0: indicating initialization 1: indicating that the open method has been called
// 2: indicating that the send method has been called 3: indicating the part returned by the server Result 4: Indicates all results returned by the server
//5 values, triggering four times
xhr.onreadystatechange=function () {
//judgment
if(xhr.readyState===4){
//judgment response code 200 404 403 401 500
//2xx is successful
if(xhr.status>=200 && xhr.status<300){
//Processing result line head empty line body
//Response line
// console.log(xhr.status);//status code
// console.log(xhr.statusText);//status character code
// console.log(xhr.getAllResponseHeaders());//all response headers
// console.log(xhr.response);//response body
/ /Set result text
result.innerHTML=xhr.response;
}
else{
}
}
}
}
</script>
</body>
</html>
js
//Introduce express
const express=require('express');
//Create application object
const app=express();
//Create routing rules
app.get('/',(request,response)=>{
//Set Response header, set to allow cross-domain
response.setHeader('Access-Control-Allow-Origin','*');
//Set the response body
response.send("hllo AjAX");
});
//Listen to the port
app. listen(8000,()=>{
console.log("The service has started, listening on port 8000!");
});
3. Set request parameters
xhr.open('GET',"http://127.0.0.1:8000/server?a=100&b=200&c=300");