刷新页面做网络请求的方式
前端刷新页面有两种技术：1.整个页面一起整体刷新，跳转到一个新的网页，传统的web请求页面提交表单数据在用户点击了提交按钮时页面就会强制整体刷新，体验不友好；2.局部刷新，用XMLHttpRequest对象来向服务器发起异步网络请求，从服务器获得数据，然后用JS来操作DOM更新页面。
AJAX技术
AJAX技术就是在页面不是整体刷新的情况下，向服务器发送网络请求，达到页面和服务器的异步交互，就是局部刷新。
AJAX并非编程语言不是JavaScript规范仅仅组合了浏览器内建的XMLHttpRequest 对象（用于从 web 服务器请求数据）和JavaScript以及HTML DOM操作（用于显示或使用数据）
XMLHttpRequest
1.XMLHttpRequest对象是AJAX技术中最重要的一个对象，这个对象用于做网络请求的。
2.XMLHttpRequest是window的一个方法是全局构造函数，可以用于创建XMLHttpRequest对象。使用AJAX更多的是编写客户端代码，而不是服务端的代码。
低版本的IE浏览器没有XMLHttpRequest全局构造函数，只有ActiveXObject构造函数，这个函数需要传参数"Microsoft.XMLHTTP"
创建ajax对象兼容型写法
let xhr=new XMLHttpRequest()||new ActiveXObject("Microsoft.XMLHTTP");
XMLHttpRequest对象方法
1.open()(String method,String url,boolean asynch,String username,String password)，该方法创建http请求
参数：
第1个参数是指定提交方式(POST、GET)
第2个参数是指定文件在服务器上的位置
第3个参数是指定是异步还是同步(true表示异步，false表示同步)
第4和第5个参数在http认证的时候会用到。是可选的
2.send(content)，发送请求给服务器，传人的参数是字符串
如果是GET方式，并不需要填写参数，填写了参数也不会把参数发送给后端服务器
如果是POST方式，把要提交的参数写上去，会把参数发送给后端服务器
XMLHttpRequest对象属性
1.onreadystatechange：请求状态改变的事件触发器（readyState变化时会调用此方法），一般用于指定回调函数。
2.readyState：只要请求状态readyState改变1次，onreadystatechange指定的回调函数就被调用1次，它有5个状态
1：open方法成功调用以后，表示已经和后端服务器建立了连接
2：服务器已经应答客户端的请求，后端服务器正在处理信息
3：交互中，Http头信息已经接收，响应数据尚未接收。
4：完成，后端服务器已经发送了数据包客户端数据接收完成
3.responseText：服务器返回的文本内容
4.status：服务器返回的状态码，也就是HTTP 状态码,后端代码可以设置,不设置默认就是200
常见的 HTTP 状态码：
200 - 请求成功
301 - 资源（网页等）被永久转移到其它URL
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误
这个状态码可以根据业务数据不同来设置，只要ajax对象的readyState的状态码为4就是网络请求成功，得到了一份数据包，至于这份数据包的数据正确与否是程序员自己设定的。
编写AJAX程序，创建XMLHttpRequest步骤
前端页面代码
<body>
<style>
.contentbox {
background-color: aquamarine;
width: 400px;
height: 200px;
}
.btn {
background-color: bisque;
margin-top: 10px;
border-radius: 20px;
}
</style>
<!-- 创建的div用于显示服务器返回的数据 -->
<div class="contentbox"></div>
<!-- 当用户点击按钮的时候，就触发事件做网络请求向后端服务器请求数据资源 -->
<button onclick="fnload()" class="btn">点击显示数据</button>
<script>
let contentbox=document.querySelector(".contentbox");
function fnload(){
console.log(111)
//1.创建XMLHttpRequest对象，用于做网络请求
let xhr=new XMLHttpRequest()||new ActiveXObject("Microsoft.XMLHTTP");
//2.配置与后端服务器连接信息
xhr.open("GET","./AJAX1.json",true);
//3.发送网络请求给服务器，可以传入的参数是字符串
xhr.send();
//4.监听网络状态，等待后端服务器发送的数据包
xhr.onreadystatechange=function(){
//xhr.status等于200表示网络请求成功了后端服务器发送了正确的业务数据
if(xhr.readyState==4&&xhr.status==200){
contentbox.innerHTML=xhr.responseText;
}else if(xhr.readyState==4&&xhr.status==404){
//xhr.status等于404表示网络请求也成功了但是后端服务器发送了错误的业务数据
contentbox.innerHTML="not found";
};
};
};
</script>
</body>
后端服务器代码
let http=require("http");
let fs=require("fs");
let url=require("url");
let mime=require("mime");
let app=http.createServer((req,res)=>{
let pathname=url.parse(req.url).pathname;
let type1=mime.getType(req.url);
if(pathname=="/"){pathname="/index.html"};
//向请求的客户端发送响应头
res.writeHead(200,{"Content-Type":type1});
fs.readFile(__dirname+"/src"+pathname,(err,data)=>{
res.end(data);
});
});
app.listen(8087);
AJAX 如何工作
当网页中发生一个事件时（页面加载、按钮点击）
1.由 JavaScript 创建 XMLHttpRequest 对象
2.XMLHttpRequest 对象向 web 服务器发送请求 服务器处理该请求，服务器将响应发送回网页
3.由JavaScript读取响应，由JavaScript和DOM操作执行正确的动作（比如更新页面，显示数据到页面上）
req对象的writeHead() 方法
设置响应头有两种方法：res.setHeader()和res.writeHead()
res.setHeader()的写法：
res.setHeader('Content-type', 'text/plain;charset=utf-8')
res.writeHead()的写法：
参数1：必选，三位数的http状态码
参数2：可选，可有可无
参数3：可选，告诉浏览器我发给你的数据是什么类型的
res.writeHead(200, { 'Content-type': 'text/html;charset=utf-8' })
ps:
1.res.setHeader()和res.writeHead()必须在res.end()之前调用
2.如果两者同时存在，要先写res.setHeader()，后写res.writeHead()。
