一、什么是Ajax？
????????Asynchronous JavaScript + XML(异步JavaScript和XML)，其本身不是一种新技术，而是一个用来描述一种使用现有技术集合的‘新’方法。
二、如何访问后台数据？
????????1.创建XMLHttpRequest对象
????????（1）定义：XMLHttpRequest用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某个部分更新。
??????? （2）创建
??????????? variable=new XMLHttpRequest();
????????
function login(){
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
//新建一个httpRequest对象
var httpRequest=new XMLHttpRequest();
?????????2.向服务器发送请求
????????????????（1）定义：使用XMLHttpRequest对象的open()和send()方法。
??????? ????????（2）语法：
??????????????? ????????xmlhttp.open("GET","ajax_info.txt",true);
??????????????????????? xmlhttp.send();
??????? ????????（3）open(mehod,url,async)
??????????????? ????????作用：规定请求的类型、URL以及是否异步处理请求。
??????????????????????? 参数：
??????????????????? ????????1.method：请求的类型。get或post
??????????????????????????? 2.url：文件在服务器上的位置
??????????????????? ????????3.async：true(异步)或false(同步)
??????????? ??? （4） send(string)
??????????????????????? 作用：将请求发送到服务器。
??????????????? ????????参数：string（仅用于post请求。）
GET还是POST？
??????????? 1.GET比POST更简单也更快。
??????????? 2.在以下情况使用post请求
??????????????? （1）无法使用缓存文件（更新服务器上的文件或数据库）
??????????????? （2）向服务器发送大量数据（post没有数据限制）
??????????????? （3）发送包含未知字符的用户输入时，post比get更稳定也更可靠。
//配置post请求的数据格式
httpRequest.setRequestHeader('Content-Type',"application/json");
//发起请求
var obj={
username:username,
password:password,
}
var jsonObj=JSON.stringify(obj);
//传递参数
httpRequest.send(jsonObj);
??????? 以上代码中有个函数setRequestHeader：
????????????????setRequestHeader(header,value)
??????????? ????????作用：向请求添加HTTP头
??????????????????? 参数：
??????????????????????? header:规定头的名称
??????????????????????? value:规定头的值
?????????3.服务器响应
????????????????（1）定义：使用XMLHttpRequest对象的responseText或responseXML属性。
??????? ????????（2）responseText
??????????? ???????????????作用：获得字符串形式的响应数据
??????????????????????????? 参数：无
??????? ??????? （3）responseXML
??????????????????????????? 作用：获得XML形式的响应数据
??????????????????? ????????参数：无
//处理响应
httpRequest.onreadystatechange=function(){
if(httpRequest.readyState===4&&httpRequest.status===200){
//获取响应的数据
var res=httpRequest.responseText;
//console.log(res)
var resObj=JSON.parse(res);
console.log(resObj);
if(resObj.status===200){
console.log("登录成功");
var token=resObj.data.token;
//把token储存到浏览器中的session
sessionStorage.setItem("token",token);
}else{
alert(resObj.message);
}
}
}
??????? 上述有个onreadystatechange事件：
??????? 当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当readyState改变时，就会触发onreadystatechange事件。
??????? XMLHttpRequest 对象的三个重要的属性：
??????????? 1.onreadystatechange
??????????????? 存储函数（或函数名），每当readyState属性改变时，就会调用该函数。
??????????? 2.readyState
??????????????? 存有XMLHttpRequest的状态。
??????????????? 0: 请求未初始化
??????????????? 1: 服务器连接已建立
??????????????? 2: 请求已接收
??????????????? 3: 请求处理中
??????????????? 4: 请求已完成，且响应已就绪
??????????? 3.status
??????????????? 200："ok"
??????????????? 404：未找到页面
案例：
??????? 1.先在以下代码中写上自己项目的登录页面链接和后台的链接。
??????? 2.当输入正确的用户名和密码时，点击登录，会从控制台看到登录成功；当登录成功之后，分别点击查询所有用户和查询用户权限时，是可以访问出后台数据的。
??????? html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户登录</title>
//第三方的js文件
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.min.js"></script>
//新建一个js文件
<script src="ajax.js"></script>
</head>
<body>
用户名 <input type="text" id="username">
密码 <input type="text" id="password">
<br>
<button onclick="login()">登录</button>
<br>
<hr>
<button onclick="findAllUser()">查询所有用户</button>
<button onclick="findMenuByUserId(25)">查询用户权限</button>
<hr>
<div id="main"></div>
</body>
<script>
function login(){
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
//新建一个httpRequest对象
var httpRequest=new XMLHttpRequest();
//打开登录页面的连接
httpRequest.open("post",'http://...');
//配置post请求的数据格式
httpRequest.setRequestHeader('Content-Type',"application/json");
//发起请求
var obj={
username:username,
password:password,
}
var jsonObj=JSON.stringify(obj);
//传递参数
httpRequest.send(jsonObj);
//处理响应
httpRequest.onreadystatechange=function(){
if(httpRequest.readyState===4&&httpRequest.status===200){
//获取响应的数据
var res=httpRequest.responseText;
//console.log(res)
var resObj=JSON.parse(res);
console.log(resObj);
if(resObj.status===200){
console.log("登录成功");
var token=resObj.data.token;
//把token储存到浏览器中的session
sessionStorage.setItem("token",token);
}else{
alert(resObj.message);
}
}
}
}
function findAllUser(){
//创建一个请求对象
var httpRequest=new XMLHttpRequest();
//打开后台连接
httpRequest.open('get','http://...');
//先获取token
var token=sessionStorage.getItem("token")
if(token){
//配置token
httpRequest.setRequestHeader('Authorization',sessionStorage.getItem('token'));
//发起请求
httpRequest.send();
//处理响应
httpRequest.onreadystatechange=function(){
if(httpRequest.readyState===4&&httpRequest.status===200){
console.log(res);
var res=httpRequest.responseText;
document.getElementById("main").innerHTML=res;
}
}
}else{
alert("请重新登录");
}
}
//使用封装的ajax
function findMenuByUserId(id){
myAjax.get('/baseUser/findMenuByUserId',{id:id},function(res){
console.log("查询成功");
console.log(res);
},function(err){
console.log("请求失败");
console.log(err);
})
}
</script>
</html>
??????? 需要引用的js代码：
var qs=Qs;
//写上自己项目的链接
var baseURL="http://...";
var myAjax={
get:function(url,params,success,error){
var httpRequest=new XMLHttpRequest();
httpRequest.open('get',baseURL+url+'?'+qs.stringify(params));
//配置token
httpRequest.setRequestHeader("Authorization",sessionStorage.getItem("token"));
//发送请求
httpRequest.send();
httpRequest.onreadystatechange=function(){
if(httpRequest.readyState===4&&httpRequest.status===200){
success(JSON.parse(httpRequest.responseText));
}
if(httpRequest.readyState===4&&httpRequest.status===500){
error(JSON.parse(httpRequest.responseText));
}
}
}
}
??????
|