异步刷新技术：ajax

ajax异步刷新技术

小俊会编码

1507人浏览 · 2022-08-01 16:22:12

小俊会编码 · 2022-08-01 16:22:12 发布

一.概念

只刷新局部的技术
Asynchronous:异步的
JavaScript:更新局部网页
XML:用于请求数据和响应数据的封装
CSS：美化页面样式
异步：发送请求后不等返回结果，由回调函数处理结果
XMLHttpRequest对象：发送请求到服务器并获得返回结果（这个是ajax的核心）

二.核心对象XMLHttpRequest的常用方法和属性：

方法：
- open（method，URL，async(异步的/异步串口))
  - 用来建立与服务器的连接
  - method参数指定请求的HTTP方法，典型的值是GET或POST
  - URL参数指定请求的地址
  - async参数指定是否使用异步请求，值为true或false
- send(Content)
  - 发送请求，content参数指定请求的参数
- setRequestHeader(header.value)
  - 设置请求的头信息
属性：
- onreadystatechange:指定回调函数
- readystate ：XMLHttpRequest的状态信息
- 就绪状态码：
  - 0：XMLHttpRequest对象还没有初始化
  - 1：XMLHttpRequest对象开始发送请求
  - 2：XMLHttpRequest对象的请求发送完成
  - 3：XMLHttpRequest对象开始读取响应，还没有结束
  - 4：XMLHttpRequest对象读取响应结束
- 状态码：
  - status:Http的状态码
    - 200：服务器响应正常
    - 400；无法找到请求的资源
    - 403：没有访问权限
    - 404：访问的资源不存在
    - 500：服务器内部错误
    - responseText:获得响应的文本内容
    - responseXML:获得响应的XML的文档对象
    - 只有就绪状态是4且状态码是200，才可以处理服务器数据
- 由响应对象response创建一个从服务器端到客户端的管道
- 以前是通过转发或者重定向的方式来响应数据，但在局部刷新当中使通过管道的方式来响应数据，因此，首先创建管道，然后写入数据，再通过flush推进，清空管道内数据，最后关闭管道
- ```
//由响应对象创建一个从服务器端到客户端的一个管道
        PrintWriter writer = resp.getWriter();
        writer.write(msg);
        //清空管道数据
        writer.flush();
        //关闭
        writer.close();
```
- java在使用流时,都会有一个缓冲区,按一种它认为比较高效的方法来发数据:把要发的数据先放到缓冲区,缓冲区放满以后再一次性发过去,而不是分开一次一次地发.而flush()表示强制将缓冲区中的数据发送出去,不必等到缓冲区满. ,要养成writer后面写flush的习惯，避免在数据特别小的情况下，另一边读不到数据

三.用户名重名校验代码示例

在JavaScript中使用ajax，代码复杂，原生

servlet

package com.pro.servlets;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

public class UserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setCharacterEncoding("UTF-8");
        //
        String userName = req.getParameter("userName");

        //
        String msg = "用户已存在！";
        if (!"admin".equals(userName)){
         msg ="可以注册";
        }

        //由响应对象创建一个从服务器端到客户端的一个管道
        PrintWriter writer = resp.getWriter();
        writer.write(msg);
        //清空管道数据
        writer.flush();
        //关闭
        writer.close();
    }

index.jsp

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

    //首先创建核心对象
    var xmlHttp;
    function creatXMLHttpRequest() {
        //表示如果你是IE浏览器
        if (window.ActiveXObject){
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }else{//非IE浏览器
            xmlHttp = new XMLHttpRequest();
        }

    }

    function f() {
        //调用上面的方法创建一个核心对象
        creatXMLHttpRequest();
        var userName = document.getElementById("userName").value;
        var url = "userServlet?userName="+userName;
        xmlHttp.open("get",url,true);//使用get方式和URL地址建立连接，目的是为了把请求的数据发送过去
        //当readystate的值发生改变时，会调用xx函数，这个xx虽然没有括号，但他也是一个函数，是一个指针
 //第一次经过xmlHttp.onreadystatechange=xx;只是去指定回调函数，并不会把回调函数执行完，
        // 而是去执行完发送请求，当状态码发生改变时，才会去执行之前指定的回调函数
        xmlHttp.onreadystatechange=xx;
        //用这个方法来发送请求数据
        xmlHttp.send();

    }

    //核心对象的readyState发生变化，就会触发这个响应函数
    function xx() {
        //必须状态信息readyState=4且状态码status=200才能获取到数据（谁来获取呢，是获取请求的数据还是响应的数据--->获取到响应的数据）
        if (xmlHttp.readyState == 4){
            if(xmlHttp.status == 200){
                var result = xmlHttp.responseText;
                document.getElementById("info").innerHTML = result;
            }
        }
    }

   /* function userList() {

    }

    function displayUser() {

    }*/
</script>

<!--
    需要局部刷新，首先就应该想到核心对象XMLHttpRequest
-->
<body>

<input type="text" name="userName" id="userName" onblur="f();"><span id="info"></span>
<hr>
<select name="" id="">
    <option value="aaa">aaa</option>
    <option value="bbb">bbb</option>
    <option value="ccc">ccc</option>
</select>

</body>
</html>

在JQuery中使用ajax：代码简单，推荐使用

// 值均写在引号内，单引号和双引号都可以
$.ajax({
    url: '', 	// 请求的地址，即要给那里发送请求
    data: {		// 请求参数，有多个时以逗号分割
        name: 'zhangsan',
        pwd: '123'
    },
    type: 'get',		// 请求方式，get、post
    dataType: 'text',	// 返回值类型， json、text等
    success: function (res) { // 请求成功执行此方法，res为返回值，名称自定义
        $('#get1').html(res)
    },
    error: function (xhr, errorMessage, e) { //请求异常执行此方法，参数名不建议修改,可以不写这个函数
        alert(errorMessage);
    }
})

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

全家桶集齐！Qwen3.5四款小模型上线魔乐社区，附昇腾全套实践教程

魔乐社区

Pont - 搭建前后端之桥：高效、灵活的接口管理工具

Pont 是一款强大的数据服务层解决方案，它能够帮助开发者快速搭建前后端之间的桥梁，实现接口的高效管理和代码自动生成。无论是新手还是有经验的开发者，都能通过 Pont 轻松处理接口文档、生成类型安全的 API 代码，从而显著提升开发效率。[![Pont 工具标志](https://raw.gitcode.com/gh_mirrors/po/pont/raw/3f1b7d4bbba3fd2dda

魔乐社区

如何快速上手 hvac：HashiCorp Vault Python 客户端零基础入门指南

**hvac** 是 HashiCorp Vault 的 Python 3.X 客户端库，专为开发者提供简单高效的 Vault 交互方式。无论你是需要管理密钥、配置身份验证，还是实现安全的秘密数据存储，hvac 都能帮助你轻松搞定 Vault 的各项操作。本文将带你零基础快速入门，从安装到基础操作，让你在几分钟内即可上手使用这个强大的工具。[![hvac 客户端 Logo](https://r