面试题 AJAX相关内容

什么是ajax 使用ajax在应用程序中的优势是什么

什么是ajax

AJAX是"axynchronous  javascScript and XML"缩写。他是一
种创建交互式网络应用网络技术

Ajax的优势

1通过异步模式，提升了用户体验
2优化了浏览器和服务器之间的传输,减少了一些不必要的数据往返，减少宽带占用
3AJAX引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了
大批用户量下载服务器的负载

什么是xml

XML是扩展标记语言,能够用一系列简单的标记描述数据

AJAX都有哪些优点和缺点

ajax的优点
1 使用异步方式与服务器通信，具有更加迅速的响应能力。
2 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
3 最大的一点是页面无刷新，用户的体验非常好。
4基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
ajax的缺点
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试。

原生AJAX的步骤

1创建一个XMLHttpRequest的实例

let xhr = new XMLHttpRequest();

2 监听事件

xhr.onreadystatechange = function (){
if(xhr.readyState === 4&&xhr.status===200){
console.log(JSON.parse(xhr.responseText));
}else{
 console.log("页面或者资源找不到");
}
}

3.调用xhr.open(请求方式,请求地址,同步异步)
请求方式：GET获取数据 POST发送数据 DELETE删除 PUT修改
请求地址:url
async(同步异步 布尔 false=>异步 true=>同步 默认值是false

 xhr.open("GET","https://cnodejs.org/api/v1/topicss",false);

4.发送请求的数据

xhr.send(null)

HTTP常见状态码

1 1xx Informational （信息性状态码） 接受的请求正在处理
2 2xx Success（成功状态码） 请求正常处理完毕
3 3xx Redirection（重定向状态码） 需要进行附加操作以完成请求
4 4xx Client Error（客户端错误状态码） 服务器无法处理请求
5 Server Error（服务器错误状态码） 服务器处理请求出错

同源策略和跨域

同源：协议 端口号 域名 一致是同源，不一致就是非同源
什么是同源策略
同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
什么是跨域
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
跨域的解决方案
1JSONP原理
Jsonp是解决跨域的一种解决方案，实现原理主要是利用动态创建 script 标签，设置src属性，页面要提前定义好callback。后端会返回回调函数执行，并包裹参数callback(data)
callback 中的参数就是 json
2CORS
cors是一种跨域解决方案，它使用额外的 HTTP 头来告诉浏览器让运行在一个origin 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。
3 在vue 中主要是通过vue 脚手架中的vue.config.js 文件来配置的，通过在devServer中的proxy来配置跨域的前缀