文章目录

原生的AJAX

AJAX简介
XML介绍
AJAX的特点
HTTP协议

Express框架

HelloWorld
AJAX发送GET请求
AJAX设置请求参数
AJAX发送POST请求
AJAX设置请求体
AJAX设置请求头信息
服务端响应JSON数据
nodemon自动重启工具

原生的AJAX

AJAX简介

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

通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。

AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

AJAX的实例

百度搜索框的关键字提示
注册页面的提醒
淘宝网页的充话费、车险（懒加载）
京东首页的二级菜单
今日头条的浏览，滚动条的位置会发生改变
QQ空间动态的浏览

XML介绍

XML：可扩展的标记语言

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

XML和HTML类似，不同的是HTML中的标签都是预定义标签，而XML中没有预定义标签，全都是自定义标签。

<student>
	<name>张三</name>
    <age>23</age>
    <gender>男</gender>
</student>

但是，我们现在在进行AJAX应用时，已经不再使用XML了，（XML解析繁琐），现在已经被JSON取代了。

用JSON表示：

{"name":"张三","age":23,"gender":"男"}

AJAX的特点

优点：

1、无需刷新页面而与服务器端进行通信；

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

缺点：

1、没有浏览历史，无法后退；

2、存在跨域问题（同源）；

什么是跨域？

我在一个服务向另一个服务发送请求，AJAX默认是不允许的。

a.com的网页向b.com的网页发送AJAX请求，默认是不可以的。

3、SEO不友好。

Search Engine Optimization，搜索引擎优化。

HTTP协议

HTTP（Hypertext Transport Protocol）超文本传输协议，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

协议：一种约定，一种规则。

请求报文

1、行

包括三部分，请求类型 URL路径 HTTP协议的版本

HTTP协议版本：HTTP/1.1

请求类型：GET、POST等；

2、头

Host: www.baidu.com
Connection: keep-alive
User-Agent:
Cookie:

3、空行

4、体

如果是GET请求，请求体是空的。

如果是POST请求，请求体不为空。

响应报文

1、行

协议版本响应状态码响应状态字符串

HTTP/1.1 200 OK

2、头

Content-Encoding: gzip
Content-Type: text/html;charset=utf-8
Date: Mon, 27 Jul 2020 04:26:24 GMT
Server: BWS/1.1

BWS：Baidu Web Server。

3、空行

4、体

<html>
    <head>
        
    </head>
    <body>
        
    </body>
</html>

在这里插入图片描述

上面的都是GET请求，没有请求体，当请求类型是POST时，才会存在请求体。

Express框架

HelloWorld

因为我们的AJAX需要给服务端发送请求，所以我们这里需要一个服务端。

Express：基于Node.js平台的快速、开放、极简的Web开发框架。

1、npm init -y 初始化项目
2、npm install express --save 安装本地的运行时依赖

HelloWorld

// 1、引入express
const express = require('express');
const { request, response } = require('express');

// 2、创建应用对象
const app = express();

// 3、创建路由规则
// request是对请求报文的封装，response是对响应报文的封装
app.get('/', (request, response)=>{

    // 设置响应
    response.send("Hello");
});

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

执行该js文件，node express框架的基本使用.js，服务已经启动，8000端口监听中。

AJAX发送GET请求

服务端：

const express = require("express");


const app = express();

app.get('/server', (req, res)=> {
    //如果请求行的url是/server时，执行这个回调函数

    //设置响应头
    //设置允许跨域,服务器可以接收所有跨域的请求,在浏览器中html文件的url是file协议,肯定会有跨域问题
    res.setHeader('Access-Control-Allow-Origin', '*');

    //设置响应体
    res.send("Hello Ajax");
})

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: 1px solid blueviolet;
        }
    </style>
</head>
<body>
    <button >点击发送请求</button>
    <div id="result"></div>

    <script>
        const btn = document.getElementsByTagName("button")[0];
        const result = document.getElementById("result");
        btn.onclick = function() {
            // AJAX请求
            // 1、创建对象
            const xhr = new XMLHttpRequest();
            // 2、初始化 设置请求方法和url
            xhr.open('GET', 'http://127.0.0.1:8000/server');
            // 3、发送
            xhr.send();
            // 4、事件绑定，处理服务端返回的结果
            xhr.onreadystatechange = function() {
                // on when当什么时候
                // readystate xhr对象中的一个属性
                // change 改变 以前的(下拉框的onchange事件)
                // 在这里会触发4次，然而我们只处理第4种状态

                // 响应状态码status  200 OK  404 未找到页面
                if (xhr.readyState == 4 && xhr.status == 200) {
                    //处理结果
                    //响应行:xhr.status属性保存响应行的响应状态码，xhr.statusText属性保存响应行的状态字符串
                    console.log(xhr.status);
                    console.log(xhr.statusText);
                    //响应头：获取所有的响应头
                    console.log(xhr.getAllResponseHeaders());
                    //响应体
                    console.log(xhr.response);
                    result.innerHTML = xhr.response;
                }
            }

            /*
            xhr对象的三个重要属性：
            onreadystatechange：每当 readyState 属性改变时，就会调用该函数
            readyState：表示状态，0请求未初始化 1服务器连接已建立 2请求已接收 3请求处理中 4请求已完成且响应已就绪
            status：200 OK 只要状态码是2xx，都代表成功
            */
        }
    </script>
</body>
</html>

AJAX设置请求参数

xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');

在这里插入图片描述

AJAX发送POST请求

服务端：

const express = require("express");


const app = express();

app.get('/server', (req, res)=>{
    //如果请求行的url是/server时，执行这个回调函数

    //设置响应头
    //设置允许跨域,服务器可以接收所有跨域的请求,在html文件中的url是file协议,肯定会有跨域问题
    res.setHeader('Access-Control-Allow-Origin', '*');

    //设置响应体
    res.send("Hello Ajax");
})

app.post('/server', (req, res)=>{
    res.setHeader('Access-Control-Allow-Origin', '*');

    res.send("Hello Ajax POST");
});

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 POST 请求</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 2px brown solid;
        }
    </style>
</head>
<body>
    <div id="result">
        
    </div>
    <script>
        const result = document.getElementById("result");

        result.onmouseover = function() {
            // 鼠标移上事件

            const xhr = new XMLHttpRequest();
            xhr.open("POST", "http://127.0.0.1:8000/server");

            // 请求类型为GET时，请求报文没有请求体，只有请求行和请求头
            // 请求类型为POST时，请求报文中有请求体，在AJAX中在send()方法中以字符串形式传递
            xhr.send('a=100&b=200&c=300');

            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    result.innerHTML = xhr.response;
                }
            }
        }
        
    </script>
</body>
</html>

AJAX设置请求体

xhr.send('a=100&b=200&c=300');

在这里插入图片描述

AJAX设置请求头信息

目前我们可以设置的东西有：请求行（请求类型、请求URL），请求体（POST请求），响应头（跨域），响应体。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX POST 请求</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 2px brown solid;
        }
    </style>
</head>
<body>
    <div id="result">
        
    </div>
    <script>
        const result = document.getElementById("result");

        result.onmouseover = function() {
            // 鼠标移上事件

            const xhr = new XMLHttpRequest();
            xhr.open("POST", "http://127.0.0.1:8000/server");

            // 设置请求头
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            /* 
            Content-Type设置请求体的类型
            */


            // 请求类型为GET时，请求报文没有请求体，只有请求行和请求头
            // 请求类型为POST时，请求报文中有请求体，在AJAX中在send()方法中以字符串形式传递
            xhr.send('a=100&b=200&c=300');

            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    result.innerHTML = xhr.response;
                }
            }
        }
        
    </script>
</body>
</html>

在这里插入图片描述

服务端响应JSON数据

服务端：

const express = require("express");


const app = express();

app.get('/server', (req, res)=>{
    //如果请求行的url是/server时，执行这个回调函数

    //设置响应头
    //设置允许跨域,服务器可以接收所有跨域的请求,在html文件中的url是file协议,肯定会有跨域问题
    res.setHeader('Access-Control-Allow-Origin', '*');

    //设置响应体
    res.send("Hello Ajax");
})

app.post('/server', (req, res)=>{
    res.setHeader('Access-Control-Allow-Origin', '*');

    res.send("Hello Ajax POST");
});

app.get('/json-server', (req, res)=>{
    res.setHeader("Access-Control-Allow-Origin", "*");
    // 响应一个JSON数据
    const data = {
        name:"张三",
        age:23
    }
    // 对对象进行字符串转换
    let str = JSON.stringify(data);
    res.send(str);
});

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>JSON响应</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 2px solid rgb(96, 96, 163);
        }
    </style>
</head>
<body>
    <div id="result">

    </div>
    <script>
        const result = document.getElementById("result");
        window.onkeydown = function() {
            // 键盘按下事件

            const xhr = new XMLHttpRequest();
            
            // 设置响应体的响应类型为json
            xhr.responseType = "json";

            xhr.open('GET', 'http://127.0.0.1:8000/json-server');
            xhr.send();

            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 1、手动将response的json格式转换为对象
                    // let data = JSON.parse(xhr.response);
                    // result.innerHTML = data["name"];

                    // 2、自动转换，借助xhr.responseType属性
                    result.innerHTML = xhr.response.name;
                }
            }
        }
    </script>
</body>
</html>

在这里插入图片描述

nodemon自动重启工具

当文件修改后，通过自动重启node应用，而不用每修改一次，重启一次，从而帮助我们开发基于Node.js的应用。

全局安装

npm install -g nodemon

使用

nodemon [your node app]

nodemon ./server.js

1、原生AJAX（结合Express框架）

文章目录

原生的AJAX

AJAX简介

XML介绍

AJAX的特点

HTTP协议

Express框架

HelloWorld

AJAX发送GET请求

AJAX设置请求参数

AJAX发送POST请求

AJAX设置请求体

AJAX设置请求头信息

服务端响应JSON数据

nodemon自动重启工具

猜你喜欢