脚本宝典收集整理的这篇文章主要介绍了和Ajax斗志斗勇的日子,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
终于!我也开始学习了Ajax!但是学完整个阶段,我只想说,这请求方式也太多了吧!!!对一个初学者来说,真的太难了!!!来看看我和Ajax斗智斗勇的那些辛酸史吧!
目录
一、Ajax简介
1.什么是Ajax?
2.Ajax的优缺点
3.接口测试工具
二、jQuery中的ajax
1.$.get()
2.$.post()
3.$.ajax()
4.ajaxStart()
5.ajaxStop()
三、XMLHttpRequest
1.XMLHttpRequest 简介
2.使用xhr发起get请求
3.使用xhr发起post请求
四、Axios
1.什么是axios
2.axios发起get请求
3.axios发起post请求
4.axios发起请求
五、JSONP
1.JSONP简介
2.自定义JSONP
3.jQuery中的JSONP
Ajax,Asynchronous JavaScript and XML,即使用JavaScript语言与服务器进行异步交互,传输的数据为XML。 Ajax并非编程语言,而是一种使用现有标准的新方法。
优点:不需要重新加载整个页面,就可以实现与服务器交换数据并更新部分网页内容。
缺点:在需要同步交互的时候,增多了对服务器的访问次数,有兼容性问题。
Postman,可以直接测试接口能否正确运行。
$.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)
})
$.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);
}
})
$.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, // 不处理发送的数据
例:上传头像文件
ajaxStart() 方法规定Ajax请求开始时运行的函数。该方法会监听当前文档中的所有Ajax请求。
$(document).ajaxStart(function())
注意:自 jQuery 版本 1.8 起,该方法只被附加到文档。
ajaxStop()方法规定所有的Ajax请求完成时运行的函数。
$(document).ajaxStop(function())
注意:自 jQuery 版本 1.8 起,该方法只被附加到文档。
1.什么是XMLHttpRequest对象?
XMLHttpRequest 对象用于在后台与服务器交换数据。
由图可知,jQuery中的Ajax方法是基于XMLHttpRequest对象封住出来的。
2.创建 XMLHttpRequest 对象的语法:
xhr = new XMLHttpRequest();
3. xhr对象的readyState属性
该属性用来表示当前Ajax请求所处的状态。每个Ajax请求必然处于一下状态中的一个。
// 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)
}
}
// 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是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。简单理解就是ajax的封装。
相比于原生的XMR对象,axios简单易用;相比于jQuery,axios更加轻量化。只专注于网络数据请求。
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为我们包装的数据。
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)
})
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(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。
同源策略:是浏览器提供的一个安全功能,它不允许非同源网站之间进行资源的交互,此时我们可以采用jsonp实现跨域获取数据。
通过<script>标签中的src属性实现跨域数据访问。注意,jsonp和Ajax之间没有任何关系!!放在本篇是因为也是一种获取数据的方式。同时,jsonp只支持GET数据请求,不支持POST数据请求。
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拼接传递。
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斗智斗勇几天后,终于可以硬气的说,拿下!!
以上是脚本宝典为你收集整理的和Ajax斗志斗勇的日子全部内容,希望文章能够帮你解决和Ajax斗志斗勇的日子所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。