JavaScript编写Ajax异步请求代码_js ajax异步请写法-优快云博客

本文链接：https://blog.youkuaiyun.com/Boxzhang/article/details/105223638

本文介绍了一个使用Ajax进行异步请求的例子，详细展示了如何在前端通过JavaScript发起POST请求到Java后台，以及后台如何响应并返回JSON数据。前端通过监听readyState和status属性来判断请求是否成功，并解析返回的JSON数据展示到页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%--
  Created by IntelliJ IDEA.
  User: zhang
  Date: 2020/3/31
  Time: 15:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>AjaxTest</title>
</head>


<script>
    var xmlhttp;
    function createXmlHttp() {
        //创建xmlhttp对象
        if (window.XMLHttpRequest)
            xmlhttp=new XMLHttpRequest();
        else
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    }
    //回调函数
    function callbacksuccess(){

        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            // 成功后执行的代码
            var jsonStr=xmlhttp.responseText;  //服务器返回数据为xmlhttp.responseText
            var student=JSON.parse(jsonStr);
            document.getElementById("name").innerText=student.name;
            document.getElementById("address").innerText=student.address;
            document.getElementById("age").innerText=student.age;

        }

    }
    function createRequest(){
        createXmlHttp(); //初始化xmlhttp对象
        xmlhttp.open("POST","ajaxTest.action");
        xmlhttp.send(); //发送ajax
        xmlhttp.onreadystatechange=callbacksuccess();//回调函数
    }
</script>


<body>
           姓名：<span id="name"></span><br>
           地址:<span id="address"></span><br>
           年龄:<span id="age"></span><br>
           异步请求从服务器获取的数据<br>
<input type="button" onclick="createRequest()" value="异步请求"><br>
</body>

</html>

服务器中处理Ajax请求的代码。

 @RequestMapping("ajaxTest.action")
   @ResponseBody
    public String testAjax(HttpServletResponse response)throws IOException {
     String jsonStr="{\"name\":\"xiaoming\",\"address\":\"ChinaAnhui\",\"age\":24}";
     return jsonStr;
   }