问：ajax的原理以及优缺点？
答：ajax通过XMLHttpRequest对象向服务器发送异步请求，从服务器获取数据而不阻塞用户操作，实现局部更新页面(原理)；使用XMLHttpRequest发送异步请求是ajax最出色的特性，对于客户端，他不会阻塞用户操作，提升了程序的响应速度，对于服务器，他减少了不必要的数据交互，并且将部分服务器的工作转交给客户端，减轻了服务器的负担，而且ajax是基于js的技术，兼容性好(优点)；局部更新是ajax最大的优点，也带来了很大的缺陷，因为浏览器仅能记忆历史记录中的静态页面，ajax对页面进行了动态更新，所以无法使用back退回用户想要退回的页面状态，并且ajax暴露了与服务器交互的细节，存在安全隐患，ajax通过向接口发送参数请求数据的方式也决定了他对于搜索引擎的支持较弱，搜索匹配接口参数字段，一旦字段与接口参数匹配不上，很容易造成请求数据错误，或者增大请求数据流量，降低整个程序的性能，并且ajax破坏了程序的异常处理机制(Ajax.dll,Ajaxpro.dll)。
问：Ajax的实现流程是怎样的？
答：
1、创建 XMLHTTPRequest 对象,也就是创建一个异步调用对象.(new xhr)
2、创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息.(xhr.open)
3、设置响应 HTTP 请求状态变化的回调函数.(xhr.addEventListener)
4、发送 HTTP 请求.(xhr.send)
5、获取异步调用返回的数据.(xhr.responseText)
6、使用 JavaScript 和 DOM 实现局部刷新.
代码实现：
function checkUsername() {
//创建 XMLHTTPRequest 对象
if(window.XMLHTTPRequest) {
//在 IE6 以上的版本以及其他内核的浏览器(Mozilla)等
let = new XMLHTTPRequest();
}else if(window.ActiveXObject) {
//在 IE6 以下的版本
let xhr = new ActiveXObject();
}
//创建 HTTP 请求
(
open：该方法创建 HTTP 请求
第一个参数是指定提交方式(post、get)
第二个参数是指定要提交的地址是哪
第三个参数是指定是异步还是同步(true 表示异步，false 表示同步)
第四和第五参数在 HTTP 认证的时候会用到。是可选的)
xhr.open("POST", "Servlet1", true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//指定回调函数
xhr.addEventListener('loadend',()=>{
//判断请求状态码是否是 4 =》 数据接收完成
if(xhr.readyState==4) {
//再判断状态码是否为 200 =》 成功
if(xhr.status==200) {
//得到服务端返回的文本数据
let text = xhr.responseText
//渲染
//...
}
}
})
//xhr.onreadystatechange = response22;
//准备发送给服务器的内容
var name = document.getElementById("username").value;
//发送 HTTP 请求
xhr.send("username=" + name);
}
3
问：ajax接受到的数据类型有哪些，数据如何处理？
答：string/json/二进制数据流,string直接使用；json字符串反序列化，转成引用类型使用；二进制数据流前端用Blob转换。json字符串转对象两种方式eval与parse： eval('("+data+")')/parse(data),eval不会对传入参数做判断，可能传入不符合json格式的数据，比如js代码，存在安全隐患，比如如果字符串里解析出来window.location...
问：请解释一下js同源策略？
答：同源策略是一个重要的安全策略，它用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。
它能帮助阻隔恶意文档，减少可能被攻击的媒介。例如，它可以防止互联网上的恶意网站在浏览器中运行 JS 脚本，从第三方网络邮件服务（用户已登录）或公司内网（因没有公共 IP 地址而受到保护，不会被攻击者直接访问）读取数据，并将这些数据转发给攻击者。
问：什么是跨域问题？有没有遇到过跨域问题？怎么解决的？
答：因为浏览器同源策略的限制，从一个源的文档或者脚本访问另一个源的资源就产生了跨域。
前后端分离的项目不在同一个源开发，出现跨域，无法进行数据通信。
在开发环境中解决方法有2种，第一种是设置代/理/服/务/器，代/理/服/务/器与客户端同源，符合同源策略，代/理/服/务/器与目标服务器属于http通信，不受到浏览器同源策略影响，代/理/服/务/器又分为两种，正向代/理(proxy代/理(node中间代/理))与反向代/理，正向代/理就是配置一个代/理/服/务/器代替客户端向目标服务器发送请求与接收目标服务器的响应；反向代/理就是配置一个代/理/服/务/器代替服务器接收请求与发送响应；第2种方法是采用CORS(跨域资源共享)，CORS是一种基于HTTP响应头(Access-Control-Allow-Origin：*)的机制，该机制通过允许目标服务器标示除了他自己以外的其他源，使得浏览器允许这些源访问加载自己的资源。
在生产环境中，可以把前端项目和后端项目部署到同源解决跨域：
//npm i express
import express from 'express'
const server = express()
server.use(express.static('./public'))
