发表于： 2023-04-17 21:11:31
0 269
今天学的AXJX知识点：
<!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 GET 请求</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px skyblue;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
//获取元素
const btn = document.querySelector('button')
const result = document.querySelector('#result')
btn.addEventListener('click', function() {
// console.log('点击了');
// 1、创建对象
const xhr = new XMLHttpRequest()
// 2、初始化 设置请求方法和 url
xhr.open('GET', 'http://127.0.0.1:8000/result?a=100&b=200')
// 3、发送
xhr.send()
// 4、事件绑定 处理服务端返回的结果
//on 当 ....时候
// readystate 是 xhr 对象中的属性 表示状态 0 1 2 3 4
// change 改变
xhr.onreadystatechange = function() {
//判断（服务器返回了所有的结果）
//readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态
if(xhr.readyState === 4) {
//判断响应状态码 200 404 403 401 500
// 2xx 2开头的 算是响应成功
if(xhr.status >= 200 && xhr.status < 300) {
// 处理结果 行 头 空行 体
// 1、响应行
// console.log(xhr.status) //状态码
// console.log(xhr.statusText) //状态字符串
// console.log(xhr.getAllResponseHeaders()) //所有响应头
// console.log(xhr.response) //响应体
//设置 result 的文本 Response 接口呈现了对一次请求的响应数据。
result.innerHTML = xhr.response
} else {
}
}
}
})
</script>
</body>
</html>
<!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 skyblue;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
//获取元素
const result = document.querySelector('#result')
/// 绑定事件
result.addEventListener('mouseover', function() {
// console.log('触摸了');
// 1、创建对象
const xhr = new XMLHttpRequest()
// 2、初始化 设置请求方法和 url
xhr.open('POST', 'http://127.0.0.1:8000/result')
// 设置请求头
xhr.setRequestHeader('Content-Type','application/-www-form-urlencoded')
xhr.setRequestHeader('name','atguigu')
// 3、发送
xhr.send('a=100&b=200&c=300')
// xhr.send('a:100&b:200&c:300')
// 4、事件绑定
xhr.onreadystatechange = function() {
//判断
if(xhr.readyState === 4) {
if(xhr.status >= 200 && xhr.status < 300) {
//处理服务端返回的结果
result.innerHTML = xhr.response
}
}
}
})
</script>
</body>
</html>
<!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>JSON响应</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px skyblue;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
const result = document.querySelector('#result')
//绑定键盘按下事件
window.addEventListener('keydown', function() {
// console.log('按下键盘')
//发送请求
const xhr = new XMLHttpRequest()
//自动转换 设置响应体数据的类型
xhr.responseType = 'json'
//初始化
xhr.open('GET', 'http://127.0.0.1:8000/json-result')
//发送
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>
express.js：
// 1、先引入 express
const express = require('express')
// 2、创建应用对象
const app = express()
// 3、创建路由规则
app.get('/result', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
//设置响应
response.send('hello AJAX')
})
// all 可以接受任意类型的请求
app.all('/result', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
//响应头
response.setHeader('Access-Control-Allow-Headers', '*')
//设置响应
response.send('hello AJAX POST')
})
app.all('/json-result', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
//响应头
response.setHeader('Access-Control-Allow-Headers', '*')
//响应一个数据
const data = {
name: 'atguigu'
}
// 将对象进行字符串转换
let str = JSON.stringify(data)
//设置响应
response.send(str)
})
// 4、监听端口启动服务
app.listen(8000, () => {
console.log('服务已经启动， 8000 端口监听中');
})
返回列表
评论