<%@ 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>
分享到：
相关推荐
在这篇深度剖析中，我们将揭开XMLHttpRequest对象的神秘面纱，探讨其工作原理、常用方法和实际应用。 XMLHttpRequest对象是Ajax技术的基础，它允许JavaScript在页面不刷新的情况下与服务器进行通信。创建一个...
本压缩包文件"创建XMLHttpRequest对象的方法.rar"包含了一份关于如何创建XMLHttpRequest对象的详细教程，其核心内容可以从以下几个方面来理解： 1. **XMLHttpRequest对象的创建** 在JavaScript中，XMLHttpRequest...
### XMLHttpRequest对象的介绍和实现 #### 一、引言 随着网络应用的发展，网页与服务器之间的交互变得越来越频繁。传统的网页交互方式往往依赖于整个页面的刷新，这不仅效率低下，而且用户体验较差。为了解决这个...
一般网上流传的创建XMLHttpRequest对象比较简单。跨浏览器能力非常有限。并不全面。 经测试，用此方法创建XMLHttpRequest对象，在运用AJAX的时候，可以的兼容IE6,IE7,IE8,Opera,Safari,Google Chrome,fireFox。主流...
为了优化这一过程，我们可以考虑创建一个XMLHttpRequest对象池，复用这些对象而不是每次请求都新建。 首先，理解XMLHttpRequest的基本工作原理至关重要。当一个XHR对象被创建时，它会占用一定的系统资源，包括内存...
### 创建XMLHttpRequest对象 在现代Web开发中，异步JavaScript和XML（通常称为AJAX）是一种重要的技术，它允许网页在不重新加载整个页面的情况下与服务器进行数据交换。这一过程的核心在于`XMLHttpRequest`对象的...
XMLHttpRequest对象是Web开发中的关键组件，尤其对于实现AJAX（异步JavaScript和XML）技术至关重要。它允许在不刷新整个页面的情况下与服务器进行通信，极大地提升了用户体验。这个对象在所有现代浏览器中都得到了...
XMLHttpRequest 对象的使用和概述 XMLHttpRequest 对象是 Ajax 技术的核心组件之一，它允许 JavaScript 在不重新加载整个网页的情况下与服务器进行交互。XMLHttpRequest 对象的出现使得 Web 应用的开发更加灵活和...
Ajax 中的 XMLHttpRequest 对象 Ajax 是一种异步的 JavaScript 与 XML 技术，用于在客户端脚本与服务器之间实现数据交互过程。XMLHttpRequest 对象是 Ajax 的技术基础，尽管现在提供了各种 Ajax 框架，但是理解这个...
### 全面剖析XMLHttpRequest对象 #### 引言：AJAX与XMLHttpRequest的革命 XMLHttpRequest对象是现代网络开发中不可或缺的一部分，它是AJAX（Asynchronous JavaScript and XML）技术的核心，使得网页能够在不重新...
例如，UpdatePanel控件背后的实现就是基于XMLHttpRequest对象的，它自动处理了请求和响应的处理逻辑，使得开发者无需直接操作XMLHttpRequest对象。 总的来说，VS2008的AJAX控件为开发者提供了一种高效、直观的方式...
[王兴魁]AJAX核心技术1-XMLHttpRequest对象的使用
XMLHttpRequest对象是Ajax技术的核心，它是现代Web应用中用于实现客户端与服务器间异步数据交换的关键组件。在不刷新整个页面的情况下，XMLHttpRequest允许开发者通过JavaScript动态更新网页内容，极大地提升了用户...
### 全面剖析XMLHttpRequest对象 #### 一、XMLHttpRequest对象简介 XMLHttpRequest是一个非常重要的JavaScript对象，它允许网页向服务器发起异步请求并处理响应数据。这种技术是实现Ajax（Asynchronous JavaScript...
**Ajax入门基础之XMLHttpRequest对象总结** Ajax，即异步JavaScript和XML，是一种在无需刷新整个页面的情况下更新部分网页的技术。在Ajax的核心中，XMLHttpRequest（XHR）对象扮演着至关重要的角色，它允许...
### XMLHttpRequest对象详解 #### 一、引言 随着互联网技术的发展与演进，网页应用从简单的静态页面逐渐向动态交互式应用转变。其中，Ajax（Asynchronous JavaScript and XML）技术的出现极大地推动了这一进程。**...