XMLHttpRequest的Ajax请求"/>
基于XMLHttpRequest的Ajax请求
文章目录
- 一、GET请求
- 二、POST请求
- 三、URL编码与解码
- 三、JSON字符串和JS对象互转
- 四、XMLHttpRequest Level2的新特性
- 1.设置超时时间timeout
- 2.FormData对象管理表单数据
- 3.上传文件案例
- 五、Ajax请求开始与结束
- 六、axios请求
一、GET请求
- 创建xhr对象
- 调用open()函数
- 调用 send 函数
- 监听 onreadystatechange 事件
var xhr = new XMLHttpRequest()xhr.open('GET', ':3006/api/getbooks')xhr.send()xhr.onreadystatechange = function () {//监听xhr对象的请求状态readyState;与服务器响应的状态statusif (xhr.readyState === 4 && xhr.status === 200) {// 获取服务器响应的数据console.log(xhr.responseText)}}
二、POST请求
- 创建 xhr 对象
- 调用 open 函数
- 设置 Content-Type 属性
- 调用 send 函数
- 监听onreadystatechange事件
var xhr = new XMLHttpRequest()xhr.open('POST', ':3006/api/addbook')xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')//固定写法xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社')xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText)}}
三、URL编码与解码
encodeURI()编码函数decodeURI()解码函数
var str = '程序员'var str2 = encodeURI(str)console.log(str2)console.log('----------')var str3 = decodeURI('%E7%A8%8B%E5%BA%8F')console.log(str3) //程序
三、JSON字符串和JS对象互转
- 要实现从 JSON 字符串转换为 JS 对象，使用
JSON.parse()方法： - 要实现从 JS 对象转换为 JSON 字符串，使用
JSON.stringify()方法：
var obj = JSON.parse('{"a": "Hello", "b": "World"}')
//结果是 {a: 'Hello', b: 'World'}var json = JSON.stringify({a: 'Hello', b: 'World'})
//结果是 '{"a": "Hello", "b": "World"}'
序列化和反序列化
把数据对象转换为字符串的过程，叫做序列化，例如：调用 JSON.stringify() 函数的操作，叫做 JSON 序列化。
把字符串转换为数据对象的过程，叫做反序列化，例如：调用 JSON.parse() 函数的操作，叫做 JSON 反序列化。
四、XMLHttpRequest Level2的新特性
1.设置超时时间timeout
//创建xhr对象后写// 设置 超时时间xhr.timeout = 30// 设置超时以后的处理函数xhr.ontimeout = function () {console.log('请求超时了！')}xhr.open()xhr.send()
2.FormData对象管理表单数据
// 1. 创建 FormData 实例var fd = new FormData() // 可以将form表单直接填入FormData(form)，拿到表单数据// 2. 调用 append 函数，向 fd 中追加数据fd.append('uname', 'zs')fd.append('upwd', '123456')var xhr = new XMLHttpRequest()xhr.open('POST', ':3006/api/formdata')xhr.send(fd)xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {console.log(JSON.parse(xhr.responseText))}}
3.上传文件案例
导入需要的库
<link rel="stylesheet" href="./bootstrap.css" /><script src="./jquery.js"></script>
<body><!-- 1. 文件选择框 --><input type="file" id="file1" /><!-- 2. 上传文件的按钮 --><button id="btnUpload">上传文件</button><!-- bootstrap 中的进度条 --><div class="progress" style="width: 500px; margin: 15px 10px;"><div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">0%</div></div><br /><!-- 3. img 标签，来显示上传成功以后的图片 --><img src="" alt="" id="img" width="800" /><script>// 1. 获取到文件上传按钮var btnUpload = document.querySelector('#btnUpload')// 2. 为按钮绑定单击事件处理函数btnUpload.addEventListener('click', function () {// 3. 获取到用户选择的文件列表var files = document.querySelector('#file1').filesif (files.length <= 0) {return alert('请选择要上传的文件！')}var fd = new FormData()// 将用户选择的文件，添加到 FormData 中fd.append('avatar', files[0])var xhr = new XMLHttpRequest()// 监听文件上传的进度// 监听 xhr.upload 的 onprogress 事件xhr.upload.onprogress = function (e) {// e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度if (e.lengthComputable) {// 计算出上传的进度// e.loaded 已传输的字节// e.total 需传输的总字节var procentComplete = Math.ceil((e.loaded / e.total) * 100)console.log(procentComplete)// 动态设置进度条$('#percent').attr('style', 'width: ' + procentComplete + '%;').html(procentComplete + '%')}}xhr.upload.onload = function () {$('#percent')// 移除上传中的类样式.removeClass()// 添加上传完成的类样式.addClass('progress-bar progress-bar-success')}xhr.open('POST', ':3006/api/upload/avatar')xhr.send(fd)xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {var data = JSON.parse(xhr.responseText)if (data.status === 200) {// 上传成功document.querySelector('#img').src = ':3006' + data.url} else {// 上传失败console.log('图片上传失败！' + data.message)}}}})</script>
</body>
五、Ajax请求开始与结束
// 监听到Ajax请求被发起了$(document).ajaxStart(function () {$('#loading').show()})// 监听到 Ajax 完成的事件$(document).ajaxStop(function () {$('#loading').hide()})
六、axios请求
<button id="btn1">发起GET请求</button><button id="btn2">发起POST请求</button><button id="btn3">直接使用axios发起GET请求</button><button id="btn4">直接使用axios发起POST请求</button>document.querySelector('#btn1').addEventListener('click', function () {var url = ':3006/api/get'var paramsObj = { name: 'zs', age: 20 }axios.get(url, { params: paramsObj }).then(function (res) {// res.data 是服务器返回的数据console.log(res.data)})})document.querySelector('#btn2').addEventListener('click', function () {var url = ':3006/api/post'var dataObj = { address: '北京', location: '顺义区' }axios.post(url, dataObj).then(function (res) {console.log(res.data)})})document.querySelector('#btn3').addEventListener('click', function () {var url = ':3006/api/get'var paramsData = { name: '钢铁侠', age: 35 }axios({method: 'GET',url: url,params: paramsData}).then(function (res) {console.log(res.data)})})document.querySelector('#btn4').addEventListener('click', function () {axios({method: 'POST',url: ':3006/api/post',data: {name: '娃哈哈',age: 18,gender: '女'}}).then(function (res) {console.log(res.data)})})
更多推荐
基于XMLHttpRequest的Ajax请求
发布评论