AJAX

最新推荐文章于 2025-07-23 21:44:24 发布

原创最新推荐文章于 2025-07-23 21:44:24 发布 · 126 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

本文详细介绍了AJAX技术，包括如何通过XMLHttpRequest对象实现局部刷新，阐述了异步请求的四个状态及其实现步骤。同时，提到了处理JSON数据的方法，并提及在在线考试系统的应用场景中使用AJAX实现试题发放和得分情况的动态更新。此外，讨论了异步和同步请求的区别。

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

AJAX

1. 局部刷新和全局刷新

1.1ajax:局部刷新

核心对象：异步对象（XMLHttpRequest）,存在于浏览器内存中，使用JS语法创建和使用XMLHttpRequest对象。
ajax:Asynchronous(异步) JavaScript and XML,2003年出现，不是一种语言。js,dom,css,tml等技术。
ajax使用XMLHttpRequest对象步骤

1）创建异步对象：var xmlHttp = new XMLHttpRequest();

2）给异步对象绑定事件。onreadystatechange:当异步对象发起请求，获取了数据都会触发这个事件。这个事件需要指定一个函数，在函数中处理状态的变化。

xmlHttp.onreadystatechange = function(){

//c处理请求状态变化

if(xmlHttp.readyState == 4){

//可以处理服务器端数据，更新当前页面

var data = xmlHttp.responseText;

document.getElementById(“name”).value = data;

}

}

异步对象属性 readyState 表示异步对象请求的状态变化

0：创建异步对象时new

1:初始化异步请求对象，xmlHttp.open()

2：发送请求，xmlHttp.send()

3:从服务器接收了此时3，注意3是异步对象内部使用，获取了原始的数据。

4（异步对象把接收的数据处理完后，此时开发人员在4的时候处理数据，更新当前页面）

异步对象status属性，表示网络请求状况200，404，500，

3）初始异步对象

异步的方法open(),xmlHttp.open(请求方式get/post,“服务器端的访问地址”，同步|异步请求(默认为true))

例如：xmlHttp.open(“get”,“loginServlet?name=zs”,true);

4) 使用异步对象发送请求

xmlHttp.send();

获取服务端返回的数据，使用异步对象属性 responseText.

例如：xmlHttp.responseText
回调：当请求状态变化时，异步对象会自动调用onreadystatechange 事件对应的函数。

练习：E:\学习文档\数据库课程设计\IDE-Workspace\Ajax+jQuery\001-ajax

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>BMI</title>
</head>
<body>
<%--不适用form,使用ajax实现局部刷新--%>
<script type="text/javascript">
    function doAjax() {
        //1.创建异步对象
        var xmlHttp = new XMLHttpRequest();
        //2.绑定事件
        xmlHttp.onreadystatechange = function () {
            //获取响应体返回的数据,更新当前页面
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
               alert(xmlHttp.responseText);
               var bmi = xmlHttp.responseText;
               document.getElementById("BMI").innerText = bmi;
               document.getElementById("data").value = bmi;
            }
        }
        //3.初始异步对象
        //获取需要的参数,dom对象的value
        var name = document.getElementById("name").value;
        var weight = document.getElementById("weight").value;
        var height = document.getElementById("height").value;
        var param = "name=" + name + "&weight=" + weight + "&height=" + height;
        xmlHttp.open("get", "/myWeb/user/getBMI?" + param, true);
        //4.使用异步对象发送请求
        xmlHttp.send();
    }
</script>
<center>
    用户姓名：<input type="text" id="name"><br>
    用户体重：<input type="text" id="weight"><br>
    用户身高：<input type="text" id="height"><br>
              <input type="submit" value="获取BMI" οnclick="doAjax()"><br>
    用户BMI： <input type="text" id="data"><br>
     <span id="BMI" style="color: red;font-size: 40px">等待数据....</span>
</center>
</body>
</html>

2.ajax处理json数据

处理json工具库：gson,fastjson,jackson,json-lib
异步和同步：

xmlHtp.open(“get/post”,“url”,“true/false”)

true:表示异步：使用异步对象发起请求后，不用等待数据处理完毕，就可以执行其他操作。一次可执行多个异步请求。

false:表示同步：使用异步对象发起请求后，等待异步对象处理完请求，从服务端获取数据后，才能执行servlet之后的代码。一次只能执行一个异步请求。
完成在线考试系统实现试题发放和得分情况，使用Ajax.

E:\学习文档\数据库课程设计\IDE-Workspace\JavaWeb-Servlet\005-在线考试系统