哈喽哈喽，这里是小菜不拖延博主
ajax的特点
- 创建异步请求的技术 （最开始使用的不是json，而是xml格式来传输数据）
优点
- 可以无需刷新页面而与服务器端进行通信。
从服务器获取数据或将数据发送到服务器，然后在页面中动态更新内容，然后将响应的数据添加到页面中的特定位置，而不需要刷新整个页面，websocket（建立在tcp之上）、fetch等都可以实现无刷新请求
- 允许根据用户时间来更新部分页面的内容
缺点
- 不能后退
- 存在跨域
- seo不友好
seo即搜索引擎优化（Search Engine Optimization），是一系列的优化技术和策略，旨在提高网站在搜索引擎（如Google、百度等）中的有机排名，从而增加网站的曝光度和流量。因为很多数据需要我们触发用户事件（比如点击等）才能请求到数据，
使用
onreadystatechange 事件
请求
//创建对象
xmlhttp=new XMLHttpRequest();
//发送
xmlhttp.open("GET","url",async（true,false）);
xmlhttp.send();
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
//如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
//通过调用`setRequestHeader`方法设置`Content-type`请求头的目的是告诉服务器发送的数据的格式和类型。
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
//接收json
//事件绑定
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
// console.log(xhr.response);
// result.innerHTML = xhr.response;
// 1. 手动对数据转化
let data = JSON.parse(xhr.response);
// 2. 自动转换,先设置xhr.responseType='json'
console.log(xhr.response);
result.innerHTML = xhr.response.name;
}
}
}
解决一些问题
ie缓存
由于缓存的存在，我们页面上可能展示不是最新的数据，针对这个问题处理：xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now());
请求超时
xhr.timeout=事件
xhr.ontimeout=function(){触发事件}
请求err
xhr.onerr=function(){}
取消请求
xhr.abort
如果请求已经被发送到服务器，并且服务器已经接收了该请求，那么该请求将不能被取消。
重复请求解决思路
定义变量，判断当前状态是否在请求，如果在请求就abort当前请求重新创建请求，只有onreadstate===4，也就是请求完成的时候才置为false，表示请求已经结束
跨域
同源策略
协议、域名、端口必须一致（ajax默认遵循）
解决跨域
jsonp
非官方，自己开发出来，只支持get请求
使用script的src引入标签
<script src="http://127.0.0.1:5500/%E8%AF%BE%E5%A0%82/%E4%BB%A3%E7%A0%81/7-%E8%B7%A8%E5%9F%9F/2-JSONP/js/app.js"></script>
cors 官方解决
原理：通过设置一个响应头来告诉浏览器，该请求允许跨域
服务器设置：
1. `response.setHeader("Access-Control-Allow-Origin", "*")` 表示允许所有来源（即任何域名）的跨域请求访问服务器资源。
1. `response.setHeader("Access-Control-Allow-Headers", '*')` 指定允许跨域请求携带的自定义请求头。
1. `response.setHeader("Access-Control-Allow-Method", '*')` 表示允许发送的跨域请求使用任意HTTP方法（GET、POST、PUT等）。
