AJAX原理

来源：互联网发布：知乎绑定合适的话题编辑：程序博客网时间：2024/06/10 00:38

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);    }}

阅读全文

0 0