前端自学笔记：JSON、JSONP和JS之间的区别，Ajax、axios和jsonp的区别

tearsroad 8月 06, 2023 38 0

学到ajax就不可避免的面临着几个问题：

1.什么是json？

2.什么是jsonp？

3.json、jsonp和js三者之间的区别？

4.Ajax和jsonp的区别？

一、JSON、JSONP和JS之间的区别

名称	定义	用途	全称
JSON	用字符串来表示jst对象数据或数组数据，它使用文本表示一个JS对象或数据信息。	是一种数据交换格式	JavaScript Object Notation，是JavaScript的一个子集
JSONP	前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案	解决浏览器跨域问题	JSON with Padding，是JSON的一种使用模式
JS	开发Web页面的脚本语言	编程语言	JavaScript，由ECMAScript、DOM和BOM三部分组成

名称	核心
JSON	通过XmlHttpRequest获取非本页内容
JSONP	动态添加<script>标签的src属性来调用服务器提供的js脚本
JS	ECMAScript描述了该JS的语法和基本对象，DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口

总结：JSON是描述信息的格式，JSONP是信息传递双方约定的方法，JS是编程语言。

都是数据交互方式

都是请求URL，然后把服务器返回的数据进行处理

ajax和axios底层都是封装XMLHttpRequest对象

名称	原理不同	用途
Ajax	客户端发送请求，请求交给xhr，xhr把请求提交给服务器，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上	发起网络请求
axios	底层封装是XMLHttpRequest对象，实现原理跟Ajax同样	是一个基于promise的专门用于网络请求的库
JSONP	由于`浏览器同源策略`的限制，网页中`无法通过 Ajax 请求非同源的接口数据`。但是 `<script>` 标签不受浏览器同源策略的影响，可以通过 src 属性，请求非同源的 js 脚本src=”xxx”>不受同源策略限制解决跨域请求	解决浏览器跨域问题

总结：ajax就是一种局部刷新页面，jsonp是一种跨域请求。

注意点：JSONP不属于真正的Ajax请求，因为它没有使用XMLHttpRequest这个对象。