前端的工作就是【写页面—发请求—拿数据–再写页面】
今天介绍的ajax就是异步与服务器端通信，拿数据。
ajax是什么
异步的js和json（数据传输格式），异步与服务器端通信（获取后端数据），实现前后端分离。
常用于1：局部刷新 2：快速创建动态网页
异步：就是并发执行，不会阻塞后面代码的执行
同步：调用发出后，在没有得到结果前，会阻塞后面代码的执行
线程
js是单线程的，即只能在一个线程从上到下依次执行，主线程执行同步代码。
js的运行环境浏览器或者node都是多线程的，当【主线程】遇到一些异步操作，就会交给【事件队列】去处理，异步线程都是同步进行的且异步都有回调，异步执行结束后，将回调结果放入消息队列中保存，当主线程空闲时就会到【消息队列】中取拿到主线程去执行，不断地循环。。。
常见的异步有【回调函数】，【定时器】，【promise】，【async】等
ajax工作原理
Ajax 的工作原理相当于在用户和服务器之间加了一个中间层（Ajax 引擎），使用户操作与服务器响应异步化。并不是所有的用户请求都提交
给服务器，像一些【数据验证】和【数据处理】等都交给Ajax 引擎自己来做，只有确定需要从【服务器读取新数据】时再由 Ajax 引擎代为向服务器提交请求。
Ajax 其核心有 JavaScript、XMLHTTPRequest、DOM 对象组成，通过 XMLHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript 来操作 DOM 而更新页面。这其中最关
键的一步就是从服务器获得请求数据
ajax工作流程
1.创建一个xhr对象
let xhr=window.XMLHttpRequest ? new XMLHttpRequest()
:new ActiveObject(‘Microsoft.XMLHTTP’)
2.连接数据库
xhr.open(‘GET’,url,true)
3.发请求
xhr.send()
4.接收返回(是个回调返回数据)
xhr.onreadystatechange=function（）{
…if( xhr.readyState === 4 && xhr.status ===200){
… 请求状态码为4：连接成功 响应状态码为200成功 404（未找到请求的数据） 500服务器尝试处理请求
…if(fn instance Function){
…fn()
…}
…}
}
注意：post请求时，发请求前即xhr.send(data)前面要加上
xhr.setRequestHeader(‘Content-type’,‘application/x-www-form-urlencoded;charset=utf-8’);
封装ajax
1.用函数
2.面向对象
两种方式
ajax返回，转成json对象
ajax返回的是字符串类型的数据，要解析成json对象返给【前端】
1：eval（）不推荐
2：JSON.parse(res);推荐
3：let json=new Function(‘return’+res)();兼容性高
解决缓存问题
（在url之后加一个时间戳）
例如ajax（‘xx.json?t=’+new Date().getTime(),fn(){},fn(){}）
乱码问题
拿到外部的数据一定要先检查，文件–另存为–编码选择utf-8格式
get和post区别
get：URL地址后传参（请求头） 传递数据小于1k 快 不安全
post：http请求体中 传递大小2M 慢 安全
ajax存在的问题
1.异步同步进行 顺序没法保证
2.有依赖关系的，异步不能正确执行
3.ajax受同源策略影响，不能跨域
（1,2—promise 3—jsonp）
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
