目录
(一)网页如何请求数据
(二)资源的请求方式
(三)AJAX
1、什么是AJAX:
2、AJAX的应用场景:
3、Ajax请求中常用的三种方法
(四)接口
(五)XMLHttpRequest
1、使用xhr发起get请求(原生ajax)
2、使用xhr发起 post请求
(六)数据交换格式
1、XML
2、JSON
(七)XMLHttpRequest Level2特性
1、可以设置 HTTP 请求的时限
2、可以使用 FormData 对象管理表单数据
3、可以上传文件
4、可以获得数据传输的进度信息
(八)axios
(1)用axios发起get请求
(2)用axios发起post请求
(3) 直接用axios发起get请求
(4)直接用axios发起post请求
(一)网页如何请求数据
需要通过请求—处理—响应三个步骤
- 客户端请求数据资源
- 服务器处理这次数据请求
- 服务器把数据响应给客户端
(二)资源的请求方式
最常见的请求方式有get和post
get:请求通常 用于获取服务器端资源,例如根据URL地址,从服务器获取HTML文件,css文件,JS文件,图片和数据资源
post:请求通常向服务器提交资源;例如登录时向服务器提交登录信息,注册时向服务器提交注册信息等各种提交操作
(三)AJAX
1、什么是AJAX:
在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式,不刷新整个页面就可以进行数据局部更新。
2、AJAX的应用场景:
用户名检测、搜索提示、数据分页显示、数据的增删改查
3、Ajax请求中常用的三种方法
(1)$.get(url,[data],[callback]),专门用于发起get请求,从而将服务器的资源请求到客户端进行使用,第一个参数是要请求的资源 地址 ;第二个参数为Object类型,为请求资源期间要携带的参数;第三个参数为请求成功时的回调函数
如何发送get请求
- 引入jquery.js
- 在jquery入口函数中发送get请求,其中{id:1}为请求id为1的数据
<script src="lib/jquery.js"></script>
<button class="btn">不带参数的请求</button>
<script>
//$function为jquery的入口函数
$(function (){
document.querySelector('.btn').addEventListener('click',function(){
$.get('http://www.liulongbin.top:3006/api/getbooks',{id:1},function(res){
console.log(res)
})
})
})
(2)$.post()
$.post(url,[data],[callback]),专门用于发起post请求,第一个参数是提交数据的地址 ;第二个参数为Object类型,为要提交的数据;第三个参数为提交成功时的回调函数
如何向服务器提交数据
<script src="lib/jquery.js"></script>
<button class="btn">提交数据</button>
<script>
$(function(){
document.querySelector('.btn').addEventListener('click',function(){
$.post('http://www.liulongbin.top:3006/api/addbook',{bookname: '水浒传', author: '施耐庵', publisher: '上海图书出版社' },function(res){
console.log(res)
})
})
})
</script>
由于多次点击提交显示如图,第一次的时候显示的是提交的数据
(3)$.ajax()是一个功能比较综合的函数,可以对ajax请求做更详细的配置
基本语法
$.ajax({
type:'', //请求方式,像get,post
url:'', //请求地址
data:{}, //请求携带的数据
success:function(res){} //请求成功后的回调函数
})
(3.1)用$.ajax()发起GET请求
只需要将type属性设置为get即可
<script src="lib/jquery.js"></script>
<button class="btn">请求数据</button>
<script>
$(function(){
document.querySelector('.btn').addEventListener('click',function(){
$.ajax({
type:'get',//请求方式,像get,post
url:'http://www.liulongbin.top:3006/api/getbooks',//请求地址
data:{id:1},//请求携带的数据
success:function(res){
console.log(res)
}//请求成功后的回调函数
})
})
})
</script>
(3.2)$.ajax设置post请求,只需要将type改为post即可
$(function(){
document.querySelector('.btn').addEventListener('click',function(){
$.ajax({
type:'post',//请求方式,像get,post
url:'http://www.liulongbin.top:3006/api/addbook',//请求地址
data:{
bookname: '水浒传',
author: '施耐庵',
publisher: '上海图书出版社'
},//请求携带的数据
success:function(res){
console.log(res)
}//请求成功后的回调函数
})
})
})
(四)接口
1、接口的概念:使用Ajax请求数据时,被请求的url地址,就叫做数据接口,同时,每个接口有自己的请求方式。
2、接口测试工具:postman
(五)XMLHttpRequest
是浏览器提供的JavaScript对象,通过它,可以请求服务器上的数据资源,Ajax函数,就是基于xhr对象封装出来的
1、使用xhr发起get请求(原生ajax)
- 创建XHR对象
- 调用open方法,指定请求地址与URL地址
- 使用send函数,发起ajax请求
- 监听onreadystatechange事件
2、使用xhr发起 post请求
- 创建 xhr 对象
- 调用 xhr.open() 函数 设置 Content-Type 属性(固定写法)
- 调用 xhr.send() 函数,同时指定要发送的数据
- 监听 xhr.onreadystatechange 事件
(六)数据交换格式
1、XML
XML是可扩展的标签语言,用来传输和存储数据,是数据的载体
<note>
<to>ls</to>
<from>zs</from>
<heading>通知</heading>
<body>晚上开会</body> </note>
(1)XML缺点
- XML 格式臃肿,和数据无关的代码多,体积大,传输效率低
- 在 Javascript 中解析 XML 比较麻烦
2、JSON
JSON就是JavaScript对象和数组的字符串表示方法,使用文本表示JS对象或数组的信息,JSON的本质就是字符串
(1)作用:JSON是一种轻量级的文本数据交换格式,专门用于存储和传输数据,JSON比XML更小,更快,更易于解析。
(2)JSON的两种结构
JSON中有数组和对象两种结构,通过这两种结构相互嵌套,可以实现各种复杂的数据结构;JSON中字符串必须用双引号包裹,value的数据类型可以是数字、字符串、布尔值、Null、数组,对象。
{
"name": "zs",
"age": 20,
"gender": "男",
"address": null,
"hobby": ["吃饭", "睡觉", "打豆豆"]
}
(3)JSON语法的注意事项
- 属性名必须使用双引号包裹
- 字符串类型的值必须使用双引号包裹
- JSON 中不允许使用单引号表示字符串
- JSON 中不能写注释
- JSON 的最外层必须是对象或数组格式 不能使用 undefined 或函数作为 JSON 的值
(4)JSON和JS对象的相互转换
(4.1)JSON.parse()
将JSON字符串转换为JS对象
var obj=JSON.parse('{"a":"hello","b":"world"}')
console.log(obj)
(4.2)JSON.stringfy()
将JS对象转换为JSON字符串
let obj={
a:'hello',
b:'world'
}
let str=JSON.stringify(obj)
console.log(str)
(七)XMLHttpRequest Level2特性
1、可以设置 HTTP 请求的时限
可以设置xhr.timeout属性设置请求时限,当 等待时间超过多久时,会停止发送HTTP请求
let xhr=new XMLHttpRequest()
xhr.timeout=30
xhr.ontimeout=function(){
console.log('请求超时了')
}
xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
xhr.send()
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&xhr.status===200){
console.log(JSON.parse(xhr.responseText))
}
}
当请求超过30毫秒时
当将请求时限设置为3000毫秒时,未超时,打印出请求成功的数据
2、可以使用 FormData 对象管理表单数据
(1)提交表单数据
// 1、创建FormData()实例
let fd=new FormData()
//2、调用append函数,向fd中追加数据
fd.append('uname','zs')
fd.append('password','123456')
let xhr=new XMLHttpRequest()
xhr.open('POST','http://www.liulongbin.top:3006/api/formdata')
xhr.send(fd)
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&xhr.status===200){
console.log(JSON.parse(xhr.responseText))
}
}
(2)用于获取网页表单中的值
<!-- //这里要写name属性 -->
<form id="form1">
<input type="text" name='uname' autocomplete="off">
<input type="password" name="upwd">
<button type="submit">提交</button>
</form>
<script>
let form=document.querySelector('#form1')
form.addEventListener('submit',function(e){
//阻止表单默认行为
e.preventDefault()
// 创建FormData()实例,快速获取表单中的数据
let fd=new FormData(form)
let xhr=new XMLHttpRequest()
xhr.open('POST','http://www.liulongbin.top:3006/api/formdata')
xhr.send(fd)
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&xhr.status===200){
console.log(JSON.parse(xhr.responseText))
}
}
})
3、可以上传文件
先判断是否选择了文件,再将文件追加到FormData中,通过ajax提交给服务器,获取数据的信息,将图片显示到定位的位置
<body>
<input type="file" id="file1"/>
<button id="btnUpload">上传文件</button>
<br>
<!-- 文件上传成功后显示文件 -->
<img src="" alt="" id="img" width="400" >
<script>
const btnUpload=document.querySelector('#btnUpload')
// 为按钮添加 click 事件监听
btnUpload.addEventListener('click',function(){
// 3. 获取到选择的文件列表,其获取的结果为数组
let files=document.querySelector('#file1').files
if(files.length<=0){
alert("请选择上传的文件")
}else{
// 如果选择了文件则创建FormData实例,向FormData中追加文件
let fd=new FormData()
fd.append('avatar',files[0])
let xhr=new XMLHttpRequest()
xhr.open('POST','http://www.liulongbin.top:3006/api/upload/avatar')
xhr.send(fd)
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&xhr.status===200){
let data=JSON.parse(xhr.responseText)
console.log(data)
if(data.status===200){
document.querySelector('#img').src='http://www.liulongbin.top:3006' + data.url
}
else{
console.log(`图片上传失败${data.message}`)
}
}
}
}
})
</script>
</body>
4、可以获得数据传输的进度信息
用xhr.upload.onprogress事件,获取文件上传的进度,主要属e.lengthComputable,e.loaded,e.total分别为当前资源是否可以计算长度,已传字节,需要传输的总字节
//在上次上传文件的基础上
let xhr=new XMLHttpRequest()
// 在此处监听上传的进度
xhr.upload.onprogress=function(e){
if (e.lengthComputable) {
// e.loaded 已传输的字节
// e.total 需传输的总字节
let percentComplete = Math.ceil((e.loaded / e.total) * 100)
console.log(percentComplete)
}
}
(八)axios
Axios 是专注于网络数据请求的库。 相比于原生的 XMLHttpRequest 对象,axios 简单易用。 相比于 jQuery,axios 更加轻量化,只专注于网络数据请求.
(1)用axios发起get请求
document.querySelector('#btn1').addEventListener('click',function(){
let url='http://www.liulongbin.top:3006/api/get'
let paramsObj={name:'小开心',age:21}
axios.get(url,{ params:paramsObj }).then(function(res){
// console.log(res)
console.log(res.data)
})
})
(2)用axios发起post请求
document.querySelector('#btn2').addEventListener('click',function(){
let url='http://www.liulongbin.top:3006/api/post'
let dataObj={address:'北京',location:'广义区'}
axios.post(url,dataObj).then(function(res){
//res.data就是向服务器提交的数据
console.log(res.data)
})
})
(3) 直接用axios发起get请求
document.querySelector('#btn3').addEventListener('click',function(){
let url='http://www.liulongbin.top:3006/api/get'
let paramsObj={name:"小开心",age:22}
axios({
method:'GET',
url:url,
params:paramsObj,
}).then(function(res){
console.log(res.data)
})
})
文章来源:https://www.toymoban.com/news/detail-765282.html
(4)直接用axios发起post请求
与get一样只是传输数据将params换成data文章来源地址https://www.toymoban.com/news/detail-765282.html
到了这里,关于数据请求之AJAX的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!