Ajax学习（二）

Ajax技术的核心是XMLHttpRequest对象（简称XHR），可以通过使用XHR对象获取到服务器的数据，然后再通过DOM将数据插入到页面中呈现。虽然名字中包含XML，但Ajax通讯与数据格式无关，所以我们的数据格式可以是XML或JSON等格式。

XMLHttpRequest对象用于在后台与服务器交换数据，具体作用如下：

在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据

XMLHttpRequest是一个JavaScript对象，它是由微软设计，并且被Mozilla、Apple和Google采纳，W3C正在标准化它。它提供了一种简单的方法来检索URL中的数据。

我们要创建一个XMLHttpRequest实例，只需new一个就OK了
对于IE6不支持原始的XHR对象，则我们要写一个兼容性版本：

        if (window.XMLHttpRequest) {

            xhr = new XMLHttpRequest();

        } else {

            try {

                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {

                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }

在创建XHR对象后，接着我们要调用一个初始化方法open()，它接受五个参数具体定义如下：

void open(
   DOMString method, //"GET", "POST", "PUT", "DELETE"
   DOMString url,
   optional boolean async,
   optional DOMString user,
   optional DOMString password
);

通过上面的定义我们知道open()方法的签名包含五个参数，其中有参数method和url地址是必填的，假设我们针对var url = “checkUnameJson”发送POST请求获取数据，具体定义如下：

var method = "POST";
        var url = "checkUnameJson";
        // 相当于输入连接   1
        xhr.open(method, url,true);

参数1有get和post两个取值

参数2表示什么就不用说了

重点说下第3个参数：boolean的取值

当该boolean值为true时，服务器请求是异步进行的，也就是脚本执行send（）方法后不等待

服务器的执行结果，而是继续执行脚本代码；

当该boolean值为false时，服务器请求是同步进行的，也就是脚本执行send（）方法后等待

服务器的执行结果的返回，若在等待过程中超时，则不再等待，继续执行后面的脚本代码
对于POST请求来说以下代码必须写上：

xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")

通过上述代码会启动一个针对myxhrtest.aspx的GET请求，这里有两点要注意：一是URL相对于执行代码的当前页面（使用绝对路径）；二是调用open()方法并不会真正发送请求，而只是启动一个请求准备发送。要真正发送请求要使用send()方法，send()方法接受一个参数，即要作为请求主体发送的数据，如果不需要通过请求主体发送数据，我们必须传递一个null值。在调用send()之后，请求就会被分派到服务器，完整Ajax请求代码如下：

    var method = "POST";
        var url = "checkUnameJson";
        // 相当于输入连接   1
        xhr.open(method, url,true);

        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
        //发送  回车    2
        xhr.send("uname=" + document.getElementById("name").value);

在发送请求之后，我们需要检查请求是否执行成功，首先可以通过status属性判断，一般来说，可以将HTTP状态代码为200作为成功标志。这时，响应主体内容会保存到responseText中。此外，状态代码为304表示请求的资源并没有被修改，可以直接使用浏览器缓存的数据，Ajax的同步请求代码如下：

    if (xhr.addEventListener) {
            xhr.addEventListener("readystatechange", function() {


                if (xhr.readyState == 4) {
                    //当返回状态 200时 读取内容
                    if (xhr.status == 200) {
                        document.getElementById("divtext").innerHTML = xhr.responseText;
                    }
                }
            });
        } else {


            xhr.onreadystatechange = function() {


                if (xhr.readyState == 4) {
                    //当返回状态 200时 读取内容
                    if (xhr.status == 200) {
                        document.getElementById("divtext").innerHTML = xhr.responseText;
                    }
                }
            }
        }

        var method = "GET";
        var url = "hello.txt";
        // 相当于输入连接   1
        xhr.open(method, url);

        //发送  回车    2
        xhr.send();

如果我们发送异步请求，那么在请求过程中javascript代码会继续执行，这时可以通过readyState属性判断请求的状态，当readyState = 4时，表示收到全部响应数据，属性值的定义如下：

现在我们对Ajax的请求实现有了初步的了解，接下来我们将通过具体的例子说明Ajax请求的应用场合和局限。

在日常网络生活中，我们在注册页面进行注册时，有时输入用户名当鼠标离开输入框时，页面会立即显示该用户名是否可以，这些就是使用了ajax实现的，现在让我们模拟以下它的实现过程
首先写个注册页面

<form action="" >
    姓名：<input type="text" name="uname" id="name" onblur="checkName()">
    <span id="sp"></span>
    <br>
    密码：<input type="password" name="pwd"><br>
    <input type="submit" value="注册">

    </form>

完整的ajax请求：

<script type="text/javascript">
    var xhr;
    function checkName() {

        if (window.XMLHttpRequest) {

            xhr = new XMLHttpRequest();

        } else {

            try {

                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {

                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }

        if (xhr.addEventListener) {
            xhr.addEventListener("readystatechange", common);
        } else {

            xhr.onreadystatechange = common;
        }

        var method = "POST";
        var url = "checkUnameJson";
        // 相当于输入连接   1
        xhr.open(method, url,true);

        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
        //发送  回车    2
        xhr.send("uname=" + document.getElementById("name").value);

        function common() {

            if (xhr.readyState == 4) {
                //当返回状态 200时 读取内容
                if (xhr.status == 200) {
        //返回值是json格式的字符串 以下代码是把json格式的字符串转成json
                    var strJson = xhr.responseText;
                    var jsonObj = JSON.parse(strJson);
                    //  alert(jsonObj)
                    console.log(strJson);
                    if (jsonObj.result) {
                        document.getElementById("sp").innerHTML = "不可用";
                    } else {
                        document.getElementById("sp").innerHTML = "可用";
                    }

                }
            }

        }

    }
</script>

为求方便 我们在servlet中采用list模拟数据库中的用户表：

@WebServlet("/ajax/checkUnameJson")
public class CheckNameJsonServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    private List<String> names = new ArrayList<>();

    public CheckNameJsonServlet() {
        super();
        names.add("z3");
        names.add("l4");
        names.add("lgh");

    }


    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");

        //设置浏览器使用什么编码去解码 
        response.setContentType("application/json;charset=utf-8");
        //告诉tomcat响应体以utf-8编码 如果设置了上面的响应头 则不再起作用
        //response.setCharacterEncoding("utf-8");
        String name = request.getParameter("uname");

        boolean flag = names.contains(name);

        if(flag){
            response.getWriter().write("{\"result\":true}");
        }else{
            response.getWriter().write("{\"result\":false}");

        }
    }


    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        doGet(request, response);
    }

}

运行

输入字符“lgh”结果:

输入字符“hello”结果：