Ajax专题：异步交互局部刷新初步

从一个用户名校验的例子来认识Ajax的基础应用

首先建立html事件触发端的代码

<!--ajax方式下不须要使用表单来进行数据提交，所以不用写表单标签-->
<!--ajax方式不须要name属性，须要一个id的属性-->
<input type="text" id="username" />
<input type="button" value="校验" onclick="verify()"/>
<!--这个div用于存放服务器段返回的信息，开始为空-->
<!--id属性定义是为了利用dom的方式找到某一个节点，进行操做-->
<div id="result"></div>
当咱们获得服务器端返回的数据后动态的填充到div标记中

而后，服务器端咱们建立一个Servlet命名为AJAXServer,用于校验客户端的数据并返回，实际上客户端的数据是由咱们的AJAX引擎接收到并传给服务器端，而后再由AJAX引擎接收到服务器端的数据，返回给客户端动态加载的，这是一个异步的机制，这是后话，咱们先来建立咱们的Servlet

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
public class AJAXServer extends HttpServlet{
    protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
        doGet(httpServletRequest, httpServletResponse);
    }
    protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
        try{
            httpServletResponse.setContentType("text/html;charset=utf-8");
            PrintWriter out = httpServletResponse.getWriter();
            //1.取参数  
            String old = httpServletRequest.getParameter("name");
            //2.检查参数是否有问题
            if(old == null || old.length() == 0){
                out.println("用户名不能为空");
            } else{
                String name = URLDecoder.decode(old,"UTF-8");
                //3.校验操做,模拟数据并无真正的取数据库信息，这个不是客户端关心的，客户端只看是否是服务器返回的数据
                if(name.equals("jerry")){
                    //4。和传统应用不一样之处。这一步须要将用户感兴趣的数据返回给页面端，而不是将一个新的页面发送给用户
                    out.println("用户名[" + name + "]已经存在，请使用其余用户名" );
                } else{
                    out.println("用户名[" + name + "]还没有存在，可使用该用户名注册 ");
                }
            }
        } catch(Exception e){
            e.printStackTrace();
        } 
    }
}

好了，服务器端校验完成，开始建立咱们真正的AJAX应用了，来建立咱们对应到客户端html中的js文件了，取名为checkUserName，固然咱们不能忘了再客户端html文件中引入咱们建立的js文件<script type="text/javascript" src="jslib/checkUserName.js"></script>
下面咱们来具体来建立操做的代码

var xmlhttp;
function verify(){
    //1.使用dom的方式获取文本框中的数据
    //document.getElementById("username")是dom中获取元素节点的一种方法，一个元素节点对应HTML页面中的一个标签，若是<input>
    //.value能够获取一个元素节点的value属性值
    var userName = document.getElementById("username").value;
    //2.建立XMLHTTPRequest对象
    //这是XMLHTTPRequest对象五步使用中最复杂的一步
    //需呀针对IE和其它类型的浏览器创建这个对象的不一样方式写不一样的代码

    if(window.XMLHttpRequest){
        //针对FireFox，Mozillar，Opera，Safari，IE7，IE8
        xmlhttp = new XMLHttpRequest();
        //针对某些特定banben的mozillar浏览器的BUG进行修正
        if(xmlhttp.overrideMimeType){
          xmlhttp.overrideMimeType("text/xml");  
        }

    }else if(window.ActiveXObject){
         //针对IE5,IE5.5,IE6(IE7,IE8)
         //两个能够用于建立XMLHTTPRequest对象的控件名称，保存在一个js数组中
        //排在前面的版本较新
       var activexName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
       for(var i=0;i<activexName.length;i++){
           try{
             //取出一个控件名进行建立，若是建立成功就终止循环
             //若是建立失败，抛出异常，而后继续循环，继续尝试建立
             xmlhttp = new ActiveXObject(activexName[i]);
               break;
           }   catch(e){
           }
       }
  }
    //确认XMLHttpRequest对象建立成功
    if(!xmlhttp){
        alert("XMLHttpRequest对象建立失败");
        return;
    }else{
        alert(xmlhttp);
    }

    //2.注册回调函数
    //注册回调函数时，只须要函数名，不要加括号
    //咱们须要将函数名注册，若是加上括号，就会把函数的返回值注册上，这是错误的
    xmlhttp.onreadystatechange=callback;
    
    //3.设置连接信息
    //第一个参数表示http的请求方式，支持全部http的方式，主要使用get和post
    //第二个参数表示请求的url地址，get方式请求的参数也会在URL中
    //第三个参数表示采用异步仍是同步方式交互，true表示异步
    xmlhttp.open("GET","AJAXServer?name="+ userName,true);

    //4.发送数据，开始和服务器端进行交互
    //同步范式下，send这句话会在服务器端数据回来后才执行完
    //异步方式下，send这句话会当即完成执行
    xmlhttp.send(null);

// Post请求方式的代码
xmlhttp.open("POST","AJAXServer",true);
//POST方式须要本身设置http的请求头
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST方式发送数据
xmlhttp.send("name=" + userName);

}
//回调函数
function callback(){
    //5接收响应数据
    //判断对象的状态是交互完成
    if(xmlhttp.readyState == 4){
        //判断http的交互是否成功
        if(xmlhttp.status == 200){
            //获取服务器端返回的数据
            //获取服务器端输出的纯文本数据
            var responseText = xmlhttp.responseText;
            //将数据显示在页面上
            //经过dom的方式找到div标签所对应的元素节点
            var divNode = document.getElementById("result");
            //设置元素节点中的html内容
            divNode.innerHTML = responseText;
        }
    }
}

好了，AJAX应用的具体步骤代码中都有详细的解释了，一个简单的AJAX的应用完成了，赶快试试吧