AJAX技术

jmc_wjx

已于 2022-12-08 17:06:33 修改

阅读量145

点赞数

分类专栏： JAVA 文章标签： ajax

于 2021-06-19 18:07:13 首次发布

本文链接：https://blog.csdn.net/jmc_wax/article/details/118057146

版权

JAVA 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

AJAX是非常方便的一种技术它可以实现网页局部刷新，就像我们在做用户注册的时候用户名验证就可以使用AJAX技术来实现异步加载

url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。

type: 向后端的请求方式,要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。)

timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。

async: 要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

cache: 要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。

data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。对象必须为key/value格式，不需要转换成字符串,可以查看processData选项(默认processData为true,如果是上传文件不需要将数据转换成String类型,则设置成false)。

dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下： xml：返回XML文档，可用JQuery处理。 html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。 script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。 json：返回JSON数据。 jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。 text：返回纯文本字符串。

beforeSend：要求为 Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。 function(XMLHttpRequest){ this; //调用本次ajax请求时传递的options参数 })

complete：要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。 function(XMLHttpRequest, textStatus){ this; //调用本次ajax请求时传递的options参数 }

success：请求成功回调函数

error: 请求失败回调函数

示例

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
    //当用户名输入框失去焦点的时候blur获取文本框里的内容[type=text]传到后台进行验证
    $("[type=text]").blur(function(){
        $.ajax({

            //请求地址并传过去值
            url:'Web?name='+$("#name").val(),
            //提交方式post
            type:'post',
            //返回数据类型
            dataType:'text',
            //获取数据类型并对类型进行判断
            success:function(data){
                //对数据进行判断
                if (data==1) {
                      $("#span").html("用户已存在")
                      $("#name").html("")
                }else{
                      $("#span").html("可以注册")
                }    
            }
        });
    });
});
</script>
<head>
<meta charset="UTF-8">
<title>用户注册验证</title>
</head>
<body>
账号<input type="text" id="name"> <span id="span"></span><br>
密码<input type="password"> 
</body>
</html>

链接数据库

public User sel(String name) {
         String className = "com.mysql.cj.jdbc.Driver";
           String url = "jdbc:mysql://localhost:3306/mode?serverTimezone=UTC";
           String user = "root";
           String password = "123";
           Connection con = null;
             PreparedStatement pr = null;
             ResultSet ex = null;
             User us  = null;
           try {
                Class.forName(className);
                  con = DriverManager.getConnection(url, user, password);
                 String s = "SELECT * FROM user WHERE username=?";
                  pr = con.prepareStatement(s);
                pr.setString(1, name);
                  ex= pr.executeQuery();
                if (ex.next()) {
                     us = new User();
                    us.setUid(ex.getInt("uid"));
                    us.setUsername(ex.getString("username"));
                    us.setPwd(ex.getString("pwd"));
                    us.setSex(ex.getString("sex"));
                    us.setTel(ex.getString("tel"));
                    us.setIdcard(ex.getString("idcard"));
                }
            } catch (ClassNotFoundException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }finally {
                try {
                    ex.close();
                    pr.close();
                    con.close();
                } catch (SQLException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
            }
        return us;
    }

返回到页面

   request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        String name = request.getParameter("name");
          UserDao  dao=    new UserDaoImpl();
          User sel = dao.sel(name);

         //如果数据库里面没有查到用户名则说明用户名没有被占用可以注册

如果有用户名则说明用名不可以注册请更换用户名
          if (sel!=null) {
              response.getWriter().write("1");
        }else {
            response.getWriter().write("2");
        }

jmc_wjx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX技术

AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。...
复制链接

扫一扫