和Ajax斗志斗勇的日子
终于！我也开始学习了Ajax！但是学完整个阶段，我只想说，这请求方式也太多了吧！！！对一个初学者来说，真的太难了！！！来看看我和Ajax斗智斗勇的那些辛酸史吧！
目录
一、Ajax简介
1.什么是Ajax？
Ajax，Asynchronous JavaScript and XML，即使用JavaScript语言与服务器进行异步交互，传输的数据为XML。
Ajax并非编程语言，而是一种使用现有标准的新方法。
2.Ajax的优缺点
优点：不需要重新加载整个页面，就可以实现与服务器交换数据并更新部分网页内容。
缺点:在需要同步交互的时候，增多了对服务器的访问次数，有兼容性问题。
3.接口测试工具
Postman，可以直接测试接口能否正确运行。
二、jQuery中的ajax
1.$.get()
$.get() 方法使用 HTTP GET 请求从服务器加载数据。
$.get(URL,data,function(data,status,xhr),dataType)
例：获取id为1的图书列表
$.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function (res) {
console.log(res)
})2.$.post()
$.post() 方法使用 HTTP POST 请求从服务器加载数据。
$.post(URL,data,function(data,status,xhr),dataType)
例：添加图书
$.post('http://www.liulongbin.top:3006/api/addbook',
{ bookname: "红楼梦", author: "曹雪芹", publisher: "北京出版社" },
function (res) {
console.log(res);
}
})3.$.ajax()
$.ajax()既可以向服务器请求数据，又可以向服务器提交数据
$.ajax({method,URl,data,function(data,status,xhr),dataType})
例1：使用$.ajax()向服务器请求数据
$.ajax({
method:'GET',
url:'http://www.liulongbin.top:3006/api/getbooks',
// data:{
// id :1
// },
success :function (res) {
console.log(res);
}
})例2：使用$.ajax()向服务器发送数据
$.ajax({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/addbook',
data: {
bookname: "红楼梦", author: "曹雪芹", publisher: "北京出版社"
},
success: function (res) {
console.log(res);
}
})使用ajax上传文件
文件上传时，不再是普通的String类型，需要用到H5的FormData方法，同时在ajax中加上两条属性：
contentType : false, //不设置Content-Type请求头
processData : false, // 不处理发送的数据
例：上传头像文件
4.ajaxStart()
ajaxStart() 方法规定Ajax请求开始时运行的函数。该方法会监听当前文档中的所有Ajax请求。
$(document).ajaxStart(function())
注意：自 jQuery 版本 1.8 起，该方法只被附加到文档。
5.ajaxStop()
ajaxStop()方法规定所有的Ajax请求完成时运行的函数。
$(document).ajaxStop(function())
注意：自 jQuery 版本 1.8 起，该方法只被附加到文档。
三、XMLHttpRequest
1.XMLHttpRequest 简介
1.什么是XMLHttpRequest对象？
XMLHttpRequest 对象用于在后台与服务器交换数据。
由图可知，jQuery中的Ajax方法是基于XMLHttpRequest对象封住出来的。
2.创建 XMLHttpRequest 对象的语法：
xhr = new XMLHttpRequest();
3. xhr对象的readyState属性
该属性用来表示当前Ajax请求所处的状态。每个Ajax请求必然处于一下状态中的一个。
2.使用xhr发起get请求
// 1. 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数 // 指定请求方式 与 url地址
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
// 3. 调用 send 函数 // 发起Ajax请求
xhr.send()
// 4. 监听 onreadystatechange 事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 获取服务器响应的数据
console.log(xhr.responseText)
}
}3.使用xhr发起post请求
// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
// 3. 设置 Content-Type 属性
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4. 调用 send 函数
xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社')
// 5. 监听事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)
}
}注意：设置Content-Type是一个固定写法，必须写在open()后面send()前面。
例：使用xhr上传文件
注意：在使用xhr传递参数时，一定要将传递的参数对象改写成拼接字符串的形式再传递，否则会传不进去！！！！
四、Axios
1.什么是axios
Axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。简单理解就是ajax的封装。
相比于原生的XMR对象，axios简单易用；相比于jQuery，axios更加轻量化。只专注于网络数据请求。
2.axios发起get请求
axios.get(URL,{params:{/*参数*/}}).then(callback)
例：使用axios发起get请求
var url = 'http://www.liulongbin.top:3006/api/getbooks'
var paramsObj = { id: 1 }
axios.get(url, { params: paramsObj }).then(function (res) {
console.log(res.data)
})注意：res.data才是服务器响应回来的真实数据，res是axios为我们包装的数据。
3.axios发起post请求
axios.get(URL,{params:{/*参数*/}}).then(callback)
例：使用axios发起post请求
var url = 'http://www.liulongbin.top:3006/api/addbook'
var dataObj = { bookname: "红楼梦", author: "曹雪芹", publisher: "北京出版社" }
axios.post(url, dataObj).then(function (res) {
console.log(res.data)
})4.axios发起请求
axios中也提供了类似jQuery中的$.ajax()的函数。语法如下：
axios({
method:'请求类型',
url:'请求的URL地址'，
data:{ /* POST数据 */},
params:{ /* GET数据 */}
}).then(callbak)
注意：根据请求的类型不同，提交参数的方式也不同！
例：使用axios发起get请求
var url = 'http://www.liulongbin.top:3006/api/getbooks'
var paramsData = { id: 2 }
axios({
method: 'GET',
url: url,
params: paramsData
}).then(function (res) {
console.log(res.data)
})例：使用axios发起post请求
axios({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/addbook',
data: { bookname: "红楼梦", author: "曹雪芹", publisher: "北京出版社" }
}).then(function (res) {
console.log(res.data)
})五、JSONP
1.JSONP简介
- 什么是jsonp？
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
- 为什么需要jsonp？
同源策略：是浏览器提供的一个安全功能，它不允许非同源网站之间进行资源的交互，此时我们可以采用jsonp实现跨域获取数据。
- jsonp的实现原理？
通过<script>标签中的src属性实现跨域数据访问。注意，jsonp和Ajax之间没有任何关系！!放在本篇是因为也是一种获取数据的方式。同时，jsonp只支持GET数据请求，不支持POST数据请求。
2.自定义JSONP
1.定义一个success回调函数
2.通过<script>标签，请求接口数据
<script>
function success(data) {
console.log('JSONP响应回来的数据是：')
console.log(data)
}
</script>
<script src="http://www.liulongbin.top:3006/api/jsonp?callback=success&name=ls&age=30"></script>
在jsonp中参数是通过url拼接传递。
3.jQuery中的JSONP
jQuery不仅可以发起真正的Ajax请求，也可以发起jsonp请求。只需要在发起请求时添加dataType：'jsonp',此时发起的就是jsonp数据请求。在jQuery中的jsonp请求实现原理是动态添加和移出<script>标签。
function success(data) {
console.log('JSONP响应回来的数据是：')
console.log(data)
}
// jQuery中的jsonp
$.ajax({
url:'http://www.liulongbin.top:3006/api/jsonp?callback=success&name=ls&age=30',
dataType:'jsonp',
success:function(res){
console.log(res);
}
})此时我们打开开发者工具发现，XHR中不再有请求记录，在js中有请求记录，证明这是一个jsonp请求。
另外，使用jQuery发起jsonp请求，jQuery会给我们返回一个回调函数属性名和回调函数参数值名字，我们可以通过jsonp和jsonpCallback来指定。
指定前：
指定后：
指定语句：
通篇梳理下来，在刚接触这个阶段，我们需要熟练使用用ajax和axios发起数据请求以及使用jsonp实现跨域数据请求，这里面的弯弯绕绕说多不多说少不少的，多理解多运用总是可以掌握的，在跟Ajax斗智斗勇几天后，终于可以硬气的说，拿下！！