原生AJAX：AJAX原理，附有AJAX代码

最新推荐文章于 2024-08-05 20:46:27 发布

星屑幻想

最新推荐文章于 2024-08-05 20:46:27 发布

阅读量388

点赞数

文章标签： ajax javascript 服务器

本文链接：https://blog.csdn.net/Stardust_fantasy/article/details/125218390

版权

原生AJAX

一：web交互方式

交互方式一：同步

在互联网刚刚兴起的时候

由于硬件设备和带宽的原因，咱们的网络非常慢

当时表单的提交方式基本都是同步（用户点击提交之后，啥都不能干，只能等待服务器的响应）

因为其他一些因素，大概几分钟（夸大）才能接受到服务端的响应

万一，用户名已存在或者表单哪个位置的输入不符合规定，那么用户只能重复的不停的做着表单提交

传统客户端与服务端交互图解：

在这里插入图片描述

这样的交互方式让用户的体验效果非常差！而且效率非常低；

交互方式二：异步

随着网络的不断发展，和用户体验要求的不断提升，出现了一种交互方式

他不是直接将整个表单直接提交，而是将表单中的一小部分数据先提交，并且不影响用户在客户端的操作

这样的一种交互方式叫着异步交互方式，比较典型的并且使用最多的是AJAX的交互方式

AJAX的交互方式并不是将数据直接提交给服务端，而是在客户端和服务端之间添加了一层ajax引擎

用户先将数据提交给ajax引擎（以XMLHttpRequest为核心），然后AJax引擎再将请求数据发送给服务器，

服务器回送响应数据的时候，先将数据发送给Ajax引擎，再由引擎传给浏览器显示

AJAX交互方式图解：

在这里插入图片描述

买卖房子

交互方式总结：

1：同步交互模式：客户端提交请求，等待–，服务端给客户端响应之前，客户端无法进行其他的操作

2、异步交互模型，客户端将请求提交给Ajax引擎，客户端可以继续其他的操作，由Ajax引擎来完成与服务器端通信，当响应回来后，Ajax引擎会更新客户页面，在客户端提交请求后，用户可以继续操作，而无需等待。

二：AJAX介绍

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

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。带来用户体验改变，是web优化一种主要手段

实现ajax异步交互方式的核心：XMLHttpRequest 对象

XMLHttpRequest是js的一个对象，它可以异步读取数据，它是ajax中最重要的一个对象，它是实现异步交互的核心对象

使用ajax发送请求的步骤： - 记住

1：获取ajax引擎对象（异步对象）

2：从Web表单中获取需要的数据。

3：建立要连接的URL(也可以写在open 方法内，表示访问的是后台的哪一个程序)

4：使用open方法建立与服务器的连接

5：发送请求send(String)

6：编写状态回调函数。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
 <head>
   <title>$Title$</title>
<%--    <script src="js/myjs.js"></script>--%>
   <script src="js/jquery-1.12.4.js"></script>
 </head>
 <body>
   <form action="/emp/login">
     ${loginError}<br>
     账号：<input name="username" value="${username}"><br>
     密码：<input name="pwd"><br>
     <input type="submit" value="登录">
   </form>
   <hr>
   ${registerFail}
   <form action="/emp/register">
     账号：<input name="username" id="username" οnblur="volidUsername()"> <span id="span"></span><br>
     密码：<input name="pwd"><br>
     <input type="submit" value="注册">
   </form>

   <script>

    function volidUsername() {


      var username = $("#username").val();
      // jquery：第二次封装
      $.get("http://localhost:8080/emp/volidUsername","username="+username,function (a) {
        alert(a)
      })

      // jquery：第一次封装
      // $.ajax({
      //   url:"http://localhost:8080/emp/volidUsername",
      //   data:"username="+username,
      //   success:function (a) {
      //     alert(a)
      //   }
      // })

// //   1：获取ajax引擎对象（异步对象）
//        var xhr =getXMLHttpRequest();
//         // getXMLHttpRequest();
//        alert(xhr)
// //  2：从 Web 表单中获取需要的数据。 
//        var username = document.getElementById("username").value;
//        alert(username)
// // 	3：建立要连接的 URL(也可以写在open 方法内，表示访问的是后台的哪一个程序)
//        var url = "http://localhost:8080/emp/volidUsername?username="+username+"&hello="+Math.random();
//
// //   4：使用open方法建立与服务器的连接
//        xhr.open("GET",url);
//
// //   5：发送请求send(String);
//        xhr.send();
//
// //   6：编写状态回调函数。
//        xhr.onreadystatechange=function (){
//          if(xhr.readyState == 4){
//
//            //  获取服务器返回的数据,
//            //  1存在 0不存在
//            var data = xhr.responseText;
//            // alert(data)
//
//            if(data == 0){ // 可以使用
//              document.getElementById("span").innerHTML = "<font color='green'>用户名可以使用</font>"
//            }else{
//              document.getElementById("span").innerHTML = "<font color='red'>不能使用</font>"
//            }
//          }
//        }
    }
   </script>
 </body>
</html>

package com.sky.controller;

import com.sky.service.EmpService;

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.sql.SQLException;

public class VolidUsernameServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        System.out.println(username);
        EmpService empService = new EmpService();
        try {
            int i = empService.register(username);
            System.out.println(i);
            //  写回去
            response.getWriter().println(i);
        } catch (SQLException e) {
            e.printStackTrace();
        }

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}