Ajax学习(2)
post请求和json-server
post
<!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>Ajax post 请求</title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #903;
}
</style>
</head>
<body>
<div id="result"></div>
</body>
<script>
//获取元素
const result = document.getElementById('result');
//绑定事件
result.addEventListener("mouseover", function() {
console.log('test');
// 1-创建对象
const xhr = new XMLHttpRequest();
// 2-初始化 设置类型与url
xhr.open('POST', 'http://localhost:8000/server');
//设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') //('设置请求体内容','')
// 3-发送
//发送参数在send方法里进行传参
xhr.send('a=100&b=200&c=300');
//事件绑定
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
result.innerHTML = xhr.response;
}
}
}
})
</script>
</html>
json响应
<!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>Ajax post 请求</title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #903;
}
</style>
</head>
<body>
<div id="result"></div>
</body>
<script>
//获取元素
const result = document.getElementById('result');
//绑定事件
result.addEventListener("mouseover", function() {
console.log('test');
// 1-创建对象
const xhr = new XMLHttpRequest();
xhr.responseType = "json";
// 2-初始化 设置类型与url
xhr.open('GET', 'http://localhost:8000/json-server');
//设置请求头
//xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') //('设置请求体内容','')
// 3-发送
//发送参数在send方法里进行传参
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.response;
//自动转换
console.log(xhr.response);
result.innerHTML = xhr.response.name;
}
}
}
})
</script>
</html>
server.js
//1-引入express
const { response } = require('express');
const express = require('express');
const { request } = require('http');
//2-创建应用对象
const app = express();
//3-创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server', (request, response) => {
//设置响应头 允许跨域
//header的 Access-Control-Allow-Orign 名字 设置 *
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应体
response.send('hello Ajax');
});
app.post('/server', (request, response) => {
//设置响应头 允许跨域
//header的 Access-Control-Allow-Orign 名字 设置 *
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应体
response.send('hello Ajax post');
});
app.all('/json-server', (request, response) => {
//设置响应头 允许跨域
//header的 Access-Control-Allow-Orign 名字 设置 *
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
//设置响应对象
const data = {
name: 'luchen'
};
// 对对象进行转换
//设置响应体
// let str = JSON.stringify(data);
response.send(data);
});
//监听端口启动服务
app.listen(8000, () => {
console.log("服务器已经启动,8000 端口监听中……");
})