其他面试汇总

爱胡思乱想的猫
94 阅读6分钟

jsnop

jsonp的原理，有什么优缺点？

1.原理
  Ajax请求受同源策略的影响，不允许进行跨域请求，而script标签中的src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不在返回json格式的数据，而是返回一段调用某个函数的js代码，在src中进行调用，这样就实现了跨域（jsonp的核心：则是动态添加<script>标签来调用服务器提供的 js脚本。）
  
2.优点
  1）可以跨域请求，用户传递一个callback参数给服务端，然后服务端返回数据时将这个callback参数作为函数名用来包裹json数据，这样客户端就可以随意定制自己的函数来自动处理返回数据
  2）它的兼容性更好，在更加古老的浏览器中都可以运行
  
3.缺点
  1）只支持get请求
  2）需要后端配合返回指定格式的数据

ajax

1、什么是ajax？Ajax的作用?

1.异步的JavaScript和xml,ajax是一种用来创建快速动态网页的技术。

2.作用
  通过异步模式，提升用户体验
  优化浏览器和服务器之间的传输，减少不必要的数据往返
  
3.特点：在不刷新全局的条件下，局部刷新

2、原生javascript ajax请求有几个步骤？分别是什么？

1.创建XMLHttpRequest对象
  var xhr=new XMLHttpRequset();  //兼容 IE7+, Firefox, Chrome, Opera, S  afari  
  var xhr=new ActiveXObject(); // 兼容 IE6, IE5 

2.规定请求的类型，URL以及是否异步处理请求
  xhr.open('GET'，url，true);

3.发送信息至服务器时内容编码类型
  xhr.setRequestHeader("Content-type"，"application/x-www-from-urlencoded");

4.发送请求
  xhr.send();

5.处理服务器响应数据
 //responseText 获得字符串形式的响应数据。 responseXML 获得XML 形式的响应数据。
 //异步处理
xhr.onreadystatechange=function(){
  if(xhr.readyState==4&&xhr.status=200){
     let data=xhr.responseText;
  }
}

3、JSON字符串和JSON对象的互换

1.字符串转对象
JSON.parse(json)
eval('('+jsoner+')')

2.对象转字符串
JSON.stringify(json)

4、ajax的优缺点

优点：
  1.页面无刷新
  2.使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力
  3.它的原则是按需取数据，可以最大程度的减少冗余请求，和对服务器造成的压力
  
缺点：
  1.破坏了浏览器的后退机制
  2.安全问题：允许黑客从远程服务器建立新的攻击
  3.对搜索引擎的支持比较弱
  4.不能很好的支持一些手持设备
  5.如果用户禁用了JS，网站就取不到数据

5、Ajax适用的情况和不适用的情况

适用：
  1.用ajax进行数据验证
    比如新用户注册填写的用户名，使用ajax技术，由XMLHttpRequest对象发出验证请求，根据返回的HTTP响应判断验证是否成功，整个过程不需要弹出新的窗口，和提交整个页面
  2.用ajax自动更新页面
  
不适用：
  1.需要使用后退按钮来查看历史搜索
  2.部分简单的表单提交（评论表单）
  3.需要更新大量信息

6、Ajax中常用的属性和方法？

onabort：表示请求中断后要处理的事，和xhr.abort()一起使用
ontimeout：表示请求超时，和timeout设定的事件一起使用
response：响应的主题内容
responseText：响应的具体内容是字符串，一般是json字符串
responseXML：响应的具体内容是文档
status：http状态码
statusText：状态码描述
withCredentials：表示是否允许跨域
getAllResponseHeaders：获取所有响应头信息
xhr.open()：打开URL请求
xhr.send()：发送ajax
setRequestHeader()：设置请求头，必须在xhr.open()后面

7、readyState状态码和status状态码？

  • readyState状态码
状态0：刚创建XMLHttpRequest实例，还没有发送
状态1：已调用send()方法，正在发送请求
状态2：send()方法执行完成，已经接受全部响应内容
状态3：loading正在解析响应内容
状态4：表示解析完成，可在客户端调用
  • status状态码
1xx（临时响应）：临时响应，需要请求者继续执行操作的状态码
2xx（成功）：表示成功处理了请求
3xx（重定向）：表示要完成请求，需要进一步操作
4xx（客户端错误）：
5xx（服务端错误）：

8、述ajax的交互原理，以及同步和异步的区别

  ajax简单来说就是通过XmlHttpRequest对象来向服务端发送异步请求，从服务端获取数据，然后用JavaScript来操作DOM而更新页面，这其中最关键的一步就是从服务端获取请求到的数据
  1）创建XMLHttpRequest对象：var xml=new XMLHttpRequest()
  2)建立链接：xml.open('get','url',true)
  3)发送数据：xml.send()
  4)注册执行回调方法：
    xml.onreadystatechanges=function（）{
        if(xml.readyState==4&&(xml.status>=200&&xml.status<300)){
          consloe.log(xml.responseText)
        }
    }

同步：同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，下一个任务才能执行

异步：不进入主线程，而进入‘任务队列’的任务，只有等主线程任务全部执行完毕，‘任务队列’才开始通知主线程，请求执行任务

async/await

对async和await的理解

它是为优化then链而开发出来的，async用于声明一个function是异步的，
而await用于等待一个异步方法执行完成，且await只能出现在async函数中。

【async返回一个promise】

promise

介绍一下promise

promise是异步编程的一种解决方案，它是一个对象，可以获取异步操作的信息，他的出现大大改善了异步编程的困境，避免了地狱回调。

1.promise实例有三个状态：Pending、fulfilled、rejected
2.只有异步操作的结果，可以决定当前是哪一种状态
3.状态的改变只有两种可能：pending--fulfilled、pending---rejected

缺点：
1.无法取消Promise，一旦新建它就会立即执行，无法中途取消

安全

1、说一说XXS攻击

xxs攻击是指浏览器中执行恶意脚本，然后拿到用户的信息进行操作。主要分存储型、反射型和文档型。

防范措施：
  1）不要相信用户的输入，对输入内容转码或者过滤，让其不可执行 
  2）利用CSP（浏览器中的内容安全策略：由服务器决定浏览器加载哪些资源），
  3）利用Cookie的HttpOnly属性

2、说一说CSRF攻击

CSRF，即跨站请求伪造，指的是黑客诱导用户点击链接，打开黑客的网站，然后黑客利用用户目前的登陆状态发起跨站请求（主要是利用获取cookie来通过服务器的验证）

CSRF攻击一般会有三种：1）自动GET方式 2）自动POST方式 3）诱导点击发送GET请求

防范措施：
  1）利用Cookie的SameSite属性
  2）验证来源站点（请求头中的Origin和Referer字段）
  3)CSRF Token【类似Cookie的使用】
avatar
文章
阅读
粉丝