简单使用ajax与express
文件目录
1、搭建后台
利用express框架
安装依赖：npm i express
初始化：npm init -y
package.json 设置：“dev”: “node express.js”
// express.js// 引入依赖
const express = require('express')
//创建express对象实例
const app = express()
// 后台服务接口
app.get('/server', (request, response) => {// 解决跨域问题response.setHeader('Access-Control-Allow-Origin', '*')response.send('响应体返回给客户端')
})
//监听8000端口
app.listen(8000, () => {console.log('8000端口服务已经启动...')
})
控制台输出 npm run dev 跑起来
如果控制台出现以下这个截图，说明成功
2、搭建前台
首先书写index.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>Documenttitle><style>#result{width: 300px;height: 300px;border: 1px solid lightskyblue;}style>
head><body><div><button>发送请求button><div id="result">div>div>
body>html>
在body中编写dom——script
<body><div><button>发送请求button><div id="result">div>div><script>const result = document.getElementById('result')const btn = document.querySelectorAll('button')[0]btn.onclick = function () {console.log('点击成功')}script>
body>
在页面中检查效果
在onclick函数体中编写请求
btn.onclick = function () {// 创建实例const xml = new XMLHttpRequest()// 初始化实例xml.open('GET', 'http://127.0.0.1:8000/server', true)// 发送请求xml.send()// 接收响应xml.onreadystatechange = function () {// 如果状态为4 证明拿到数据if (xml.readyState === 4) {// 如果状态码为2xx，说明返回成功if (xml.status === 200 && xml.status < 300) {// 返回给页面数据result.innerHTML = xml.response} else {console.log("失败")}}}
}
成功后页面如下：
3、补充
1、readyState
存有 xmlHttp 的状态，从 0-4 发生变化
0： 请求未初始化，创建异步请求对象 var xmlHttp = new XMLHttpRequest()
1： 初始化异步请求对象，xmlHttp.open(请求方式，请求地址，true)
2：异步对象发送请求，xmlHttp.send()
3：异步对象接收应答数据 从服务端返回数据。XMLHttpRequest 内部处理
4：异步请求对象已经将数据解析完毕。此时才可以读取数据，然后再去更新页面
2、status
200：“OK”
404: 未找到页面
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！