提示：这个小程序仅仅是用于体验ajax理念，只是作为初学者的一个体验项目，不作为完整项目上传，如果内容有误差，欢迎各位交流指导~
@[TOC](目录)
概念导入
1.1 什么是AJAX
ajax全称是Asynchronous JavaScript + XML，译为异步的js和xml的组合。
xml（可扩展标记语言）是一种数据格式，我们经常将他与html（超文本标记语言）相对比，xml的特点就是可以自定义标签与属性（所以一般用于保存和传输数据），形如：
<student>
<name>张三</name>
<age>25</age>
<sex>男</sex>
</student>其含义是：一条学生数据，姓名是张三，他的年龄是25岁，性别是男
而这种数据格式现在被JSON所代替，上例转换为JSON格式后为：
{
"name":"张三"，
"age":25，
"sex":"男"，
}1.2 跨域
跨域问题是ajax中经常遇到的问题之一，其含义是：
如果要从a.com（本服务）拿到b.com（其他服务）的数据，在ajax技术中一般是不被允许的
具体的内容可以看看知乎的一篇帖子，其中也有跨域问题的解决办法：
1.3 AJAX工作原理
ajax最大的特点就是能实现页面功能块的懒加载，也就是需要什么加载什么，不需要什么就不加载什么，在不刷新页面的情况下与服务端作数据交换。有很多例子：
（1）搜索引擎
在百度、google等搜索框中输入一串字符，下方会有小框呈现可能需要的提示信息，这种就是拿ajax实现的。将用户输入的内容与数据库中的文章主题作匹配，通过ajax将匹配结果传给前端渲染。
（2）分页
某些网站分页也是利用ajax实现的，页面其他结构不用响应用户动作，只有分页部分进行数据刷新
1.3.1 AJAX的优点
懒加载，无需刷新页面传输数据，只根据用户动作修改部分页面内容，可以有效反爬虫
1.3.2 AJAX的缺点
没有浏览历史（因为不存在刷新与跳转，cookie不会记录）、无法回退、存在跨域问题、对搜索引擎优化不友好
1.4 HTTP相关
http传输分为两类：请求和响应：请求是客户端发给服务器的信息，响应是服务器发给客户端的信息
请求内容称为请求报文，响应内容称为请求报文
请求报文由四部分组成：
行 主要存放：发送方式（GET/POST）、字符编码格式、HTTP协议版本号
头 主要存放：Host、Cookie等 //可以上网查查
空行
体 如果是GET请求，体部分为空；如果是POST请求，体部分可以不为空响应报文由四部分组成：
行 主要存放：HTTP协议版本、响应状态码、响应状态字符串
头 与请求报文格式相同，主要对响应体内容作以描述
空行
体 页面结构（html标签）比较重要的是，要学会在网页中打开console控制台（F12，或CTRL+shift+C）、找到并打开“网络”tag，刷新页面后观察网络传输过程与传输内容。
2. 构建一个简易的AJAX程序
2.1 软件准备
编辑器：VsCode（官网就有，免费的）
js运行环境：node.js（官网就有，免费的）
微服务框架：express（官网就有，免费的）
2.2 express引入
（1）创建一个js文件后（假设此处建立的文件名为server.js），在文件资源区空白处右键，选择“在集成终端中打开”
（2）在弹出框里输入以下代码，检查nodejs是否安装成功
node -v如果出现版本号即为安装成功
（3）输入以下代码引入express（前提是在官网下好了）
npm install express出现下图所示提示即为安装成功
2.3 搭建web服务
创建server.js文件后，在文件内写服务搭建代码：
引入express的代码
const { response } = require('express')
const express = require('express');
const { access } = require('fs');
const { request } = require('http')创建应用对象的代码
const app = express()创建路由规则的代码
//request是对请求报文的封装
//response是对相应报文的封装
app.get('/',(request, response)=>{
//设置响应
response.send('HELLO EXPRESS') //这一块写什么网页就会显示什么
});设置监听端口
app.listen(8000,()=>{
console.log("服务已经启动，8000端口监听中")
})在集成终端中输入以下代码启动服务
node server.js //此处的server.js可以换成你自己的文件名若集成终端显示如下图所示，即为web服务搭建成功
在浏览器url栏输入“127.0.0.1:8000”（有些浏览器需要输入localhost:8000，例如作者的edge浏览器），就会显示设置的响应中的内容，如下图所示：
2.4 写AJAX请求部分，并修改web服务的代码
本文举出的ajax的例子是：用户点击客户端按钮时，客户端发出ajax请求，服务端处理ajax请求并将“HELLO EXPRESS”字符串回传给客户端，并在划定的范围内显示
先搭建出客户端页面框架：
<!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>Document</title>
<style> //定义展示框的样式
#result{
width: 200px;
height: 100px;
border: solid 1px;
}
</style>
</head>
<body>
<button>点击发送请求</button> //用于发送ajax请求
<div id="result"></div> //用于展示服务端响应内容
</body>
</html>给按钮绑定点击事件：
//获取button元素
const btn = document.getElementsByTagName('button')[0];
//绑定事件
btn.onclick = function(){
//测试点击事件是否绑定成功
console.log("test");
}调试点击事件。
在浏览器中打开网页，打开控制台，点击按钮看控制台中是否能正常输出“test”，如果能，进行下一步，如果不能，检查并排错。
将创建服务端第三步时写的代码修改为以下内容：
app.get('/server',(request, response)=>{ //此处的server指的是客户端发送请求的落地页为尾缀是server时（也就是url地址端口号后面的一级地址为server时）执行这个回调函数
//server可以改变成任何你想改变的值，但在定义请求发送目标地址时，“/”后的字符一定要与这个相同
//设置响应头,设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应
response.send('HELLO EXPRESS')
});修改绑定事件为：点击按钮发送request请求
//绑定事件
btn.onclick = function(){
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化 设置请求方法和url
xhr.open('GET','http:127.0.0.1:8000/server');//不能用localhost:8000
//3.发送
xhr.send();
//4.事件绑定 处理服务端返回的结果
xhr.onreadystatechange = function(){
//判断（服务端是否返回了所有的结果）
if(xhr.readyState === 4){
//判断响应状态码，2开头为成功
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;
}
}
}
}在页面打开html结构文件，点击按钮观察结果
注意
（1）在浏览器发送请求并获取响应前一定要利用node server.js启动服务，否则点击按钮不会有结果
（2）注意观察集成控制终端的信息，如果报错，检查一下搭建web服务时用到的8000端口是否关闭，如果没有关闭，打开对应的集成控制终端，按下CTRL+C关闭端口
799
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
