Ajax实际上是各种技术的一种综合应用，这其中包括JavaScript脚本、XHTML和CSS、DOM、XML和XSTL以及最重要的XMLHttpRequest。
JavaScript脚本:
JavaScript是一种可以与HTML标记语言混合作用的脚本语言，可以直接在浏览器中解释执行。
XHTML和CSS:
XHTML即可扩展的超文本标记语言。这是一种过度技术，结合了XML中的部分强大功能及HTML大部分简单特性。
CSS层叠样式表，是修饰HTML页面效果。
DOM
DOM全称文档对象模型（Document Object Model）,习惯称为DOM树。
DOM是W3C DOM工作组提倡的一种接口规范，是方便开发人员对XML文档进行操作的分层模型。
XML和XSTL
XML 可扩展标记语言（Extensible Markup language）。
XML最大的特点在于它的数据存储格式不受显示格式的制约，开发人员可以自定义标记符号。
XML作用范围软件系统的配置文件、数据传递。
XSTL全称可扩展的样式表转换语言（Extensible Stylesheet Transformation Language）,是用来转换XML文档结构的语言
★★XMLHttpRequest
XMLHttpRequest是Ajax技术中最重要的一个对象。一个页面可以在不刷新的情况下通过XMLHttpRequest发送请示来获取服务器响应。
XMLHttpRequest是浏览器中已定义好的对象，是Ajax技术的核心组成部分。
★★Ajax实际上是这些技术的综合运用，即基于XHTML和CSS，由DOM实现动态显示与交互，借助XML和XSTL进行数据交换及处理，
而在这个过程中则是使用JavaScript来进行整合。
XMLHttpRequest是Ajax技术中最重要的一个对象。
方法有：
open(“method”,”url”,boolean) 建立对服务器的访问
send(content) 向服务器发送请求
属性有：
onreadystatechange 状态改变的事件触发器
readyState 对象状态，共5种（0：未初始化、1：读取中、2：已读取、3：交互中、4：已完成）
responseText 服务器返回文本数据
responseXML 服务器返回XML文档数据
Status 服务器返回的状态码（如404、200 、 500等）
statusText 服务器返回的状态文本信息（如ok等）
现在看一段Ajax的代码：
【第1种】从服务端接收文本数据 (此例子是自动判断用户名是否已经存在)
========客户端========
<script type="" language="javascript">
var xmlHttp=false;
//*****异步提交的方法*****
function createXMLHttpRequest(val){
//**创建XMLHttpRequestc对象
if(window.ActiveXObject){//IE浏览器
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}else{//其他浏览器：如mozilla 的 fireFox(火狐) 或者 netscape 7
xmlHttp=new XMLHttpRequest();
}
var url="loginservlet?username="+val;//定义要提交的服务URL，将用户名作为参数传递给服务端
url=url+"¶="+new Date().getTime();//给URL加上时间戳
xmlHttp.open("GET",url,true);//定义异步提交的方式，这里是用GET提交，并将url作为参数，true表示异步提交，false表示不是异步提交，一般来讲都是true
xmlHttp.onreadystatechange=processResponse;//定义回调函数，回调函数是接收服务端发送过来的响应
xmlHttp.send();//开始发送请求
}
//*****回调函数*****
function processResponse(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
var info=xmlHttp.responseText;//接收从服务端接收文本数据
//**做逻辑处理
if(info=="对不起，该用户名已存在。"){
document.getElementById("username").value="";
document.getElementById("username").focus();
}
}else{
alert("你所请求的页面有异常。");
}
}
}
//*****触动异步刷新的方法*****
function selectUserName(){
var val=document.f1.username.value;//获取用户名
if(val==""){
alert("请输入用户名！");
document.f1.username.focus();
}else{
sendRequest(val); //调用异步刷新的方法，将用户名作为参数传递给服务端
}
}
</script>
========服务端 (LoginServlet.java)========
public void doGet(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
response.setContentType(CONTENT_TYPE);
PrintWriter out = response.getWriter();
String userName = request.getParameter("username");//获取传过来的参数
String sql="select * from users where username='"+userName+"'";
List list=LoginBiz.selectUserBySql(sql);//调用逻辑层的方法进行查询
if (list!=null&&list.size()!=0) {
out.print("对不起，该用户名已存在。");//将数据返回给客户端
} else {
out.print("此用户名可以使用。");//将数据返回给客户端
}
out.close();
}
=============================================
【第2种】从服务端接收XML文档数据 (自动实现省市联动，市保存在数据库中)
========客户端========
<script type="" language="javascript">
var xmlHttp=false;
//创建Ajax的对象
function createXMLHttpRequest(){
if(window.ActiveXObject){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}else{
xmlHttp=new XMLHttpRequest();
}
var url="selectlistservlet?province=湖南省"; //定义异步提交的URl，将 "湖南省" 作为查询条件
url=url+"¶="+new Date().getTime();//给URL加上时间戳
xmlHttp.open("get",url,true); //定义异步提交的方式
xmlHttp.onreadystatechange=processResponse; //定义回调函数
xmlHttp.send(); //开始异步提交
}
//处理异步提交回来的数据的函数
function processResponse(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
updateList();
}
}
}
//解析XML的函数
function updateList(){
var city=document.getElementById("city"); //获取下拉框的对象
var res=xmlHttp.responseXML.getElementsByTagName("cityname"); //★★responseXML属性将加载服务端发送过来的XML文件，
//getElementsByTagName方法加载XML中的元素，返回的是个集合
var option=null;
for(i=0;i<res.length;i++){
option=document.createElement("option");
option.appendChild(document.createTextNode(res[i].firstChild.nodeValue));//★★res[i].firstChild.nodeValue是获取第i+1个元素中的数据
city.appendChild(option);
}
}
</script>
========服务端 (SelectListServlet.java)========
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType(CONTENT_TYPE);
PrintWriter out = response.getWriter();
String provinceid=request.getParameter("province"); //获取异步提交过来的数据
String sql="select * from city where provinceid="+provinceid;
CityBo bo=new CityBo();
List list=bo.selectCityList(sql); //通过SQL语句查询数据库
//** 通过查询的结果链接成XML字符串 **
StringBuffer buffer=new StringBuffer("<?xml version=/"1.0/" encoding=/"GB2312/" ?><result>");
for(int i=0;i<list.size();i++){
buffer.append("<cityname>");
buffer.append((String)list.get(i));
buffer.append("</cityname>");
}
buffer.append("</result>");
out.print(buffer.toString());//通过out.print将XML文档发送到Ajax客户端
out.close();
}
注意事项：
由于IE浏览器有缓存,不能同时发一个相同的url,所以可以在“&”后面加时间戳 ,比如
url=url+"¶="+new Date().getTime();
1148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
