? ? ? ? 终于！我也开始学习了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斗智斗勇几天后，终于可以硬气的说，拿下！！
