AJAX+ASP快速入门
作者: 不详
编辑: 海韵 发布日期: 2007-01-25 00:00:00 点击量: 14383
来源: haiyun.net
什么是AJAX?
|
他不是新的语言 也不是新的工具 只是一种新技术 或者说是技巧也行
拿留言本打比方,传统的ASP留言本的工作流程如下:
先填表 把填好的表送到某个ASP程序去处理 ASP会更新数据库 然后显示出数据库里面的留言...
在此期间人家必须等待asp处理完成再打开新的页面来显示
AJAX+ASP留言本的工作流程如下:
先填表 填了之后会由javascript悄悄地把表送到asp那里处理 然后再由javascript更新页面 由于是部分更新而不是重新从服务器那里读取 速度会比原来快N倍 |
学AJAX要写什么基础?
|
在语言方面首先需要了解javascript ,其次 如果需要做一些动态的事情 就得了解.net,asp,php,jsp,cgi等等动态语言中的一个
服务器方面真的是没什么需求 静态空间就能写出AJAX了 如果是要动态的AJAX那么服务器可能需要支持asp等 |
哪些网站用了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();
↑创建一个XMLHttpRequest
theHttpRequest.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=936
Response.charset = "gb2312"
↑确保输出中文时不会出现乱码
if request("password")="123456" then
↑检查密码是否为123456
response.Write("密码正确<br>当前时间" & now)
↑输出密码正确时的信息
else
response.Write("密码错误!")
↑输出密码错误时的信息
end if
%> |
我的故事
栏目导航
全部文章
随笔杂谈
最新评论
统计信息
日记搜索
其他信息
