Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。
Ajax 的定义
顺便说一下,Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写。
下面是 Ajax 应用程序所用到的基本技术:
* HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。
* JavaScript 代码是运行 Ajax 应用程序的核心代码,帮助改进与服务器应用程序的通信。
* DHTML 或 Dynamic HTML,用于动态更新表单。我们将使用 div、span 和其他动态 HTML 元素来标记 HTML。
* 文档对象模型 DOM 用于(通过 JavaScript 代码)处理 HTML 结构和(某些情况下)服务器返回的 XML。
下列为一个简单例子:
1.根据浏览器的不同 建立XMLHttpRequest对象,以支持多种浏览器的方式创建 XMLHttpRequest 对象
<script language="JavaScript" type="text/javascript">
var request = false;
try{
request = new XMLHttpRequest();//除MS的浏览器产生的对象。
}catch(microsoftIE){
try{
request = new ActiveXObject("Msxml2.XMLHTTP");
}catch(microsoftOldIE){
try{
request = new ActiveXObject("Microsoft.XMLHTTP");
}catch(failed){
request = false;
}
}
}
2.编写HTML,最大的特点是不用提交,当INPUT中输入数据时JAVASCRIPT可以动态捕获反应.
连接 Web 表单,启动一个 Ajax 过程。
<form>
<p>City: <input type="text" name="city" id="city" size="25"
onChange="callServer();" /></p>
<p>State: <input type="text" name="state" id="state" size="25"
onChange="callServer();" /></p>
<p>Zip Code: <input type="text" name="zipCode" id="city" size="5" /></p>
</form>
3.如下为发出 Ajax 请求
function callServer() {
// Get the city and state from the web form
var city = document.getElementById("city").value;//表单中的值
var state = document.getElementById("state").value;//表单中的值
// Only go on if there are values for both fields
if ((city == null) || (city == "")) return;
if ((state == null) || (state == "")) return;
// Build the URL to connect to
var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);//向服务器发送请求
// Open a connection to the server
xmlHttp.open("GET", url, true);//true表示是采用了异步的方法。
// Setup a function for the server to run when it's done
xmlHttp.onreadystatechange = updatePage;//xmlHttp的 onreadystatechange 属性可以告诉客户端在 ”服务器处理完请求后“要做什么。
// Send the request
xmlHttp.send(null);//请求已经发送,不再发了。
}
4.服务器处理完毕。
5.处理服务器响应
function updatePage() {
if (xmlHttp.readyState == 4) {
var response = xmlHttp.responseText;
document.getElementById("zipCode").value = response;//把服务器返回的值放入zipCode
}
}
6.服务器返回结果。
当用户在 city 或 state 字段中输入新的值时,callServer() 方法就被触发,于是 Ajax 开始运行了。有点儿明白怎么回事了吧?好,就是如此!
摘自:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html#code1
分享到:
相关推荐
ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习...
ajax学习笔记。。。。。。。。。。。。。。。。。。。。。。
AJAX学习笔记。内含Java调用的两个实例,及JavaScript的ajax工具函数,可快速入门,也可当手册使用。个人精心整理,值得收藏。 更多:http://download.csdn.net/user/daillo/all
Ajax 学习笔记,超详细的噢!不看后悔,自己上培训班时记的笔记
Ajax学习笔记
夏玉保整理Ajax学习笔记.doc 夏玉保整理Ajax学习笔记.doc夏玉保整理Ajax学习笔记.doc 夏玉保整理Ajax学习笔记.doc
Ajax学习笔记.zip
Myeclipse的源代码示例(ajax学习笔记代码),四天学会ajax doc文档。
jQuery+AJAX学习笔记
web前端开发AJAX学习笔记
16ajax学习笔记1
ZK-AJAX学习笔记
Web2.0之Ajax 学习笔记与应用实例,Web2.0之Ajax 学习笔记与应用实例
Ajax 学习笔记(1).rtf
非常经典的ajax学习笔记,想学好ajax的程序员都应该学习一下
AJAX学习笔记忘记了看一眼
Ajax 学习笔记 留在备用 培训资料 培训总结
根据个人学习Ajax的过程总结,整理了Ajax相关基础知识点,对Ajax的使用有较详细的介绍,通过个别举例,可以快速了解Ajax的功能,比较适合初学者入门。