<html>
<head>
<title>Ajax入门</title>
<style type="text/css">
<!--
body{
font-size:13px;
background-color:#e7f3ff;
}
form{
padding:0px; margin:0px;
}
input{
border-bottom:1px solid #007eff; /* 下划线 */
font-family:Arial, Helvetica, sans-serif;
color:#007eff;
background:transparent;
border-top:none;
border-left:none;
border-right:none;
}
p{
margin:0px;
padding:2px 2px 2px 10px;
background:url(icon.gif) no-repeat 0px 10px; /* 加入小icon图标 */
}
-->
</style>
<script language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
//创建XMLHttpRequest对象
createXMLHttpRequest();
function callServer(){
//获取表单中的数据
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
//如果没有填写则返回
if ((city == null) || (city == "")) return;
if ((state == null) || (state == "")) return;
//链接服务器，自动获得代号。本例没有链接服务器，只是示例
var url = "getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
//打开链接
xmlHttp.open("GET", url, true);
//告诉服务器在运行完成后（可能要用五分钟或者五个小时）做什么，这里触发updatePage函数
xmlHttp.onreadystatechange = updatePage;
//发送请求
xmlHttp.send(null);
}
//处理服务器响应
function updatePage(){
if (xmlHttp.readyState == 4) {
var response = xmlHttp.responseText;
document.getElementById("zipCode").value = response;
}
}
</script>
</head>
<body>
<form>
<p>城市: <input type="text" name="city" id="city" size="25" onChange="callServer();"></p>
<p>国家: <input type="text" name="state" id="state" size="25" onChange="callServer();"></p>
<p>代号: <input type="text" name="zipCode" id="city" size="5"></p>
</form>
</body>
</html>
分享到：
相关推荐
在这个"Ajax入门例子项目"中，我们将深入探讨Ajax的基础概念、工作原理以及如何创建简单的Ajax应用。 1. Ajax基础概念： - 异步：Ajax的主要特性是异步通信，意味着用户在请求发送后可以继续浏览网页，而无需等待...
**Ajax入门经典源代码概述** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术的核心在于利用JavaScript与服务器进行异步数据交互，结合XML或其他...
### AJAX入门知识点详解 #### 一、引言 AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换来实现这一点，从而为用户...
《ASP.NET 2.0 AJAX入门经典》这本书很可能包含了多个示例，演示如何使用AJAX技术来增强ASP.NET 2.0应用程序的交互性。这些实例可能涵盖用户界面改进、数据异步加载、实时验证等多个场景，帮助读者掌握实际开发技巧...
ASP.NET_AJAX入门系列：概述.doc ASP.NET_AJAX_在Web开发中的应用.doc ASP.NET_AJAX入门系列：Timer控件简单使用.doc ASP.NET_AJAX入门系列：UpdateProgress控件简单介绍.doc ASP.NET_AJAX入门系列：使用...
**Ajax入门：无刷新技术与JavaScript中的Ajax** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器交换数据并局部更新页面，使得用户...
ASP.NET AJAX是一个完整的开发框架，其服务器端编程模型相对于客户端编程模型较为简单，而且容易与现有的ASP.NET程序相结合，通常实现复杂的功能只需要在页面中拖几个控件，而不必了解深层次的工作原理，除此之外...
Ajax，即Asynchronous JavaScript and XML（异步JavaScript和XML），是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。Ajax允许网页与服务器之间进行交互，实现数据的动态加载，提高了用户体验。 在...
**Ajax（Asynchronous JavaScript and XML）**是一种在无需重新加载整个...通过阅读这份"ajax入门教程PDF"，初学者将能够快速理解Ajax的工作方式，掌握基本的Ajax编程技能，从而在实际项目中提升网页的交互性和动态性。
总的来说，这个"AJAX入门实例"旨在帮助初学者理解AJAX的基本概念和工作流程，以及如何在ASP.NET环境中实现它。通过学习这个实例，你可以掌握创建异步Web应用的基本技巧，提高用户体验，并为后续更复杂的AJAX应用场景...
**Ajax入门**通常涉及以下几个关键概念： 1. **XMLHttpRequest对象**：它是Ajax的核心，用于在后台与服务器进行通信。创建XMLHttpRequest对象后，可以通过它的open()方法设置请求类型（GET或POST）、URL以及是否异步...
**Ajax 入门经典——掌握Ajax核心技术** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新，极大地...
在《Ajax入门教程》中，可能包含了一系列经典的小例子，比如： 1. **实时搜索建议**：用户在输入框中输入字符时，利用Ajax动态向服务器发送请求，获取匹配的搜索建议，并即时显示在下拉框中。 2. **无刷新分页**：...
通过这个简单的Ajax入门实例，你可以理解如何利用Ajax实现页面内容的异步加载。随着经验的增长，还可以学习更高级的技巧，如使用jQuery的$.ajax()函数、Promise或现代的fetch API，以及错误处理和进度回调等。
**Ajax入门视频教程** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它的核心在于JavaScript，通过XMLHttpRequest对象与服务器进行异步数据交互，从而实现...
### 前端技术AJAX入门精讲 #### 一、AJAX概述 **AJAX**（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现...
**Ajax入门视频教程详解** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术使得Web应用程序能够更快、更高效地运行，提升了用户体验，因为它允许...
ajax入门 ajax入门 ajax入门是初学者的宝典 ajax入门 ajax入门 ajax入门是初学者的宝典 ajax入门 ajax入门 ajax入门是初学者的宝典 ajax入门 ajax入门 ajax入门是初学者的宝典
ajax入门书籍 ajax入门到精通 好用又源码