异步 JavaScript 和 XML｜青训营笔记这是我参与「第五届青训营」笔记创作活动的第6天。由于大作业需要用到

这是我参与「第五届青训营」笔记创作活动的第6天。

由于大作业需要用到 AJAX，所以抽空进行了自学。

AJAX 的作用

使用 Ajax 技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载整个页面，这使得程序能够更快地回应用户的操作。

XML 的作用

XML 可扩展标记语言，用于传输和存储数据，XML 全都是自定义标签，用来表示一些数据。

AJAX 的特点

优点：

可以无需刷新页面而与服务器端进行通信。
允许你根据用户事件来更新部分页面内容。缺点：
没有浏览历史，不能回退。
存在跨域问题。
SEO（搜索引擎优化）不友好。

HTTP协议请求与响应的结构

四个部分：行、头、空行、体截屏2023-02-08 23.51.53.png

截屏2023-02-08 23.52.31.png

准备工作

安装 node.js，安装 express。 npm init --yes 初始化 npm i express

express 框架


//1.引入express
	const express = require('express');
//2.创建应用对象
	const app = express();

//3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
	app.get('/',(request,response)=>{
		response.send("Hello,express!");
    });

//4.监听端口启动服务
	app.listen(8000,()=>{
	console.log("服务已经启动，8000端口监听中.....");
	})
	
//node 文件名.js 启动测试 访问127.0.0.1:8000

get 请求发送案例

        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('result');
        btn.onclick = function(){
           //1.创建对象
           const xhr = new XMLHttpRequest();
           //2.初始化，设置请求方法和url
           xhr.open('GET','http://127.0.0.1:8080/server');
           //3.发送
           xhr.send();
           //4.事件绑定 处理服务端返回的结果
           xhr.onreadystatechange = function(){
                if(xhr.readyState === 4 && (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;
                }
           }

还有 POST 请求，JSON 请求，基本上做一些大同小异地更改。

关于 readystate 和网页状态

readystate 是xhr对象中的属性，表示状态 0,1,2,3,4

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

状态码为三位数

200～299 的状态码表示成功
300～399 的状态码指资源重定向
400～499 的状态码指客户端请求出错
500～599 的状态码指服务端出错

个人感想

这一模块内容较少，虽然不能理解它的内在含义，但实践操作相对简单，对 node.js 有待更深入地学习。

异步 JavaScript 和 XML｜青训营笔记