引言：

前端刷新页面有两种技术：

1.整个页面刷新跳转到一个新的网页html

2.局部刷新，用js去做网络请求，然后请求得到的数据，动态的渲染的DOM

AJAX

前端局部刷新页面，需要用到AJAX。

在使用AJAX之前，我们需要了解res.writeHead(statusCode, [reasonPhrase], [headers])的使用方法。

res.writeHead

用途：向请求的客户端发送响应头。该函数在一个请求内最多只能调用一次，如果不调用，则会自动生成一个响应头。因为实际开发中,我们需要返回对应的中文以及对应的的文本格式所以我们需要设置对应的响应头,响应头决定了对应的返回数据的格式以及编码格式。

使用方法：res.writeHead(statusCode, [reasonPhrase], [headers])

第一个是HTTP状态码，如200(请求成功），404（未找到）等。
第二个是告诉浏览器发送的数据类型
第三个就是具体发送的是什么数据

AJAX

注意：

1.AJAX是在前端里面使用的，并不是后端代码

2.AJAX技术是全局函数：window.XMLHttpRequest

使用AJAX技术的流程

1.用一个函数封装起来function(){代码}

2.在函数里面开始创建AJAX对象，用于做网络请求

let xhr=new XMLHttpRequest()

兼容性写法：let xhr=new XMLHttpRequest()||new ActiveXObject("Microsoft.XMLHTTP")

3.配置连接信息 xhr.open("GET","url",true)

url：网址

第三个参数:是否异步请求（boolean）

4.发送网络请求 xhr.send()

5.等待（监听网络状态）：

1.判断前端与后端的状态：xhr.readState==1、2、3、4中的一个值

1：刚与后端建立连接
2：后端收到数据包了，正在处理中
3：重定向
4：代表后端已经将数据包发过来了（代表数据请求成功）

注意：这个值是无序的

监听事件：xhr.onreadystatechange

因为xhr.readState的值是无序的，所以，我们需要一个监听事件。当这个事件改变时，这个函数就会调用，而且这个函数还是异步的。

xhr.status ：http状态码，判断网络是否请求成功。

http状态码与后端向请求的客户端发送响应头有关，也就是与后端的res.writeHead里面传入的第一个参数有关。

案例：

创建一个非中文的文件夹，在里面创建一个index.js文件，在cmd.exe中敲代码npm init -y，敲回车，就会创建一个package.json文件，在package.json文件中找到script字段，敲一个“dev”：“index.js”，也就是后端运行的js文件。