13周周一 AJAX基础

最新推荐文章于 2021-12-29 19:25:30 发布

一杯奶茶11

最新推荐文章于 2021-12-29 19:25:30 发布

阅读量113

点赞数

本文链接：https://blog.csdn.net/GMGLWY/article/details/103233966

版权

一、AJAX概述
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

在创建一个XMLHttpRequest的对象之前，必须首先确定用户当前使用的浏览器类型，之后根据浏览器类型创建合适的XMLHttpRequest对象，如果为普通的FireFox，则直接使用new XMLHttpRequest()的方式创建；而如果IE浏览器，则通过new ActiveXObject()的方式进行创建。

1、XMLHttpRequest对象的属性
在这里插入图片描述
readyState一共有5种取值：

    0：请求没有发出（在调用open()函数之前）
    1：请求已经建立但还没有发出（在调用send()函数之前）
    2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）
    3：请求已经处理，正在接收服务器的信息，响应中通常有部分数据可用，但是服务器还没有完成响应。
    4：响应已完成，可以访问服务器响应并使用它

2、XMLHttpRequest对象的方法

在这里插入图片描述
二、案例演示——不加载整个页面局部刷新内容
1、创建Web项目AjaxDemo

2、修改Web项目首页文件index.jsp

3、在web目录创建子目录data，在里面创建userlist.txt文件

4、在web目录创建getUserList.html页面

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取用户列表</title>
    <script>
        function loadUserList() {
            // 声明请求对象
            var xmlhttp;
            // 实例化请求对象
            if (window.XMLHttpRequest) {
                // IE7+， Firefox, Chrome, Opera, Safari浏览器里执行代码
                xmlhttp = new XMLHttpRequest();
            } else {
                // IE5， IE6 浏览器里执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
 
            // 监听请求状态变化，一旦有变化，执行相应的回调函数
            xmlhttp.onreadystatechange = function () {
                // 判断请求是否成功，响应是否完成
                if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
                    // 利用响应文本修改页面元素内容
                    document.getElementById("users").innerHTML = xmlhttp.responseText;
                }
            }
 
            // 新建HTTP请求，采用GET方式，请求采用异步方式
            xmlhttp.open("GET", "/AjaxDemo/data/userlist.txt", true);
            // 发送HTTP请求，不传递参数
            xmlhttp.send(null);
        }
    </script>
</head>
<body>
<h3>用户列表</h3>
<div id="users"></div>
<hr>
<button type="button" οnclick="loadUserList()">获取用户列表</button>
</body>

5，创建
![在这里插入图片描述](https://img-blog.csdnimg.cn/2019112511084866.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dNR0xXWQ==,size_16,color_FFFFFF,t_70)
login.html

用户登录

    </tr>
    <tr align="center">
        <td colspan="2">
            <button type="button" onclick="login()">登陆</button>
            <button type="button" onclick="reset()">重置</button>
        </td>
    </tr>
</table>