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

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

1.什么是json？

2.什么是jsonp？

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

4.Ajax和jsonp的区别？

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

1、定义不同

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

2、核心不同

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

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

二、Ajax、axios和jsonp之间的关系        

1、相同点

都是数据交互方式

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

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

2、区别

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

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

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

延伸

Ajax详解：Ajax的概念及jQuery中的Ajax的3种方法

JSONP详解：同源策略、跨域及通过JSONP实现跨域数据请求

JSON详解：数据交换格式（XML与JSON）

axios详解：什么是axios？axios如何发起网络请求？