<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var xmlHttp = false;
function doIt(){
    sendRequest("GET","/system/ajax.action",true,callback);
}
function sendRequest(method, url, async, callback) {
    if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (!xmlHttp) {
        alert("当前浏览器无法创建XMLHttpRequest对象");
    } else {
        //初始化XMLHttpRequest对象
        xmlHttp.open(method, url, async);
        //定义一个回调函数
        xmlHttp.onreadystatechange = callback;
        //发送
        xmlHttp.send();
    }
}
function callback(){
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        var str = xmlHttp.responseText;
        //alert(str);
        var obj = eval("(" + str + ")");
        alert(obj.name + " : " + obj.age);
    }
}
</script>
</head>
<body>
    <button id="b" onclick="doIt()">获得JSON对象</button>
</body>
</html>
public void ajax(){
    try {
        String s = "{\"name\":\"张三\",\"age\":\"20\"}";
                                 
        ServletActionContext.getResponse().setCharacterEncoding("UTF-8");
        ServletActionContext.getResponse().getWriter().print(s);
    } catch (IOException e) {
        e.printStackTrace();
    }
}


属性描述
onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化

  • 1: 服务器连接已建立

  • 2: 请求已接收

  • 3: 请求处理中

  • 4: 请求已完成，且响应已就绪

status

200: "OK"

404: 未找到页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#Button1').click(function () {
var username = $('#txtUserName').val();
var pwd = $('#txtPwd').val();
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService1.asmx/Login",
data: "{username:'" + username + "',pwd:'" + pwd + "'}",
success: function (bukeyi) {
if (bukeyi.d == 'true') {
window.location = 'HTMLPage1.htm';
}
else {
$('#divinfo').text("用户名或密码错误");
}
}
})
})
})
</script>
</head>
<body>
用户名<input id="txtUserName" type="text" /><br />
密码<input id="txtPwd" type="text" /><br />
<input id="Button1" type="button" value="登录" /><br />
<div id="divinfo"></div>
</body>
</html>

----------------------------------------------------------

<script type="text/javascript">
var xmlHttp = false;
function qiangda(ipaddress){
    //alert(ipaddress);
    sendRequest("GET","qiangda.action?ip="+ipaddress,true,callback);
}
function sendRequest(method, url, async, callback) {
    if (window.XMLHttpRequest) {
        //基于Mozilla的浏览器，直接创建XMLHttpRequest对象
        xmlHttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {//IE浏览器
        //xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        //IE浏览器中XMLHTTP的实现版本并不相同
        var msxmls = ["MSXML3" , "MSXML2" , "Microsoft"];
        for(var i=0; i < msxmls.length; i++)
        {
            try
            {
                xmlHttp = new ActiveXObject(msxmls[i]+".XMLHTTP");
            }
            catch(e)
            {
                alert("您的浏览器不支持XMLHTTP控件");
            }
        }
    }
    if (!xmlHttp) {
        alert("当前浏览器无法创建XMLHttpRequest对象");
    } else {
        //初始化XMLHttpRequest对象
        xmlHttp.open(method, url, async);
        //定义一个回调函数
        xmlHttp.onreadystatechange = callback;
        //发送
        xmlHttp.send();
    }
}
function callback(){
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        var str = xmlHttp.responseText;
        //alert(str);
        var obj = eval("(" + str + ")");
        //Dialog.alert(obj.name + " : " + obj.age);
        alert(obj.name + " : " + obj.age);
    }
}
</script>