一、什么是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储存到浏览器中的sessionsessionStorage.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储存到浏览器中的sessionsessionStorage.setItem("token",token);}else{alert(resObj.message);}}}}function findAllUser(){//创建一个请求对象var httpRequest=new XMLHttpRequest();//打开后台连接httpRequest.open('get','http://...');//先获取tokenvar token=sessionStorage.getItem("token")if(token){//配置tokenhttpRequest.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("请重新登录");}}//使用封装的ajaxfunction 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));//配置tokenhttpRequest.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));}}}
}

利用Ajax访问后台数据相关推荐

在jquery mobile制作app的几个页利用ajax将后台数据json数组动态加载到列表里面
2019独角兽企业重金招聘Python工程师标准>>> 后来查找资料,发现新增节点后虽然数据加载上去了,但是样式却没有加载上,因此在整个过程中有2个注意事项. 1.利用循环将json ...
jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法参考文章: (1)jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法 ( ...
console修改 ajax,【快速】chrome中console下ajax访问后台
封装一个简单的chrome中console下ajax访问后台方便寻找跨域问题 function httpRequest(opt) { opt = opt || {}; opt.method = op ...
vue 后台数据列表获取图片_vue使用ajax获取后台数据进行显示的示例
实例如下所示: title #th th{ background-color: #50a9fa; color: aliceblue; font-size: large; } 添加数据编号名称时间 ...
使用ajax获取后台数据怎么打印,我用ajax获取后台数据并展示在前端页面的方法【源码】...
<我用ajax获取后台数据并展示在前端页面的方法[源码]>由会员分享,可在线阅读,更多相关<我用ajax获取后台数据并展示在前端页面的方法[源码](2页珍藏版)>请在人人文库网 ...
ajax 请求成功再执行javascript,jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法...
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
调用$.ajax不成功,jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法...
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
JS 操作 HTML 和 AJAX 请求后台数据
为某个元素插入值,添加属性,添加子元素 1 <div class="col-sm-6"> 2 <select class="form-control&q ...
ajax获取后台数据的几种方式及如何获取ajax内部的数据供外部使用
文章目录 1 ajax获取后台数据的几种方式 1.1 原生js的ajax方式 1.1.1 get 1.1.2 post 1.2 jQuery封装的ajax方式 1.2.1 $.ajax 1.2.2 $ ...

利用Ajax访问后台数据