2023高薪前端面试题（二、前端核心——Ajax）

原生Ajax

Ajax简介

• Ajax全程为Asynchronous JavaScript + XML，就是异步的JS和XML
• 通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势是：无刷新获取数据，实现局部刷新
• Ajax是一种用于创建快速动态网页的技术
• AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

Ajax 的应用场景

1. 页面上拉加载更多数据
2. 列表数据无刷新分页
3. 表单项离开焦点数据验证
4. 搜索框提示文字下拉列表

Ajax的作用、优缺点

作用：ajax用来与后台交互

优点：

• 最大的优点就是可以实现页面无刷新更新数据，在页面内与服务器通信，提高用户浏览网站应用的体验。
• 使用异步的方式与服务器通信，不需要中断操作。
• 可以把以前服务器负担的工作转嫁给客户端，减轻服务器和带宽，可以最大程度减少冗余请求。
• 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：

• Ajax干掉了Back和History功能，即对浏览器机制的破坏， 无法使用浏览器前进后退。
• 安全问题：跨站脚本攻击、SQL注入攻击等。
• 对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。

json字符串转换集json对象、json对象转换json字符串

字符串转对象

JSON.parse(json)
eval('(' + jsonstr + ')')  

 对象转字符串

JSON.stringify(json)

 

ajax请求如何取消

（1）原生xhr取消请求

var xhr = new XMLHttpRequest();
xhr.abort();

 ajax常见面试题 - 掘金

---

• AJAX的出现与跨域处理

XMLHttpRequest JSON AJAX CORS 四个名词来开会

如何发请求

5种发起请求的方式，主流的、非主流的。

何种方式	请求方法
最常见的form表单	默认GET，多用POST,只此两种	会刷新页面或者新开页面
a 标签	GET请求	也会刷新页面或者新开页面
img的src属性	GET	只能以图片的形式展现
link标签	GET	只能以CSS、favicon的形式展现
script标签	GET	只能以脚本的形式运行

可是

• 我们可能想用GET POST PUT DELETE 方法
• 不想刷新整个页面，想用一种更易于理解的方式来响应

AJAX出现

浏览器和服务器交互模式 V1.0

在AJAX未出现之前，浏览器想从服务器获得资源，注意是获取资源，会经过如下一个过程

• 浏览器发起请求->服务器接到请求响应给你HTML文档->浏览器收到资源，刷新页面，加载获得的的HTML。简略的过程

交互模式2.0

既然AJAX是一系列的技术的组合体，接下来认识一下其中的几位主角

XMLHttpRequest

XMLHttpRequest对象是用来在浏览器和服务器之间传输数据的。

古代的操作的是：

1. 浏览器构造XMLHttpRequest实例化对象
2. 用这个对象发起请求
3. 服务器响应一个XML格式的字符串，是字符串，是字符串，是字符串，也就是说响应的第四部分是字符串。
4. JS解析符合XML格式的字符串，更新局部页面。

什么是XML，可扩展标记语言。

XMLHttpRequest实例的详解

正如上面的前端代码片段写的一样，主要用到了open() send()方法， onreadystatechange readyState 属性。

1. request.open(method, URL, async)方法。

   • 一般用三个参数，第一个参数是请求的方法，可以用GET POST DELETE PUT等等，URL是用访问的路径，async是是否使用同步，默认true,开启异步，不需要做修改即可，所以实际中只写前两个参数

• 如果非要写false，开启同步，会对浏览器有阻塞效应，而且如果值为false,则send()方法