当前位置：首页 > news >正文

Ajax_00000

news 2025/5/7 4:12:23

contents

Ajax介绍

AJAX(Asynchronous JavaScript And XML)。

XML简介

XML：可扩展标记语言。
XML被设计用来传输和存储数据。
XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据，现在已经被JSON取代了。

HTTP协议

HTTP（hypertext transport protocol：超文本传输）协议：协议详细规定了浏览器和万维网服务器之间互相通信的规则。
一、请求报文：
请求行：
请求头：
空行：
请求体：
二、响应报文：
请求行：
请求头：
空行：
请求体：

Node.js

官网地址：https://nodejs.org
下载安装后，查看安装的Node.js的版本：
打开控制台窗口，输入命令：nodejs -v

Express

官网地址：https://www.expressjs.com.cn

安装

打开Visual Studio Code开发工具。
左侧空白处点击鼠标右键，选择“Open in integrated Terminal”。
在这里插入图片描述
输入命令：npm init --yes
按回车键。

输入命令：npm i express
按回车键。

服务代码

//1. 引入express
const express = require('express');//2. 创建应用对象
const app = express();//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/', (request, response)=>{//设置响应response.send('HELLO EXPRESS');
});//4. 监听端口启动服务
app.listen(8000, ()=>{console.log("服务已经启动, 8000 端口监听中....");
});

启动Express

启动Express：使用node命令：
在这里插入图片描述
关闭服务：Ctrl+C

案例

案例准备

页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX GET 请求</title><style>#result{width:200px;height:100px;border:solid 1px #90b;}</style>
</head>
<body><button>点击发送请求</button><div id="result"></div><script>//获取button元素const btn = document.getElementsByTagName('button')[0];const result = document.getElementById("result");//绑定事件btn.onclick = function(){//1. 创建对象const xhr = new XMLHttpRequest();//2. 初始化 设置请求方法和 urlxhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');//3. 发送xhr.send();//4. 事件绑定 处理服务端返回的结果// on  when 当....时候// readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4// change  改变xhr.onreadystatechange = function(){//判断 (服务端返回了所有的结果)if(xhr.readyState === 4){//判断响应状态码 200  404  403 401 500// 2xx 成功if(xhr.status >= 200 && xhr.status < 300){//处理结果  行 头 空行 体//响应 // console.log(xhr.status);//状态码// console.log(xhr.statusText);//状态字符串// console.log(xhr.getAllResponseHeaders());//所有响应头// console.log(xhr.response);//响应体//设置 result 的文本result.innerHTML = xhr.response;}else{}}}}</script>
</body>
</html>

Express

//1. 引入express
const express = require('express');//2. 创建应用对象
const app = express();//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response)=>{//设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');//设置响应体response.send('HELLO EXPRESS');
});//4. 监听端口启动服务
app.listen(8000, ()=>{console.log("服务已经启动, 8000 端口监听中....");
});

测试

在浏览器地址栏中输入：
http://127.0.0.1:8000/server
或
http://localhost:8000/server
在这里插入图片描述

Ajax基本使用

server

//1. 引入express
const express = require('express');//2. 创建应用对象
const app = express();//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response)=>{//设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');//设置响应体response.send('HELLO EXPRESS');
});//4. 监听端口启动服务
app.listen(8000, ()=>{console.log("服务已经启动, 8000 端口监听中....");
});

页面

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX GET 请求</title><style>#result{width:200px;height:100px;border:solid 1px #90b;}</style></head><body><button>点击发送请求</button><div id="result"></div><script>//获取button元素。const btn = document.getElementsByTagName('button')[0];const result = document.getElementById("result");//绑定事件btn.onclick = function(){//1. 创建对象const xhr = new XMLHttpRequest();//2. 初始化：设置请求方法和urlxhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');//3. 发送xhr.send();//4. 事件绑定，作用是处理服务端返回的结果。// on  when 当....时候// readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4// change  改变xhr.onreadystatechange = function(){//判断 (服务端返回了所有的结果)if(xhr.readyState === 4){//判断响应状态码 200  404  403 401 500// 2xx 成功if(xhr.status >= 200 && xhr.status < 300){//处理结果  行 头 空行 体//响应 console.log(xhr.status);//状态码console.log(xhr.statusText);//状态字符串console.log(xhr.getAllResponseHeaders());//所有的响应头console.log(xhr.response);//响应体//设置 result 的文本result.innerHTML = xhr.response;}else{}}}}</script></body></html>