📄 client.jsp
字号:
<%@ page contentType="text/html"%>
<%@ page pageEncoding="gb2312"%>
<!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=gb2312">
<title>接受服务端数据</title>
<script language="javascript">
var xmlHttp;
function getGiftFromServer(){
var url = "./server.jsp";
if(window.ActiveXObject){
//AJAX，即"Asynchronous JavaScript And XML"的缩写
//可翻译为异步JavaScript及XML技术。其核心是一个寄宿在浏览器中名为XMLHTTPRequest的类
//应用AJAX的流程：
//1、定义一个事件处理器
//2、获取XMLHTTPRequest，并将事件处理器注册给它
//3、与服务器连接
//4、发送信息
//5、服务器返回处理完毕的信息
//6、每当XMLHTTPRequest的状态发生变化，自动触发事件处理器
//7、事件处理器动态更新页面
//取得 XMLHTTPRequest
//在IE7.0之前获得XMLHTTPRequest，使用如下代码：
// if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }
//而在IE7.0中：
//if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest }
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//注册事件处理器
xmlHttp.onreadystatechange = showGift;
//xmlHttp.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword)
//其中：
// bstrMethod: 连接方式，可用的有GET, POST, PUT, or PROPFIND
// bstrUrl: 服务器的url
// varAsync（可选）: 调用是否异步，默认为true（调用立即返回）
// bstrUser（可选）：用户名，如果url需要验证时附上
// bstrPassword（可选）：密码，如果url需要验证时附上
//open()方法可以直接打开一个xml文档，并通过xmlHttp的responseXML来读取相应的节点。如下例：
xmlHttp.open("GET",url,true);
//varBody（可选）: 可为字符串或xml等数据，可以为null。无返回值
//此方法在open()设为异步时，立即返回；在open()设为同步时，必须等到reponse对象从服务器中返回时才返回。
xmlHttp.send("null");
setTimeout("getGiftFromServer(),6000");
}
function showGift(){
/**
*因为我们这里使用异步，readyState属性用来判断服务器返回信息的状态。
*其值是一个从0至4的整数，对应于：
* 0：对象已创建，但未初始化（未调用open()方法）
* 1：对象已创建，但未调用send()方法
* 2：已调用send()方法，但status及headers还未可用
* 3：已经传回部分数据，但status及headers还未完全可用
* 4：已经收到所有数据，可使用所有数据
*/
if(xmlHttp.readyState ==4 || xmlHttp.readyState == "complete"){
//事件处理器动态更新页面
//处理器读取xmlHttp.responseText的值，并通过JavaScript动态更新<div id="output">的内容。
document.getElementById("output").innerHTML = "Time if for" + xmlHttp.responseText;
}
}
</script>
</head>
<body onload="getGiftFromServer()">
<h1>AJAX例子</h1>
<div id="output"></div>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -