前后端数据交互技术——AJAX（一）

原生AJAX

AJAX简介

AJAX 全称为$Asynchronous JavaScript And XML$，就是异步的JS和XML。
通过AJAX可以在浏览器中向服务器发送异步请求，最大优势：无刷新获取数据。
AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

XML简介

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

现在已经被JSON取代了。

AJAX的特点

AJAX的优点

1. 可以无需刷新页面与服务器进行通信。
2. 允许你根据用户事件来更新部分页面内容。
   
   

AJAX的缺点

1. 没有浏览历史，不能回退
2. 存在跨域问题（同源）
3. SEO不友好
   
   

Express

ajax是一个规则，并不是框架或者语言，所以接下来我们使用nodejs的web应用框架——express来进行学习。
首先需要了解一下http的基本知识HTTP概述

nodejs下载与安装

前往下载地址选择对应版本进行下载，下载完成后打开安装程序进行安装，一直下一步直到安装完即可。
安装成功后打开cmd输入node -v回车，如果出现版本号则表示安装成功

express框架

express框架的安装

在工程文件下以管理员运行终端，在终端中执行以下命令，进行初始化。

npm init --yes

ex(NPM)ex Node Package Manager，node 的包管理工具 *** ex(init)ex 初始化$initializetion$的缩写

express的使用

1. 首先需要引入express

const expres = require('express');

2. 创建应用对象

const app = express();

3. 创建路由规则

// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (req, res) => {
    // 设置响应头，设置允许跨域
    res.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    res.send('hello world');
});

4. 监听端口启动服务

app.listen(8000,()=>{
    console.log('服务器启动成功');
})

5. 启动服务端

在工程文件下打开终端，在终端中输入以下命令。

node 文件名.js

6. 在网页中查看运行结果
   打开任意一个浏览器，在地址栏输入服务端的端口地址以及端口号。如果是本机作为服务端，可以在浏览器的地址栏输入:
   
   127.0.0.1（回送地址表示本机）
   
   
   后面接上请求接口即可。

发送请求

1. 创建对象

const xhr = new XMLHttpRequest();

2. 初始化，设置请求方法

xhr.open('GET','http://127.0.0.1:8000/server')

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); // 响应体
        } else {
            // 失败
            console.log('请求失败');
        }
    }
}