AJAX原理

最新推荐文章于 2024-08-08 11:16:24 发布

-bin_bin-

最新推荐文章于 2024-08-08 11:16:24 发布

阅读量1.4k

点赞数 1

本文链接：https://blog.csdn.net/m0_37459945/article/details/77937951

版权

java web 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

Ajax

1 篇文章 0 订阅

订阅专栏

1. AJAX简介及应用
AJAX（Asynchronous JavaScript And XML），直译为异步的JavaScript和XML。AJAX并不是一种全新的技术，而是将现有的JavaScript、XML等技术进行整合，通过异步请求的方式，实现页面无刷新式提交。需要强调的是，AJAX是客户端与服务器端的交互技术，和JavaScript的客户端验证技术有着本质的区别，读者不要混淆。
使用AJAX，请求响应模式不再是请求对应页面的模式，服务器端的响应不要求重新加载整个页面，而可能仅仅更新部分内容。而且发送的请求是异步的，不需要等待服务器对该异步请求做出响应，还可以继续当前页面的操作，当服务器对异步请求相应完成后，浏览器才对页面的局部内容进行更新。下面来看看AJAX技术在哪些地方得到了广泛的应用。
●验证注册名是否已使用
●网站页面局部登陆和退出
●文本框自动补全功能
●地图拖动、放大、缩小功能
2. XMLHttpRequest
掌握XMLHttpRequest对象的使用是学习AJAX技术（可使用AJAX框架）的核心。表6.1和表6.2分别列出了XMLHttpRequest的常用方法和属性，需要读者掌握。
这里写图片描述

3. AJAX案例
前面已经讲过，AJAX并不是一种全新的技术，而是将现有的JavaScript、XML等技术进行整合。本节通过JavaScript的XMLHttpRequest对象完成发送请求到服务器，并获得返回结果的任务，然后使用JavaScript更新局部的页面内容（不使用AJAX的框架，例如JQuery框架中的AJAX）。
●案例需求
本案例的需求非常简单，学生用户输入手机号码注册，离开该文本框时，后台查询MySQL数据库中的student表，如果系统数据库中该手机号已经存在，则提示“此手机号已被使用！”，如图6.13所示，否则提示“手机号可以使用！”，如图6.14所示。
这里写图片描述
●案例代码
接下来分步骤完成该需求的案例代码，并加以简单说明。
（1）创建ajax.jsp页面

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
    <title>AJAX案例</title>
    <!-- 等待加入JavaScript代码 -->
</head>
<body>
    <form name="userForm" action="" method="post">
        注册手机号：<input type="text" name="phone" id="phone" onblur="checkPhoneExist()"/>
        <div id="msg"></div>
    </form>
</body>
</html>

使用文本框的onblur事件，实现文本框失去焦点时检查用户填写的注册手机号是否已经使用，具体调用的是checkPhoneExist()方法。另外，当从服务器获取结果数据后，仅需更新id为msg的div中的内容。
（2）编写checkPhoneExist()方法
在ajax.jsp页面头部编写检查用户填写的注册手机号是否已经使用的JavaScript方法是checkPhoneExist()，具体代码如下：

var xmlHttp;  //声明一个变量，用于存储XMLHttpRequest对象 
function checkPhoneExist() {
    var f = document.userForm;
    var userPhone = f.phone.value;
    //调用创建XMLHttpRequest对象的方法，给xmlHttp赋值
    createXMLHttpRequest();
    //调用具体的方法，执行AJAX操作，其中传入的参数表示访问服务器的CheckUser这个Servlet，并把用户填写的注册手机号作为userPhone的参数传入CheckUser
    doAjax("CheckUser?userPhone="+userPhone);
}

（3）编写createXMLHttpRequest()方法
因为不同浏览器创建XMLHttpRequest对象的的方法是不同的，所以为了兼容不同版本的浏览器，将创建XMLHttpRequest对象的方法写成如下形式：

function createXMLHttpRequest() {
    if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        try {
            xmlHttp = new ActiveXObject("Msxml2.xmlHttp");
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.xmlHttp");
            } catch (e) {
                alert("对不起，您的浏览器不支持xmlHttpRequest对象！");
            }
        }   
    }
}

（4）编写doAjax()方法
AJAX需要在JavaScript中给服务器指定的服务发送异步请求，在doAjax方法中调用XMLHttpRequest对象的相关方法，给服务器CheckUser这个Servlet发送异步请求。

function doAjax(url) {
    if(!xmlHttp){
        return false;
    }
    //设置对象状态改变处理程序，即当XMLHttpRequest对象的状态发生改变时（XMLHttpRequest对象开始发送请求、请求发送完毕、开始读取响应、读取响应结束都是XMLHttpRequest对象的状态），会使用该页面中哪个JavaScript方法进行处理
    xmlHttp.onreadystatechange = doRequest;
    //建立与服务器的连接，参数依次为请求中的方法、请求的地址和是否使用异步请求
    xmlHttp.open("post",url,true);
    //如果是post方法请求，必须要添加下面的代码
    xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    //发送请求，参数为请求的参数，null表示不配置参数
    xmlHttp.send(null);
}

（5）编写doRequest()方法
作为客户端浏览器，需要根据XMLHttpRequest对象状态的改变编写相应的代码，对页面进行处理。下面的代码完成的功能是当XMLHttpRequest对象读取响应结束，根据CheckUser这个Servlet响应的文本内容（yes表示该注册手机号未被使用，no表示已被使用），对id为msg这个div的内容进行局部更新。

function doRequest() {
    //readyState是表示XMLHttpRequest对象状态的属性，4表示读取响应结束
    if(xmlHttp.readyState==4){
        //status表示服务器返回响应的HTTP状态码，200表示服务器正常响应
        if(xmlHttp.status==200){
            //responseText表示响应的文本内容
            if(xmlHttp.responseText=="yes"){
                document.getElementById("msg").innerHTML="手机号可以使用！";
                document.getElementById("msg").style.color="green";
            }else{
                document.getElementById("msg").innerHTML="此手机号已被使用！";
                document.getElementById("msg").style.color="red";
            }
        }else{
            alert("请求返回处理的数据有错误！");
        }
    }
}

（6）编写CheckUser类
在服务器端，编写CheckUser这个Servlet（后面章节将会学到Servlet），处理XMLHttpRequest对象发送的请求。该Servlet和其他Servlet本质上没有区别，只是需要注意，返回给客户端响应的文本内容需要和客户端处理程序匹配。

@WebServlet("/CheckUser")
public class CheckUser extends HttpServlet {
    private static final long serialVersionUID = 1L;
    public CheckUser(){
        super();
    }
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8"); //设置编码
        String phone = request.getParameter("userPhone");  //获取前台参数
        String DBDRIVER="com.mysql.jdbc.Driver";  //数据库驱动类  
        String DBURL="jdbc:mysql://localhost/book";  //数据库地址
        String DBUSER="mysql";  //数据库用户名
        String DBPASS="root";  //数据库密码
        Connection conn = null;  //创建连接对象
        Statement state = null;  //创建SQL语句对象
        ResultSet rs = null;  //创建结果集对象
        PrintWriter out = response.getWriter();
        try {
            Class.forName(DBDRIVER);  //加载数据库驱动
            conn=DriverManager.getConnection(DBURL, DBUSER, DBPASS);  //创建数据库连接
            state = conn.createStatement();
            String sql="select * from student where phone = '"+ phone +"'";
            rs = state.executeQuery(sql);   //执行SQL语句并获取结果集
            if(rs.next()){
                out.print("no");
            }else{
                out.print("yes");
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            out.flush();
            out.close();
        }                           
    }
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
}