AJax的操作方法和使用案例

最新推荐文章于 2025-03-16 10:00:00 发布

万万万万呀

最新推荐文章于 2025-03-16 10:00:00 发布

阅读量308

点赞数 2

文章标签： ajax jquery javascript

本文链接：https://blog.youkuaiyun.com/zbx18292867339/article/details/120592504

版权

一 Ajax技术与原理

1.1 Ajax简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语⾔，⽽是⼀种使⽤现有标准的新⽅法。

AJAX 是与服务器交换数据并更新部分⽹⻚的艺术，在不重新加载整个⻚⾯的情况下。

1.2 Ajax所包含的技术

⼤家都知道ajax并⾮⼀种新的技术，⽽是⼏种原有技术的结合体。它由下列技术组合⽽成。

1.使⽤CSS和XHTML来表示。

2.使⽤DOM模型来交互和动态显示。

3.使⽤XMLHttpRequest来和服务器进⾏异步通信。

4.使⽤javascript来绑定和调⽤。

AJAX 的核⼼是 XMLHttpRequest 对象。不同的浏览器创建 XMLHttpRequest 对象的⽅法是有差异的。

IE 浏览器使⽤ ActiveXObject，⽽其他的浏览器使⽤名为 XMLHttpRequest 的 JavaScript 内建对象

1.3 Ajax的工作原理

Ajax的⼯作原理相当于在⽤户和服务器之间加了—个中间层(AJAX引擎)，使⽤户操作与服务器响应异步化。并不是所有的⽤户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎⾃⼰来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

浏览器的Ajax交互方式

在创建Web站点时，在客户端执⾏屏幕更新为⽤户提供了很⼤的灵活性。下⾯是使⽤Ajax可以完成的功能：

动态更新购物⻋的物品总数，⽆需⽤户单击Update并等待服务器重新发送整个⻚⾯。提升站点的性能，这是通过减少从服务器下载的数据量⽽实现的。例如，在Amazon的购物⻋⻚⾯，当更新篮⼦中的⼀项物品的数量时，会重新载⼊整个⻚⾯，这必须下载32K的数据。如果使⽤Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之⼀。消除了每次⽤户输⼊时的⻚⾯刷新。例如，在Ajax中，如果⽤户在分⻚列表上单击Next，则服务器数据只刷新列表⽽不是整个⻚⾯。

直接编辑表格数据，⽽不是要求⽤户导航到新的⻚⾯来编辑数据。对于Ajax，当⽤户单击Edit时，可以将静态表格刷新为内容可编辑的表格。⽤户单击Done之后，就可以发出⼀个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。

案例一：用Ajax判断用户名是否可用

1 创建lib包，js包，将所需要的依赖jar包导入

2 编写jquery_ajax.jsp（大部分情况下使用post）

<%--
  Created by IntelliJ IDEA.
  User: 86182
  Date: 2021/10/2
  Time: 9:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
  <script type="text/javascript">
    $(function (){
      $("#uname").blur(function(){
        //1.获得value值
        var uname = $(this).val();
        //2.发送请求
       /* $.ajax({
          url:"/testuname",
          data:"username="+uname,
          type:"post",
          dataType:"text",
          success:function (rs){
            $("#rs").html(rs);
          }
        });*/
       /* $.get("/testuname","username="+uname,function (rs){
          $("#rs").html(rs);
        });*/
        $.post("/testuname","username="+uname,function (rs){
          $("#rs").html(rs);
        });
      });

    })
  </script>
  <body>
  <h1>jquery_ajax.jsp</h1>

  username:<input type="text" id="uname" onblur="test()"><span id="rs"></span>
  </body>
</html>

预览：

3 失去焦点后post使用链接/testuname,将数据传至后台servlet包中TestServlet进行判断

package servlet;

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

@WebServlet(urlPatterns = "/testuname")
public class TestServlet 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 {
        //1.接收参数
        String username = req.getParameter("username");
        resp.setContentType("text/html;charset=utf-8");//编码方式
        PrintWriter writer = resp.getWriter();

        if ("admin".equals(username)){
            writer.println("账户已被注册");
        }else {
            writer.println("账户可用");
        }
    }
}

案例2：输入学号自动填充用户名，密码，money

1 创建lib包，js包，将所需要的依赖jar包导入(jar包与上一个案例一样)

2 建立jsp文件，写出页面所需要展示的内容

<%--
  Created by IntelliJ IDEA.
  User: 86182
  Date: 2021/10/2
  Time: 17:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
    $(function (){
        $("#uid").blur(function(){//失去用户id焦点时调取函数
            //1.获得value值
            var uid = $(this).val();
            //2.发送请求

            $.post("/getuser","uid="+uid,function (rs){
                //转换成可以处理的json
                rs=eval("("+rs+")");
                //此时得到的rs是json格式的对象，并写入各个id的value中
                $("#uname").val(rs.username);
                $("#pass").val(rs.password);
                $("#money").val(rs.money);
            });
        });

    })
</script>
<body>
    uid:<input type="text" id="uid"><br>
    uname:<input type="text" id="uname"><br>
    pass:<input type="text" id="pass"><br>
    money:<input type="text" id="money">
</body>
</html>

3 创建bean包，写入User实体类

package bean;

//实体类
public class Users {
    private Integer uid;
    private String username;
    private String password;
    private Double money;

    @Override
    public String toString() {
        return "Users{" +
                "uid=" + uid +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", money=" + money +
                '}';
    }

    public Users() {
    }

    public Users(Integer uid, String username, String password, Double money) {
        this.uid = uid;
        this.username = username;
        this.password = password;
        this.money = money;
    }

    public Integer getUid() {
        return uid;
    }

    public void setUid(Integer uid) {
        this.uid = uid;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public Double getMoney() {
        return money;
    }

    public void setMoney(Double money) {
        this.money = money;
    }
}

4 在servlet包中写入熟悉的get（）和post（）方法，进行判断，再将users对象响应给客户端，使⽤PrintWriter来实现

package servlet;

import bean.Users;
import net.sf.json.JSONObject;

import javax.json.JsonObject;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(urlPatterns = "/getuser")
public class GetUsersServlet 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 {
        //1.接收参数
        String uid = req.getParameter("uid");
        int userid=Integer.parseInt(uid);
        Users users = null;
        switch (userid){
            case 1:
                users=new Users(1,"张三","abc",11.22);
                break;
            case 2:
                users=new Users(2,"张三2","abc2",11.222);
                break;
            case 3:
                users=new Users(3,"张3","abc3",11.333);
                break;
            case 4:
                users=new Users(4,"张三4","abc4",11.444);
                break;
            default:
                users=new Users();
        }
        //java->json
        JSONObject jsonObject = JSONObject.fromObject(users);//json

        resp.setContentType("text/html;charset=utf-8");//编码方式
        PrintWriter writer = resp.getWriter();
        writer.print(jsonObject);

    }
}

感谢所有帮助我的大佬们！