ajax基础

一：express框架

在终端输入node+js文件名

// 引入express
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则
app.get('/',(request,response) => {//设置响应response.send('Hello Express');
});    // 监听3000端口
app.listen(8000,()=>{console.log("服务器已经启动");  // 启动成功后，在命令行中看到此消息
});

Ctrl+c结束服务器

二：ajax入门：

// 引入express
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则
app.get('/server',(request,response) => {//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//设置响应response.send('Hello ajax');
});    app.POST('/server',(request,response) => {//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//设置响应response.send('Hello ajax post');
});  // 监听8000端口
app.listen(8000,()=>{console.log("服务器已经启动");  // 启动成功后，在命令行中看到此消息
});

get请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#result{width: 200px;height: 100px;border: 1px solid black;}</style>
</head>
<body><button>点击发送请求</button><div id="result"></div><script>//获取按钮元素const btn =document.getElementsByTagName('button')[0];const result = document.getElementById('result');//添加点击事件btn.onclick = function(){//1.创建对象const xhr = new XMLHttpRequest();//2.初始化xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200');//3. 发送请求xhr.send();//4.时间绑定//on when 当...时候//readystate 是xhr的一个属性，值有0-4，//分别代表请求未发送，请求发送中，请求发送完成，响应头部接收完成，响应数据接收完成//改变状态函数xhr.onreadystatechange = function(){//判断（服务端返回了所有的结果）if(xhr.readyState===4){//判断（状态码是否为200，即服务器返回了正确的数据）//响应状态码分别有200 404 500等if(xhr.status>=200&&xhr.status<300){//处理结果//获取状态码console.log(xhr.status);//状态状态字符串console.log(xhr.statusText);//返回所有响应头console.log(xhr.getAllResponseHeaders);//响应体console.log(xhr.response);}else{console.log('请求出错');}result.innerHTML=xhr.response;}}}</script>
</body>
</html>

post请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>POST请求</title><style>#result{width: 200px;height: 100px;border: 1px solid black;}</style>
</head>
<body><div id="result"></div><script>const result = document.getElementById("result");result.addEventListener("mouseover",function(){// console.log("mouseover");const xhr = new XMLHttpRequest();xhr.open("POST","http://127.0.0.1:8000/server");xhr.send();xhr.onreadystatechange=function(){if(xhr.readyState===4 && xhr.status===200){if(xhr.status>=200&&xhr.status<300){result.innerHTML=xhr.response;}}}})</script>
</body>
</html>

设置请求头信息：

服务器需要设置响应头，all可以接受任何的请求

response.setHeader('Access-Control-Allow-Headers','*');

设置允许跨域（自己命名的请求头信息）

app.all('/server',(request,response) => {//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//设置响应头, 设置允许跨域的头部response.setHeader('Access-Control-Allow-Headers','*');//设置响应response.send('Hello ajax post');
});

服务器端响应json数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>json</title><style>#result{width: 200px;height: 100px;border: 1px solid black;}</style>
</head>
<body><div id="result"></div><script>const result=document.getElementById('result');//绑定键盘按下事件window.onkeydown = function(){// console.log('test');//发送请求const xhr = new XMLHttpRequest();//设置响应体数据类型xhr.responseType='json';xhr.open('GET', 'http://127.0.0.1:8000/json-server');xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState===4)if(xhr.status>=200 && xhr.status<300){// console.log(xhr.response);// result.innerHTML=xhr.response;//手动对数据转化// let data = JSON.parse(xhr.response);// console.log(data);// result.innerHTML=data.name;//自动转化console.log(xhr.response);result.innerHTML=xhr.response.name;}}}</script>
</body>
</html>