AJAX+ASP快速入门
这是Rafa.cn特别制作的AJAX+ASP教程，特地用浅显易懂的文字给初学者一个好印象 :)
相信在2.0时代 每个人都是大师
什么是AJAX?
他不是新的语言 也不是新的工具 只是一种新技术 或者说是技巧也行
拿留言本打比方,传统的ASP留言本的工作流程如下:
先填表 把填好的表送到某个ASP程序去处理 ASP会更新数据库 然后显示出数据库里面的留言...
在此期间人家必须等待asp处理完成再打开新的页面来显示
AJAX+ASP留言本的工作流程如下:
先填表 填了之后会由javascript悄悄地把表送到asp那里处理 然后再由javascript更新页面 由于是部分更新而不是重新从服务器那里读取 速度会比原来快N倍
学AJAX要写什么基础?
在语言方面首先需要了解javascript ,其次 如果需要做一些动态的事情 就得了解.net,asp,php,jsp,cgi等等动态语言中的一个
服务器方面真的是没什么需求 静态空间就能写出AJAX了 如果是要动态的AJAX那么服务器可能需要支持asp等
哪些网站用了AJAX？
举个例子吧 Google MAP(http://maps.google.com)就用了这样的技术
如果按照传统做法 用户要看另外一个地区的地图必须要提交表单 然后等待打开地图
AJAX让页面立即从服务器得到地图数据并显示出来
AJAX+ASP快速入门(rafa.cn)
大致内容
教程将通过制作一套简易的AJAX程序来 说明AJAX技术的关键 也就是XMLHttpRequest是如何向服务器提交数据，又是怎么接受数据的
这个AJAX+ASP程序包括3个文件:
ajax.html(包含了界面代码)
ajax.js(包含了实现Ajax的js代码)
check.asp(用来进行服务器部分的处理)
在这个程序中 用户通过文本框输入密码
单击按钮之后js将密码送至asp程序进行检验其是否为"123456" 随后返回结果给网页(顺便返回服务器时间)
这个程序的实例的演示地址为: http://rafa.cn/new/ajax/ajax.html
ajax.html
<html><head><title>AJAX Check</title><script type="text/javascript" src="ajax.js"></script>↑这句话调用了实现ajax功能的js文件<meta http-equiv="Content-Type" content="text/html; charset=gb2312">↑这句话保证了页面的中文显示不会出现乱码</head><body><input name="password" type="text" id="password">↑这是输入密码的文本框<input name="Submit" type="button" value="提交" onClick="check();">↑用户单击这个按钮之后便调用ajax.js中的check()函数<br><span id="response"></span>↑这个区域用来显示返回信息</body></html>注意:此代码中没有用到Form表单
ajax.js
function check()↑命令处理函数{var password=encodeURIComponent(document.getElementById("password").value); ↑从文本框中取得密码文本并进行编码以保证不会出现乱码var message="password="+password; ↑这是向ASP文件投递的数据必须是xxx=xxx格式var theHttpRequest=getHttpObject(); ↑创建一个XMLHttpRequesttheHttpRequest.onreadystatechange=function (){backAJAX();}; ↑设定当asp文件返回数据时的处理函数为backAJAX()theHttpRequest.open("POST","check.asp",true); ↑以POST方式打开XMLHttpRequest,投递地址为"check.asp",true表示以异步方式打开theHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); ↑我也不是很清楚，但有用theHttpRequest.send(message); ↑投递信息！function getHttpObject()↑这是创建的函数XMLHttpReques{var objType=false; try{objType=new ActiveXObject('Msxml2.XMLHTTP'); ↑在较新的ie浏览器中这样创建}catch(e){try{objType=new ActiveXObject('Microsoft.XMLHTTP'); ↑在旧ie中这样创建}catch(e){objType=new XMLHttpRequest(); ↑如果浏览器是mozilla就这样创建}}return objType; ↑返回XMLHttpReques对象}function backAJAX()↑处理asp返回数据的函数{if(theHttpRequest.readyState==4)↑4代表已经准备好{if(theHttpRequest.status==200)↑200代表一切正常{document.getElementById("response").innerHTML=theHttpRequest.responseText; ↑将返回的的信息写入文档}else {document.getElementById("response").innerHTML="<p>错误信息: "+theHttpRequest.statusText+"</p>"; ↑如果出现错误就输出错误信息}}}}
check.asp
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%><%Session.CodePage=936Response.charset = "gb2312"↑确保输出中文时不会出现乱码
if request("password")="123456" then↑检查密码是否为123456response.Write("密码正确<br>当前时间" & now)↑输出密码正确时的信息elseresponse.Write("密码错误!")↑输出密码错误时的信息end if%>
结束语
本教程到这里就结束了 本教程的演示地址为http://rafa.cn/new/ajax/ajax.html
在结束前在说几句话
AJAX+ASP对于任何程序员来说都有极大的意义 因为其包涵了C和VB 这世界上两大程序语言体系
本教程仅为ajax入门的一个材料 其中有许多地方相信不能使人马上理解
也有许多地方需要注意 大家需要学习更多内容 掌握更多技巧
但本文却告诉了大家 新技术不神秘 也不难只要认真领悟 总是可以掌握的
但不要忘了
Nothing is as easy as it looks !(看起来容易做起来难)
要深入精通还有很长的路
