比较好的一篇ajax原理：适合初学者 http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html
关于同步和异步的解释: http://www.cnblogs.com/lebronjames/archive/2010/10/09/1846690.html
关于详细的XMLHttpRequest对象的介绍: http://baike.baidu.com/view/1105115.htm?fr=aladdin
下面是一个输入邮编号通过XMLHttpReqeust对象异步获取邮编所在的城市和地区信息的简单例子：
帖出部分核心JS代码
<script type="text/javascript">
var xmlHttp ; //保存XMLHttpRequest对象的全局变量
function createXmlHttp(){
//根据window.XMLHttpRequest对象是否存在使用不同的创建方式
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest(); //FF或者Oper等浏览器创建方式
}else if(window.ActiveXObject){
xmlHttp = new ActiveXObejct("Micorsoft.XMLHTTP"); //IE浏览器创建方式
}
}
//校验输入邮编只能输入数字
function checkNumber(){
if(event.keyCode>=48 && event.keyCode<=57){
event.returnValue =true;
}else{
event.returnValue = false;
}
}
//获取信息的调用函数
function getPostalCode(){
var pCodeValue = document.getElementById("postalCode").value;
alert(pCodeValue);
if(pCodeValue.length==6){
createXmlHttp(); // 创建XMLHttpRequest对象
//onreadystatechange属性：每次 readyState 属性改变的时候调用的事件句柄函数
//readyState属性：HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，
//直到接收到完整的 HTTP 响应，这个值增加到 4
xmlHttp.onreadystatechange=function(){ //获取地区信息的回调函数
//成功返回
if(xmlHttp.readyState==4 && xmlHttp.status==200){
var areaInfo = xmlHttp.responseText; //获取服务器返回的信息
console.info(areaInfo);
if(areaInfo!=""){
var arr = areaInfo.split("|");
alert(arr[0]);
alert(arr[1]);
document.getElementById("area").value=arr[0];
document.getElementById("city").value=arr[1];
}
}
};
xmlHttp.open("GET","postalcode.jsp?postalCode="+ pCodeValue,true);
xmlHttp.send(null);
}
}
</script>
前端Html代码：
<body>
<h3>邮编测试</h3>
<p>邮编:<input id="postalCode" onkeypress="checkNumber()" type="text" onblur="getPostalCode()"/></p>
<p>地区:<input id="area" type="text" /></p>
<p>城市:<input id="city" type="text" /></p>
</body>
相关推荐
Ajax工作原理 以及优点 缺点一些用途啊 关于什么Ajax的ppt文件
以下是一个简单的Ajax GET请求示例： ```javascript var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { document.getElementById('...
Ajax实现原理解释 java 与ajax的结合 是一本很好的学习文档
4. **Ajax工作原理** - **触发事件**：用户操作（如点击按钮）启动Ajax事件。 - **创建XMLHttpRequest对象**：实例化对象，设置请求参数，如URL和HTTP方法（GET或POST），并发送请求。 - **服务器处理**：服务器...
本篇文章将探讨如何使用HTML、JavaScript（jQuery库）和Ajax来实现前后端的数据交换，以达到无刷新页面的效果。 首先，我们需要理解HTML在其中的角色。HTML（HyperText Markup Language）主要负责网页的结构和内容...
6. **示例代码**：压缩包中的`foundations-of-ajax-examples`可能包含了基础的Ajax应用示例，例如创建一个简单的Ajax请求、处理服务器响应、更新DOM等。这些示例对于理解Ajax的工作原理和实际应用非常有帮助。 在...
#### 四、Ajax的工作原理 ##### 1. 事件触发 当用户在网页上执行某种操作时（如点击按钮），会触发一个事件。 ##### 2. 创建XMLHttpRequest对象 使用JavaScript创建一个XMLHttpRequest对象。 ##### 3. 发送请求...
在这个"ajax测试使用实例，简单代码"中，我们将探讨如何利用Ajax进行基本的交互。 一、Ajax基础概念 Ajax的核心是JavaScript对象XMLHttpRequest，它允许JavaScript在后台与服务器通信。通过创建XMLHttpRequest对象...
### Ajax底层原理及使用方式详解 #### 一、Ajax简介 Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种用于创建交互式网页应用的技术。它不是一种新的编程语言，而是一种使用现有标准的新方法...
ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础...
**Ajax 实现原理** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它的核心在于使用 JavaScript 和浏览器内置的 XMLHttpRequest（XHR）对象进行通信，从而...
通过上述介绍，我们可以看到Ajax技术通过使用`XMLHttpRequest`对象实现了网页的部分内容更新而不必刷新整个页面，大大提升了用户体验。随着现代Web开发技术的进步，如jQuery库等工具的出现，使用Ajax变得更加简单...
ajax技术原理及工作原理简介，对于对异步操作有兴趣的朋友有很大帮助。
Ajax搜索框实现代码，自带数据库的，最好在VS2008运行
### AJAX的基本原理及其实现 #### 一、引言 AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现...
让更多人了解ajax技术.function _open(requestUrl) { var xmlHttp = false; var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0', 'Msxml2....
在深入分析代码之前，我们先简要了解下 AJAX 的工作原理。AJAX 主要有以下几个步骤： 1. **创建 XMLHttpRequest 对象**：这是 AJAX 的核心，用于在客户端和服务器之间传输数据。 2. **定义请求类型和 URL**：设置...
### Ajax工作原理及优缺点实例解析 #### 一、什么是Ajax？ Ajax，全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种利用现有Web技术进行开发的技术组合，主要用于实现客户端与服务器之间...
二级联动菜单的核心工作原理是根据第一个下拉菜单（通常是省份或国家）的选择结果，动态加载第二个下拉菜单（通常是城市）的内容。这种效果通常会使用JavaScript和服务器端的数据交互技术（如Ajax）来实现。 在本文...