AJAX入门

基本介绍

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

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

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

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

AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。

AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

AJAX 可使因特网应用程序更小、更快，更友好。

——参考《百度百科》

PS：参考文档：《W3School——AJAX 教程》

使用步骤

获得ajax引擎

//创建一个XMLHttpRequest对象,利用此对象与服务器进行通信 是AJAX技术的核心(兼容IE，FireFox，Opera 8.0+，Safari)
function getXMLHttpRequest(){
   var xmlHttp;
   try { 
        // Firefox,Opera 8.0+,Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e) {
        try {
            // Internet Explorer
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            try{
                // Internet Explorer
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) {
            }
        }
    }
    return xmlHttp;
 }
var xmlHttp = getXMLHttpRequest();

设置回调函数

xmlHttp.onreadystatechange = function(){
    if(xmlhttp.readyState == 4){
        if(xmlhttp.status == 200){
            alert("响应数据" + xmlhttp.responseText);
        }
    }
};

确定请求方式、路径及参数

xmlHttp.open("POST","${pageContext.servletContext.contextPath}/CheckUserNameIsExistServlet");

发送请求

xmlHttp.send("username=" + obj.value );

案例：登陆验证

验证HTML

<div class="form-group">
    <label for="username" class="col-sm-2 control-label">用户名</label>
    <div class="col-sm-6">
        <!-- 绑定一个离焦事件，用于Ajax判定用户名是否合法 -->
        <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" onblur="checkUserName(this)">
    </div>
    <div class="col-sm-4" id="userNameInfo">
        <!-- <span class="label label-success">用户名可用</span> <span class="label label-danger">用户名不可用</span> -->
    </div>
</div>

JavaScript使用AJAX实现用户名验证

<script type="text/javascript"> // JavaScript使用AJAX //创建一个XMLHttpRequest对象,利用此对象与服务器进行通信 是AJAX技术的核心 function getXMLHttpRequest(){ var xmlHttp; try { // Firefox,Safari xmlHttp=new XMLHttpRequest(); } catch (e) { try { // Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ // Internet Explorer xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } return xmlHttp; } function checkUserName(obj) { // 获得AJAX引擎 var xmlHttp = getXMLHttpRequest(); // 设置回调函数 xmlHttp.onreadystatechange = function() { // XMLHTTP请求的状态为：已完成，当前请求的http状态码：200成功 if(xmlHttp.readyState == 4 && xmlHttp.status == 200) { // 获取信息，并且放在"userNameInfo"中 document.getElementById("userNameInfo").innerHTML = xmlHttp.responseText; } }; // 确定请求方式，路径，如果是Get请求，需要在路径后写参数 // GET请求方式 // xmlHttp.open("GET","${pageContext.servletContext.contextPath}/CheckUserNameIsExistServlet?username=" + obj.value); // POST请求方式 xmlHttp.open("POST","${pageContext.servletContext.contextPath}/CheckUserNameIsExistServlet"); // 设置请求编码(POST必须要表单提交，GET可以不设置) xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded"); // 发送请求 // GET,数据在url里 // xmlHttp.send(null); // POST，填写参数 xmlHttp.send("username=" + obj.value ); } </script>

Servlet方法

public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
    response.setContentType("text/html;charset=utf-8");
    request.setCharacterEncoding("utf-8");
    // 获取用户名参数
    String username = request.getParameter("username");     
    // 查询用户
    try {
        User user = new UserService().getUserByUserName(username);
        if (user == null) {
            response.getWriter().write("<span class='label label-success'>用户名可用</span>");
        } else {
            response.getWriter().write("<span class='label label-danger'>用户名不可用</span>");
        }
    } catch (SQLException e) {
        e.printStackTrace();
    }
}

public void doPost(HttpServletRequest request,IOException {
    doGet(request,response);
}

PS：dao层和service层不再给出，大致逻辑是service调用dao层的查询方法得到User对象，再返回给Servlet。

PS：GET请求和POST请求有些微区别，大致是：

1. GET请求方式参数要在open方法的url参数后面写，POST请求方式参数写在send方法里

2. POST必须要表单提交，GET可以不设置
   xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");