目录
1.什么是AJAX?
AJAX(Asynchronous Javascript And XML)是异步的JavaScript和XML,是指一种创建交互式网页应用的网页开发技术,用于浏览器和服务器之间进行异步数据交互。
2.XMLHttpRequest
浏览器在XMLHttpRequest类上定义了它们的HTTP API,这个类的每个实例都表示一个独立的请求/响应对,并且这个对象的属性和方法允许指定请求细节和提取响应数据。XMLHttpRequest对象是AJAX的基础,用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
2.1.XMLHttpRequest使用方法
发起ajax请求的步骤:
1.创建XMLHttpRequest对象
var xhr = new XMLHttpRequest()
2.使用open方法设置和服务器的交互信息
配置请求方式,设置请求接口地址
open(请求方式,URL)
请求方式取值:GET/POST/HEAD/DELETE/OPTIONS/PUT 不区分大小写
GET:用于常规请求,适用于URL完全指定请求资源,
POST:用于HTML表单,它在请求主体中包含额外数据,且这些数据常存储到服务器上的数据库中。
xhr.open('get','https://api.muxiaoguo.cn/api/lishijr?api_key=0b0c3893a95d6987')
3.设置请求头(需要在open方法和send方法之间调用)
json格式数据
xhr.setRequestHeader('Content-Type','application/json')
发送表单数据
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
发送纯文本(不指定Content-type时,此是默认值)
xhr.setRequestHeader('Content-type', 'text/plain);
发送html文本
request.setRequestHeader('Content-type', 'text/html);
4.设置发送的数据,开始和服务器端交互
send() 参数:请求主体内容,如果没有,为null,或者省略。
xhr.send(); //调用send()之后,请求就会发送到服务器
5.接收响应,注册事件
xhr.onreadystatechange=function(){
//如果请求发送完成 请求成功
if(xhr.readyState===4&&xhr.status===200){
console.log(xhr.responseText);//responseText:作为响应体返回的文本
console.log(xhr.responseXML);//responseXML:如果响应的内容类型是"text/xml"或"application/xml",那就是包含响应数据的 XML DOM 文档。
}
}
status:响应的 HTTP 状态。
statusText:响应的 HTTP 状态描述。
readyState:返回HTTP请求状态
- 0 open()尚未调用 UNSENT
- 1 open()已调用 OPENED
- 2 接收到头信息 HEADERS_RECEIVED
- 3 接收到响应主体 LOADING
- 4 响应完成 DONE
readystatechange:请求状态改变事件 当readyState值改变为4或服务器的响应完成时,所有的浏览器都触发该事件
响应解码 MIME-TYPE
1.MIME类型为text/plain,text/html,text/css 文本类型时,可以使用responseText属性解析
2.MIME类型为XML文档类型时,使用responseXML属性解析
3.如果服务器发送对象,数组这样的结构化数据作为其响应,他应该传输JSON编码的字符串数据。通过responseText接受到它,可以把它传递给JSON.parse()方法来解析。
console.log(JSON.parse(xhr.responseText));
3.常用请求使用
1.使用get发送有参请求
<!-- 引入QS序列化工具 -->
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>
<!-- 查询城市天气请求 -->
<button onclick="getCity()">获取天气</button>
<script>
function login() {
var xhr = new XMLHttpRequest()
//url序列化 ?city="suzhou"&type="1"
// 第一种形式 拼接字符串
//xhr.open('get','https://api.muxiaoguo.cn/api/tianqi?' + 'city=' + '苏州' + '&' + 'type=' + '1' + '&api_key=779d7e46708290a5');
// 第二种形式 传递序列化后的参数
var params = {
city: '苏州',
type: 1
}
// 参数序列化 要先引入QS序列化工具
// Qs.stringify(params)
xhr.open('get','https://api.muxiaoguo.cn/api/tianqi?' + Qs.stringify(params));
xhr.send();// 没有要发送的数据
console.log(Qs.stringify(params));
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
}
</script>
2.使用post发送无参请求
<button onclick="postNo()">post无参</button>
<script>
function postNo() {
var xhr = new XMLHttpRequest()
xhr.open('post','接口URL');
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 响应成功做的事
}
}
}
</script>
3.使用post发送有参请求
<button onclick="login()">登录</button>
<script>
function login() {
var xhr = new XMLHttpRequest();
xhr.open('post','登录接口地址');
var params = {
password: "123321",
username: "admin"
}
// 登录接口Content-type为json格式
xhr.setRequestHeader('Content-type','application/json;charset=utf-8');
// json格式 前端js对象转成json格式得对象
xhr.send(JSON.stringify(params))
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
}
</script>
4.JQuery中的Ajax
$.ajax({
请求路径url:"",
请求方式method:"",
请求头headers:{},
携带参数属性data:{}
请求成功回调success(res){},
请求失败回调error(err){}
.....
});
配置ajax全局请求
$.ajaxSetup({
headers:{
"Authorization":token,
"application":'json'
},
})
具体应用案例:
<!-- 引入QS -->
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>
<!-- 引入jQuery -->
<script src="../1-jquery.js"></script>
<script>
$(function(){
// 声明全局ajax请求基础路径
var baseURL = "http://http://43.142.188.209:8002";
var obj={
page:1,
pageSize:15
}
// 登录按钮:点击登录 获取token,存储起来 配置到ajax全局
$('.login').click(function(){
var obj = {
username:'admin1',
password:123321
}
// 发送登录请求
$.ajax({
// 请求路径
url:baseURL+'/user/login',
// 请求方式
method:'post',
// 请求头
headers:{
"Content-Type":"application/json"
},
// 携带参数
data:JSON.stringify(obj),
// 成功回调
success(res){
// 存储token
sessionStorage.setItem('token',res.data.token);
// 全局配置请求全部携带token 除登录外 写在登录中的
$.ajaxSetup({
headers:{
"Authorization":sessionStorage.getItem('token'),
}
})
},
// 失败回调
error(res){}
})
})
})
</script>
<button class="login">登录</button>