Servlet Java Web开发（8）Ajax和json

主要是前端

Ajax核心对象XMLHttpRequest，主要使用步骤：

1.创建XMLHttpRequest

function createXMLHttpRequest() {
    try {
        return new XMLHttpRequest();//大多数浏览器
    } catch (e) {
        try {
            return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
        } catch (e) {
            try {
                return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本    
            } catch (e) {
                alert("哥们儿，您用的是什么浏览器啊？");
                throw e;
            }
        }
    }
}

/*
在某一个响应事件中，创建XMLHttpRequest对象

*/

var xmlHttp=createXMLHttpRequest();

 

2.使用open方法，创建与servlet的连接，（get或者post方法）

/*打开连接
open(method,url,async)
method为"GET"或者"POST"
async  为true或者false，一般是true，
*/

xmlHttp.open("GET", "/ajaxdemo1/AServlet", true);

 

3.发送请求数据

/*
前端和后端通信数据可以是普通文本，形如user=jack&password=123之类的post数据

json数据，xml数据

xmlHttp.send("user=hi&status-good");

GET，发送null即可。
POST数据的时候需要设置
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

*/

 

 

4.接受服务器回复。

xmlHttp.onreadystatechange = function() {//当xmlHttp的状态发生变化时执行
            // 双重判断：xmlHttp的状态为4（服务器响应结束），以及服务器响应的状态码为200（响应成功）
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                // 获取服务器的响应结束，对于普通文本或者json数据
                var text = xmlHttp.responseText;
                //对于XML数据
                            var doc=xmlHttp.responseXML;
        
            }
        };

对于json，使用eval函数来解析。

对于ajax json还有如下格式可以使用

window.onload = function() {
    var btn = document.getElementById("btn");
    btn.onclick = function() {
        /*
        1. ajax
        */
        ajax(
            {
                url:"<c:url value='/AServlet'/>",
                type:"json",
                callback:function(data) {
                    document.getElementById("h3").innerHTML = data.name + ", " + data.age + ", " + data.sex;
                }
            }
        );
    };
};

 

其他非关键知识，当一个文本框失去焦点的时候发送ajax数据

<input type="text" name="username" id="usernameEle"/>

var userEle = document.getElementById("usernameEle");
    userEle.onblur = function() {

var xmlHttp =createXMLHttp();
.......
/*
ajax相关操作

*/

};