利用Ajax访问后台数据

最新推荐文章于 2024-05-01 10:24:31 发布

雾眠气泡水@

最新推荐文章于 2024-05-01 10:24:31 发布

阅读量1.1k

点赞数 1

分类专栏： javascript 文章标签： ajax javascript

本文链接：https://blog.csdn.net/m0_60489011/article/details/120242373

版权

javascript 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

一、什么是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));
            }
        }
    }
}

雾眠气泡水@

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
利用Ajax访问后台数据

一、什么是Ajax？Asynchronous JavaScript + XML(异步JavaScript和XML)，其本身不是一种新技术，而是一个用来描述一种使用现有技术集合的‘新’方法。二、如何访问后台数据？1.创建XMLHttpRequest对象（1）定义：XMLHttpRequest用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某个部分更新。（2）创建 variable=n...
复制链接

扫一扫