文档参考：

​ 动力节点最新Ajax教程-快速搞定ajax_哔哩哔哩_bilibili

​ 【尚硅谷】3小时Ajax入门到精通

​ Ajax - Web 开发者指南 | MDN (mozilla.org)

​ AJAX 教程 | 菜鸟教程 (runoob.com)

第一章：原生AJAX

AJAX简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

XML简介

XML 可扩展标记语言。

XML 被设计用来传输和存储数据。

XML和HTML类似，不用的是HTML中都是预定义标签，而XML中没有预定义标签，全是自定义标签，用来表示一些数据。

1
2
3
4
5
6
7
8
比如说我有一个学生数据：
    name="孙悟空"；age=18;gender="男";
用XML表示
<student>
    <name>孙悟空</name>
    <age>18</age>
    <gender>男</gender>
</student>

现在已被JSON取代了

1
2
用JSON表示:
{"name":"孙悟空","age":18,"gender":"男"}

AJAX的特点

AJAX的优点

  1. 可以无需加载整个页面，而是更新网页的部分(页面局部刷新)

  2. 允许你根据用户事件来更新部分页面内容

  3. AJAX可以做到在同一个网页中同时启动多个请求，类似于在同一个页面中启动“多线程”，一个“线程”，一个“请求”。

AJAX的缺点

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

    传统请求，如url和超链接，使用js代码发送请求等，会刷新全部页面，导致用户体验较差。
    对于AJAX来说，服务器（WEB Server端）可能会给WEB前端响应回来三种数据：可能是普通文本，可能是XML字符串，可能是JSON字符串。

浏览器上发送AJAX请求，这些代码是JS语法的代码，其实发送AJAX请求。就是需要编写JS代码的。

HTTP

HTTP(hypertext transport protocol)协议【超文本传输协议】，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

请求报文

重点是格式与参数

分为四个部分 行-头-空格-体

1
2
3
4
5
6
7
行 POST
头 HOST: wsczh.top
   Cookie: name=zh
   Connect-type:
   User-Agent: chrome 83
空行  
体  username=admin&password=admin

响应报文

1
2
3
4
5
6
7
8
9
10
11
12
行    HTTP/1.1 200 OK
头    Connect-Type: text/html;charset=utf-8
      Connect-length: 2048
      Connect-encoding
空行
体    <html>
        <head>
        </head>
        <body>
            <h1>哈哈哈</h1>
        </body>
     </html>

Node和express

参考教程

Express/Node 入门 - 学习 Web 开发 | MDN (mozilla.org)

什么是Node？

Node（正式名称 Node.js）是一个开源的、跨平台的运行时环境，有了它，开发人员可以使用JavaScript创建各种服务端工具和应用程序。

什么是Express

Express是最流行的Node框架,是许多其他流行Node框架的底层库。它提供了以下机制：

  • 为不同 URL 路径中使用不同 HTTP 动词的请求（路由）编写处理程序。
  • 集成了“视图”渲染引擎，以便通过将数据插入模板来生成响应。
  • 设置常见 web 应用设置，比如用于连接的端口，以及渲染响应模板的位置。
  • 在请求处理管道的任何位置添加额外的请求处理“中间件”。

在vscode的终端中使用

1
2
3
4
初始化
npm init --yes
安装express
npm i express

创建js文件，输入以下内容，利用express来模拟一个简单的请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 1.引入express
const { response } = require('express');
const express = require('express');
const { request } = require('http');

// 2.创建应用对象
const app=express();
// 3.创建路由规则
// request是对请求报文的封装
// response 是对响应报文的封装
app.get('/',(request,response)=>{
    // 设置相应
    response.send("HELLO EXPRESS");
});

//4.监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已启动,8000端口监听")
})

XMLHttpRequest对象

  • XMLHttpRequest对象是AJAX的核心对象，发送请求以及接收服务器数据的返回，全靠它了。

  • XMLHttpRequest对象，现代浏览器都是支持的，都内置了该对象，直接使用即可。

  • 创建XMLHttpRequest对象

    1
    var xhr = new XMLHttpRequest();

  • XMLHttpRequest对象的方法

    方法 描述
    abort() 取消当前请求
    getAllResponseHeaders() 返回头部信息
    getResponseHeader() 返回特定的头部信息
    open(method,url,async,user,psw) 规定请求method:请求类型GRT或POST；url: 文件位置；async：true（异步）或false（同步）；user：可选的用户名称；psw：可选的密码
    send() 将请求发送到服务器，用于GET请求
    send(string) 将请求发送到服务器，用于POST请求
    setRequestHeader() 向要发送的报头添加标签/值对

  • XMLHttpRequest对象的属性

    属性 描述
    readyState 保存XMLHttpRequest的状态。
    0：请求未初始化
    1：服务器连接已建
    2：请求已收到
    3：正在处理请求
    4：请求已完成且响应已就绪