2024年最新快速搞定前端JS面试 -- 第九章 JS-Web-API-Ajax，面试真题解析人民一词86次

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

1. 什么是跨域（同源策略）

---

Ajax请求时，浏览器要求当前网页和server必须同源（安全）

同源：协议、域名、端口，三者必须一致

（例子：前端：http://a.com:8080/  server: https://b.com/api/xxx ）

加载图片css js 可以无视同源策略

可用于统计打点，可以使用第三方统计服务

jsonp.js

callback(name:‘zhangsan’)

jQuery实现jsonp

$.ajax({

url: ‘http://localhost:8002/x-origin.json’,

dataTtype: ‘jsonp’, // 发送ajax请求

jsonpCallback: ‘callback’, // 函数名

success : function(data) {

console.log(data)

}

})

为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

ajax 的核心是通过 XmlHttpRequest 获取非本页内容，而 jsonp 的核心则是动态添加

参考链接：透彻理解JSONP原理

**JSONP的原理：**ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。

3. CORS

---

CORS：全称"跨域资源共享"（Cross-origin resource sharing）。

CORS需要浏览器和服务器同时支持，才可以实现跨域请求。CORS的整个过程都由浏览器自动完成，前端无需做任何设置，跟平时发送ajax请求并无差异。因此，实现CORS的关键在于服务器，只要服务器实现CORS接口，就可以实现跨域通信。

对于前端来说无需做任何配置，与发送普通ajax请求无异。唯一需要注意的是，需要携带cookie信息时，需要将withCredentials设置为true即可。CORS的配置，完全在后端设置，配置起来也比较容易，目前对于大部分浏览器兼容性也比较好。CORS优势也比较明显，可以实现任何类型的请求，相较于JSONP跨域只能使用get请求来说，也更加便于我们使用。

参考链接：CORS原理及详细使用

三、ajax常用插件

==============

1. 使用jQuery实现ajax

---

2. fetch

---

3. axios

---

四、问题解答

==========

1. 手写简单的Ajax

// 使用promise实现ajax

function ajax(url) {

const p = new Promise((resolve, reject) => {

const xhr = new XMLHttpRequest()

xhr.open(‘GET’, url, true)

xhr.onreadystatechange = function () {

if (xhr.readyState === 4) { // 返回完成

if (xhr.status === 200) { // 成功

resolve(

JSON.parse(xhr.responseText)

)

} else if (xhr.status === 404 || xhr.status === 500) {

reject(new Error(‘404 not found’))

}

}

}

xhr.send(null)

})

return p

}

算法刷题

大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

1. 疯狂编程

2. 学习效果可视化

3. 写博客

4. 阅读优秀代码

5. 心态调整

分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

1. 疯狂编程

2. 学习效果可视化

3. 写博客

4. 阅读优秀代码

5. 心态调整