Ajax基础教程
Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。对于Ajax,最核心的一个对象是XMLHttpRequest,所有的Ajax操作都离不开对这个对象的操作。
首先我们来了解怎么在javascript中创建这个对象:
var xmlHttp = new XMLHttpRequest();
这行简单的代码在 Mozilla、Firefox、Safari、Opera 以及基本上所有以任何形式或方式支持 Ajax 的非 Microsoft 浏览器中,创建了 XMLHttpRequest 对象。但是对于市场占有率达到70%的IE来说,这种方法是不行的,而不同的IE版本还有不同的创建方法,所以我们需要在IE下面使用下面两种创建对象的办法:
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//针对较新的浏览器
} catch (err) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//针对较老的浏览器
} catch (err2) {
xmlHttp = false;
}
}
即使这样,我们也无法预料有些浏览器可能无法创建这个对象,所以在创建不成功的情况下,我们还要加上一句:
if (!xmlHttp){
alert("无法创建 XMLHttpRequest 对象!");
}
结合起来就是:
var xmlHttp = false;
try {
xmlHttp = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
xmlHttp = false;
}
}
}
if (!xmlHttp){
alert("无法创建 XMLHttpRequest 对象!");
}
然后,让我们建立一个函数getInfo(),打开异步请求:
function getInfo() {
var num = document.getElementById("num").value;//获得表单的数据
var url = "/ajax/1.php?n=" + escape(num);
xmlHttp.open("GET", url, true);//这里的true代表是异步请求
}
一旦用 open() 配置好之后,就可以发送请求了。虽然可以使用 send() 发送数据,但也能通过 URL 本身发送数据。事实上,在大部分GET&nb
相关文档:
服务器端响应文件postalcode.jsp
服务器响应文件根据用户输入的邮政编码,从数据库中查询对应的地区信息。如果没有取到,则返回空字符串。
<%@ page contentType="text/plain; charset=UTF-8"%>
<%@ page language="java"%>
<%@ page import="java.sql.*,ajax.db.DBUtils"%>
<%!
......
这里我们再理解了AJAX后,开始来用实例感受AJAX的力量。
今天我最后要实现的效果,当鼠标放到图片上时会根据,会把数据库库里的数据读出,通过显示框显示出来。这个在很多网上商店都有用到这里效果,我们这里用AJAX来实现这个效果。这个实例里结合了MySql、Servlet还有Js,理论性很少,但通过实践来感受理论知识。
......
主要是文件的一个管理系统,页面脚本是由JQuery (V1.3.1)插件的方式编写,所有功能都是通过Ajax和后台数据互交,并结合自己开发的插件与结合第三方插件的整合,服务器端由ASP.NET编程(有兴趣的朋友可以改写成其它代码,如jsp/php,根目录有后台程序配置). 希望大家喜欢(做完就急急忙忙发布了,没有写太多注释,希望大家多多包 ......
从2005 年Web2.0 的兴起开始算起,Ajax 伴随着国内的Web 开发社区走过了近四年的成长时间。四年的时间,对于一项Web 技术不算短了,这不仅是对当初对Ajax“旧瓶装新酒”持不屑态度的人的反驳,更把更多观望中的开发者拉入了Web 开发的行列。
Ajax的框架也开始一一出现:
Buffalo 是现任Thought ......