定义:使用XMLHttpRequest对象与服务器通信。
axios库，与服务器进行数据通信，基于XMLHttpRequest封装
语法：
- 引入axios.js
- 使用axios函数
传入配置对象
在.then回调函数接受结果，进行后续处理
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url:'http://hmajax.itheima.net/api/province'
}).then(result =>{
console.log(result)
})
</script>hmajax.itheima.net/api/province
数组转字符串<br>
URL:统一资源定位符，网址
组成：协议 http超文本传输协议，https
域名（必须）：标记服务器在互联网上的方位
资源路径：标记资源在服务器下的具体路径
url查询参数：浏览器提供给服务器的额外信息，让服务器返回浏览器的想要的数据
url?参数名1=值&参数名2=值
params:{
参数名：值
}
常见请求方法：
post:提交数据，需要把数据提交到服务器中
method:'post'
data:{
参数名：值
}
<button class="mybutton">注册用户</button>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
document.querySelector('.mybutton').addEventListener('click',()=>{
axios({
url:'http://hmajax.itheima.net/api/register',
method:'post',
data:{
username:'12341524',
password:'123454'
}
}).then(result =>{
console.log(result)
document.querySelector('.my-p').innerHTML = result.data.list.join('<br>');
})
})
</script>
axios错误处理
axios({
请求选项
}).then(result=>{
处理数据
}).catch(error=>{
错误处理
})
<button class="mybutton">注册用户</button>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
document.querySelector('.mybutton').addEventListener('click',()=>{
axios({
url:'http://hmajax.itheima.net/api/register',
method:'post',
data:{
username:'12341524',
password:'123454'
}
}).then(result =>{
/* console.log(result)
document.querySelector('.my-p').innerHTML = result.data.list.join('<br>');*/
}).catch(error=>{
alert(error.message)
})
})
</script>查看请求报文以排查错误
http协议——响应报文
接口文档 ：描述接口文档
接口：使用Ajax和服务器通讯时，使用的url，请求参数
form-serialize插件：快速手机表单元素的值
引入插件
语法：form哪个表单的数据，表单元素要设置name属性，值会作为对象的属性，建议name的值与接口对象一致
参数二：配置对象
hash设置获取数据结构 ture:json对象 （推荐）false：查询字符串
empty控制是否获取表单中的空值 true：获取空值 false:不获取空值的字段
const data = serialize(form,{hash:true,empty:true})
图片上传（form-data)
- 获取图片文件对象
- 使用FormData携带图片文件
const fd = new FormData();
fd.append('imag',e.target.files[0])
XMLHttpRequest:对象用于服务器交互
- 创建XMLHttpRequest对象 const xml = new XMLHttpRequest()
- 配置请求方法和请求url地址 xhr.open('请求方法'，‘请求地址’)
- 监听loadend事件，接受响应结果xhr.addEventListener('loadend',()=>{
//响应结果
console.log(xhr.response)
})
4.发起请求xhr.send()
const xhr = new XMLHttpRequest();
xhr.open('GET','http://hmajax.itheima.net/api/province');
xhr.addEventListener('loadend',()=>{
console.log(xhr.response)
const data =JSON.parse(xhr.response)
});
xhr.send();查询参数：提供给服务器的额外信息，让服务器返回浏览器想要的数据
url?参数名1=值&参数名2=值
数据提交：请求体参数（application/json)
- 请求体中设置Content-Type:application/json
- 请求体携带json字符串
xhr.setRequestHeader('Content-Type','application/json')
const user = {username:'kkk',password:'hihh'}
const userStr = JSON.stringify(user)
xhr.send(userStr)
const xhr = new XMLHttpRequest();
xhr.open('POST','http://hmajax.itheima.net/api/register');
xhr.addEventListener('loadend',()=>{
console.log(xhr.response)
const data =JSON.parse(xhr.response)
});
xhr.setRequestHeader('Content-Type','application/json');
const user = {username:'huhuih',password:'1232456'}
const usetStr = JSON.stringify(user)
xhr.send(usetStr);
