//创建一个XMLHttpRequest对象,利用此对象与服务器进行通信,也是AJax的核心技术
function ajaxFunction() {
var xmlHttp = null;
try {// Firefox,Opera 8.0+,Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {// Internet Explorer
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
return xmlHttp;
}
window.onload = function() {
document.getElementById("Button1").onclick = function() {// 不像java,千万别加new
/**
* 1.获取XMLHttpRequest对象
*/
var xmlRequest = ajaxFunction();
/**
* 2.接受服务器端的响应 //0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法) *
*/
// 1(初始化)对象已建立,尚未调用send方法
// 2 (发送数据) send方法已调用,但是当前的状态及http头未知
// 3(数据传送中)已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,
// 4 (完成)数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
xmlRequest.onreadystatechange = function() {
// 响应发送完毕
if (xmlRequest.readyState == 4) {
// 200(服务器处理成功) 304(文件没有被修改)
if (xmlRequest.status == 200 || xmlRequest.status == 304) {
var data = xmlRequest.responseText;
alert(data);
}
}
};
/**
* 3.打开与服务器的连接 , *get-method请求方法, 请求路径, true 表示异步传输数据
*
* *如果用post发送数据,则应在open方法之后加上: *
*/
xmlRequest.open("post", "/MyScriptDemo/servlet/AjaxServlet?time="
+ new Date().getTime() + "&name=111", true);// 追加时间戳
xmlRequest.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
/**
* 4.发送数据 若是get方法,则不会传递任何数据,给send传递参数null即可 。 *post方式能接受send传递的参数
*/
xmlRequest.send("b=45&age=18");
};
};