<%@ page contentType="text/html;charset=GBK"%>
<!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=ISO-8859-1">
<title>Insert title here</title>
<script language="JavaScript" type="text/JavaScript">
//创建xmlHttp对象
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!");
//调用函数
function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
request.open("GET", url, true);
request.onreadystatechange = updatePage; //回调属性
request.send(null);
}
//request-type:发送请求的类型。典型的值是 GET 或 POST,但也可以发送 HEAD 请求。
//url:要连接的 URL。
//asynch:如果希望使用异步连接则为 true,否则为 false。该参数是可选的,默认为 true。
//username:如果需要身份验证,则可以在此指定用户名。该可选参数没有默认值。
//password:如果需要身份验证,则可以在此指定口令。该可选参数没有默认值。
//通常使用其中的前三个参数。事实上,即使需要异步连接,也应该指定第三个参数为 “true”。这是默认值,但坚持明确指定请求是异步的还是同步的更容易理解。
//open():建立到服务器的新请求。
//send():向服务器发送请求。
//abort():退出当前请求。
//readyState:提供当前 HTML 的就绪状态。
//responseText:服务器返回的请求响应文本。
//responseXML: 服务器返回的请求响应XML。
function updatePage() {
//0:请求没有发出(在调用 open() 之前)。
//1:请求已经建立但还没有发出(调用 send() 之前)。
//2:请求已经发出正在处理之中(这里通常可以从响应得到内容头部)。
//3:请求已经处理,响应中通常有部分数据可用,但是服务器还没有完成响应。
//4:响应已完成,可以访问服务器响应并使用它。
if (request.readyState == 4){ // 就绪状态
if (request.status == 200){ //HTTP状态 输入了错误的 URL 请求而得到 404 错误码,访问数据受到保护或者禁止访问的 403 和 401
alert("Server is done!");
var response = request.responseText.split("|");
document.getElementById("order").value = response[0];
document.getElementById("address").innerHTML = response[1].replace(/\n/g, "");
}else if (request.status == 404) {
alert("Request URL does not exist");
}else {
alert("Error: status code is " + request.status);
}
}
}
</script>
</head>
<body>
<form action="POST">
<p>Enter your phone number:
<input type="text" size="14" name="phone" id="phone"
onChange="getCustomerInfo();" />
</p>
<p>Your order will be delivered to:</p>
<div id="address"></div>
<p>Type your order in here:</p>
<p><textarea name="order" rows="6" cols="50" id="order"></textarea></p>
<p><input type="submit" value="Order Pizza" id="submit" /></p>
</form>
</body>
</html>
<!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=ISO-8859-1">
<title>Insert title here</title>
<script language="JavaScript" type="text/JavaScript">
//创建xmlHttp对象
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!");
//调用函数
function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
request.open("GET", url, true);
request.onreadystatechange = updatePage; //回调属性
request.send(null);
}
//request-type:发送请求的类型。典型的值是 GET 或 POST,但也可以发送 HEAD 请求。
//url:要连接的 URL。
//asynch:如果希望使用异步连接则为 true,否则为 false。该参数是可选的,默认为 true。
//username:如果需要身份验证,则可以在此指定用户名。该可选参数没有默认值。
//password:如果需要身份验证,则可以在此指定口令。该可选参数没有默认值。
//通常使用其中的前三个参数。事实上,即使需要异步连接,也应该指定第三个参数为 “true”。这是默认值,但坚持明确指定请求是异步的还是同步的更容易理解。
//open():建立到服务器的新请求。
//send():向服务器发送请求。
//abort():退出当前请求。
//readyState:提供当前 HTML 的就绪状态。
//responseText:服务器返回的请求响应文本。
//responseXML: 服务器返回的请求响应XML。
function updatePage() {
//0:请求没有发出(在调用 open() 之前)。
//1:请求已经建立但还没有发出(调用 send() 之前)。
//2:请求已经发出正在处理之中(这里通常可以从响应得到内容头部)。
//3:请求已经处理,响应中通常有部分数据可用,但是服务器还没有完成响应。
//4:响应已完成,可以访问服务器响应并使用它。
if (request.readyState == 4){ // 就绪状态
if (request.status == 200){ //HTTP状态 输入了错误的 URL 请求而得到 404 错误码,访问数据受到保护或者禁止访问的 403 和 401
alert("Server is done!");
var response = request.responseText.split("|");
document.getElementById("order").value = response[0];
document.getElementById("address").innerHTML = response[1].replace(/\n/g, "");
}else if (request.status == 404) {
alert("Request URL does not exist");
}else {
alert("Error: status code is " + request.status);
}
}
}
</script>
</head>
<body>
<form action="POST">
<p>Enter your phone number:
<input type="text" size="14" name="phone" id="phone"
onChange="getCustomerInfo();" />
</p>
<p>Your order will be delivered to:</p>
<div id="address"></div>
<p>Type your order in here:</p>
<p><textarea name="order" rows="6" cols="50" id="order"></textarea></p>
<p><input type="submit" value="Order Pizza" id="submit" /></p>
</form>
</body>
</html>