异步获取当前请求request

转载

ghpsyn 2024-09-07 21:11:52

文章标签 异步获取当前请求request java ajax xml 异步请求 文章分类 架构后端开发

1.异步请求对象

在局部刷新，需要创建一个对象，代替浏览器发起请求的行为，这个对象存在内存中。代替浏览器发起请求并接收响应数据。这个对象叫做异步请求对象。
全局刷新是同步行为，局部刷新是异步行为[浏览器数据没有全部更新] 这个异步对象用于在后台与服务器交换数据。
XMLHttpRequest 就是我们说的异步对象。
XMLHttpRequest 对象能够：

在不重新加载页面的情况下更新网页
在页面已加载后向服务器请求数据
在页面已加载后从服务器接收数据
所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象
创建 XMLHttpRequest 对象的语法（xhr） ：
var xmlhttp=new XMLHttpRequest();
AJAX 中的核心对象就是 XMLHttpRequest

2.XMLHttpRequest对象解析

XMLHttpRequest 对象 open( method , url, true ) 第三个参数 true 表示异步请求
异步请求特点：

1)某一个时刻，浏览器可以委托多个异步请求对象发送请求，无需等待请求处理完成。
2)浏览器委托异步请求对象工作期间，浏览器处于活跃状态。可以继续向下执行其他命令。
3)当响应就绪后再对响应结果进行处理

实现步骤：

1.设置异步对象 open 方法第三个参数为 true
// 初始请求参数 xmlHttp.open(“get”,“searchProvinceJson?proid=”+proid,true);
2.send()后面，增加 alert()
// 发送请求 xmlHttp.send(); alert(“我是最后一行的代码”)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">
        // 在这里使用javaScript语言发起Ajax请求，访问服务器AjaxServlet中javaScriptAjax
        function ajaxRequest() {
            // 1、我们首先要创建XMLHttpRequest
            var xmlHttpRequest = new XMLHttpRequest();

            // 2、调用open方法设置请求参数
            // method：请求的类型；GET 或 POST
            // url：文件在服务器上的位置
            // async：true（异步或 false（同步
            xmlHttpRequest.open("GET","http://localhost:8080/16_AJAX/ajaxServlet?action=javaScriptAjax",true);

            // 4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
            // onreadystatechange 事件
            // 当请求被发送到服务器时，我们需要执行一些基于响应的任务。
            // 每当 readyState 改变时，就会触发 onreadystatechange 事件。

            xmlHttpRequest.onreadystatechange = function () {
                if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                    // alert("收到服务器返回的数据:" + xmlHttpRequest.responseText);
                    //JSON.parse() 把 json 字符串转换成为 json 对象
                    var jsonObj = JSON.parse(xmlHttpRequest.responseText);
                    // 把响应的数据显示在页面上
                    document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + ",姓名：" + jsonObj.name;
                }
            }
            // 3、调用send方法发送请求
            xmlHttpRequest.send();

            alert("我是最后一行的代码");

        }
    </script>
</head>
<body>
    <button onclick="ajaxRequest()">ajax request</button>
    <div id="div01">
    </div>
</body>
</html>