AJAX——ajax、XML、HTTP、node、express

最新推荐文章于 2023-06-15 15:11:43 发布

原创最新推荐文章于 2023-06-15 15:11:43 发布 · 272 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #http #xml #node #javascript

javascript 同时被 3 个专栏收录

124 篇文章

订阅专栏

es6

73 篇文章

订阅专栏

node.js

26 篇文章

订阅专栏

本文介绍了AJAX的工作原理及优势，并通过实例演示了如何利用AJAX与Node.js进行前后端交互，涵盖GET与POST请求处理。

AJAX

AJAX全称Asynvhronous JavaScript And XML，就是异步的js和XML

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

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

优点：

1.无需刷新页面就可以与服务器端进行通信

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

缺点“

1.没有浏览历史，不能回退

2.存在跨域问题（同源）

3.SEO(搜索引擎优化)不友好

XML

xml：可扩展标记语言

html：超文本标记语言

xml：被设计用来传输和存储数据

html：用来在页面中展示数据

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

<person>
	<name>张三</name>
	<age>22</age>
</person>

json比较xml简洁、方便

HTTP

http(Hypertext transport protocol)：超文本传输协议，协议详细规定了浏览器和万维网(www,World Wide Web)服务器之间互相通信的规则

请求：浏览器向服务器发送的内容（请求报文）

请求报文的内容：

1.请求行：包括请求类型（GET/POST…）,url路径，HTTP协议的版本

url路径：

完整的网址如下：
https://www.w3school.com.cn/jquery/index.asp
url的路径所需的部分：
/jquery/index.asp

2.请求头：格式（名字冒号空格加值）：名字: 值（值和冒号之间是一个空格）

3.空行：作用是为了把请求头和请求体隔开，必须有

4.请求体:如果是get的请求，请求体就是空的；如果是post请求，不为空，可以放请求参数

get请求的参数在url里面，而post请求的参数在请求体里面

一个较为完整的请求报文：

请求行：
POST /jquery/index.asp HTTP/1.1
请求头：
Host: xxx.com
Cookie: name=xxxxxx
Content-type: application/x-www-form-urlencoded
User-Agent: chrome 83
空行
请求体：
username=admin&pws=123456

响应：服务器向浏览器返回的结果（响应报文）

1.响应行：协议版本响应状态码响应状态字符串（如：HTTP/1.1 200 ok）

2.响应头：格式和请求报文的请求头格式一样，名字冒号空格加值

3.空行：作用是为了把请求头和请求体隔开，必须有

4.响应体:存放响应结果（html内容）

在浏览器控制台的network那里进行查看调试

node.js

Node.js 就是运行在服务端的 JavaScript

node.js是一个基于Chrome V8引擎的javascript运行时（建立的一个平台）

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

express

express是基于node.js平台的一个快速、开放、极简的web开发框架。

先初始化：npm init --yes(-y)

安装：$ npm install express --save

express的基本使用

// 引入express
const express = require('express');

// 创建应用对象
const app = express();
// 创建路由规则
// req：request，是对请求报文的封装
// res：response，是对响应报文的封装
app.get('/', (req, res) => {
        // 设置响应
        res.send('hello,express!');
    })
    // 设置监听端口
//关闭端口号：ctrl+c
app.listen(8003, () => {
    console.log('服务器已启动');
})

发送ajax（get）请求，将结果输出到页面

<!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>
        #box {
            width: 200px;
            height: 100px;
            border-radius: 5px;
            border: 1px solid peru;
        }
    </style>
</head>

<body>
    <button id="btn">发送请求</button>
    <div id="box">

    </div>
    <script>
        // 获取dom元素
        // const btn = document.getElementsByTagName('button')[0];
        const btn = document.getElementById('btn');
        const box = document.getElementById('box');
        btn.onclick = function() {
            // 创建对象
            const xhr = new XMLHttpRequest();
            // 初始化，设置请求方式和路径url
            xhr.open('GET', 'http://127.0.0.1:8003/server');
            // 发送
            xhr.send();
            //事件绑定,处理服务端返回的结果
            // on(当)readystate(是xhr对象的属性，表示状态)change(改变)
            // 0（ 未初始化）, 1(open方法调用完毕), 2(send方法调用完毕), 3(服务端返回了部分结果), 4(服务端返回了全部结果))
            // 发送请求的过程，状态会改变4次，方法就会被触发4次
            xhr.onreadystatechange = function() {
                // 判断服务器是否返回了全部结果（状态是否为4）
                if (xhr.readyState === 4) {
                    //判断响应的状态码
                    // 2xx 都代表成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 处理结果（响应行，响应头，空行，响应体）
                        // 1.响应行（http协议版本，状态码，状态字符串）
                        /* console.log("状态码：" + xhr.status); //状态码
                        console.log("状态字符串：" + xhr.statusText); //状态字符串
                        console.log("所有响应头：" + xhr.getAllResponseHeaders()); //所有响应头
                        console.log("响应体：" + xhr.response); //响应体 */
                        // 将响应信息输出到页面上
                        box.innerHTML = xhr.response;
                    }
                }
            }
        }
    </script>
</body>

</html>

设置参数：

在url后面添加参数，用**？隔开，有多个参数，用&**分隔

http://127.0.0.1:8003/server?name=zs&age18

post请求

<!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>post</title>
    <style>
        #box {
            width: 200px;
            height: 100px;
            border-radius: 5px;
            border: 1px solid peru;
        }
    </style>
</head>

<body>
    <div id="box">

    </div>
    <script>
        const box = document.getElementById('box');
        box.addEventListener('mouseover', function() {
            // 创建对象
            const xhr = new XMLHttpRequest();
            // 初始化
            xhr.open('POST', 'http://127.0.0.1:8003/server');
            // 发送
            // post请求的请求数据（请求体）是在send方法里面设置
            // 请求体内的参数格式可以设置任意格式，任意类型数据
            // xhr.send('name=zs&age=22&sex=男'); //在request payloat中查看
            xhr.send('name:zs&age:22&sex:男');
            // 事件绑定，监听状态改变
            xhr.onreadystatechange = function() {
                // 判断服务端是否返回了全部结果
                if (xhr.readyState === 4) {
                    // 判断状态
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 处理服务端返回的结果
                        box.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>

</html>