ajax的实际用法
之前都是在index.html中直接引用main.js、style.css的，现在统一在以ajax的方法进行引用。 前示例:都是在html的head中添加链接 新示例：现在是在main.js请求css： 加载CSS
getCSS.onclick=()=>{
const request = new XMLHttpRequest();
request.open('GET','/style.css');
request.onload=()=>{//监听它的成功
//把style里面的标签的效果体现到html中去。
const style = document.creatElement('style')//创建style标签
style.innerHTML==request.respone//填写style的内容
document.head.appendChild(style) //把这个style插入到head里面
};
console.log('成功了')}
request.onerror=()=>{
监听他的失败
console.log('失败了')
}
request.send //发送这个请求
};
在index.html 中添加一个按钮
<body>
<h1>
</h1>
</body>
挑战二:加载JS 之前用这种方法：
const string = fs.readFileSync('public/index.httml')//先声明一个字符串 response.write(string)//直接回应字符串
首先对XMLHttpRequest进行了解
XMLHttpRequest来发送HTTP请求实现网站和服务器之间的数据交换。
Ajax的实现包括以下几个步骤
- 创建XMLHttpRequest实现；
- 发出HTTP请求；
- 接收服务器传回的数据
- 更新网页数据 即AJAX通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后，再进行处理。 XMLHttpRequest本身是一个构造函数，可以使用new命令生成实例。他没有任何参数。
var xhr = new XMLHttpRequest();
一旦新建实例，就可以使用open（）方法发出HTTP请求。
xhr.open('GET','http://www.baidu.com',true);
上面代码向指定的服务器网址，发出GET请求。
通信过程中，每当实例对象发生状态变化，它的readyState属性的值就会改变。这个值每一次变化，都会触发readyStateChange事件。
readyState的用法
var xhr = new XMLHttpRequest();
if (xhr.readyState === 4) {
// 请求结束，处理服务器返回的数据
} else {
// 显示提示“加载中……”
}
上面代码中，xhr.readyState等于4时，表明脚本发出的 HTTP 请求已经成功。其他情况，都表示 HTTP 请求还在进行中。
XMLHttpRequest.readyState返回一个整数，表示实例对象的当前状态。该属性只读。它可能返回以下值。
0，表示 XMLHttpRequest 实例已经生成，但是实例的open()方法还没有被调用。
1，表示open()方法已经调用，但是实例的send()方法还没有调用，仍然可以使用实例的setRequestHeader()方法，设定 HTTP 请求的头信息。
2，表示实例的send()方法已经调用，并且服务器返回的头信息和状态码已经收到。
3，表示正在接收服务器传来的数据体（body 部分）。这时，如果实例的responseType属性等于text或者空字符串，responseText属性就会包含已经收到的部分信息。
4，表示服务器返回的数据已经完全接收，或者本次接收已经失败。
3.XMLHttpRequest.onreadystatechange
然后指定回调函数，监听通信状态（readyState属性）的变化。 ajax.onreadystatechange = handleStateChange; function handleStateChange(){ //..... } 上面代码中，一旦XMLHttpRequest实例的状态发生变化，就会调用监听函数handleStateChange. 一旦拿到服务器返回的数据，AJAX 不会刷新整个网页，而是只更新网页里面的相关部分，从而不打断用户正在做的事情。
