新AJAX.docx

-- 将JS代码放在所有对象之后，以免在页面未加载完成时出现对象不存在的错误 -->

-- AJAX类 -->

-- 自动保存代码 -->

接下来是autosave.js

程序代码：

// 首先设置全局变量

// 要保存的内容对象FormContent

var FormContent=document.getElementById（"message"）;

// 显示返回信息的对象

var AutoSaveMsg=document.getElementById（"AutoSaveMsg"）;

// 用户名

var memName=document.getElementById（"memName"）.value;

// 自动保存时间间隔

var AutoSaveTime=60000;

// 计时器对象

var AutoSaveTimer;

// 首先设置一次自动保存状态

SetAutoSave（）;

// 自动保存函数

function AutoSave（） {

// 如果内容或用户名为空，则不进行处理，直接返回

if（!

FormContent.value||!

memName） return;

// 创建AJAXRequest对象，详细使用见文章开始的链接

var ajaxobj=new AJAXRequest;

ajaxobj.url="autosave.asp";

ajaxobj.content="memname="+escape（memName）+"&postcontent="+escape（FormContent.value）;

ajaxobj.callback=function（xmlObj） {

// 显示反馈信息

AutoSaveMsg.innerHTML=xmlObj.responseText;

}

ajaxobj.send（）;

}

// 设置自动保存状态函数

function SetAutoSave（） {

// 是否自动保存？

if（document.getElementById（"Draft_AutoSave"）.checked==true）

// 是，设置计时器

AutoSaveTimer=setInterval（"AutoSave（）",AutoSaveTime）;

else

// 否，清除计时器

clearInterval（AutoSaveTimer）;

}

// 恢复最后保存的草稿

function AutoSaveRestore（） {

// 创建AJAXRequest对象

var ajaxobj=new AJAXRequest;

// 提示用户正在恢复

AutoSaveMsg.innerHTML="正在恢复，请稍候……"

ajaxobj.url="autosave.asp";

ajaxobj.content="action=restore&memname="+escape（memName）;

ajaxobj.callback=function（xmlObj） {

// 提示用户恢复成功

AutoSaveMsg.innerHTML="恢复最后保存成功";

// 如果内容为空则不改写textarea的内容

if（xmlObj.responseText!

=""） {

// 恢复草稿

FormContent.value=xmlObj.responseText;

}

}

ajaxobj.send（）

}

最后是autosave.asp，用于在后台保存草稿：

程序代码：

<%@LANGUAGE="VBscript"CODEPAGE="65001"%>

<%OptionExplicit%>

<%

'语言为VBScript，编码为UTF-8，要求变量声明

'出现错误则忽略，继续执行

OnErrorResumeNext

'定义一些变量

DimPostContent,memName,action,objStream

'获取操作，是保存草稿还是恢复草稿

action=Request.Form（"action"）

'获取用户名

memName=Request.Form（"memname"）

'获取草稿内容

PostContent=Request.Form（"postcontent"）

IFaction="restore"Then

'恢复草稿，如果用户名不为空则进行恢复操作

IFmemName<>EmptyThen

'使用ADODB.Stream来进行文件操作

SetobjStream=Server.CreateObject（"ADODB.Stream"）

WithobjStream

.Type=2

.Mode=3

.Open

'文件名为autosave_+用户名+.txt

.LoadFromFile（Server.MapPath（"autosave_"&memName&".txt"））

.Charset="utf-8"

'.Position=0

PostContent=.ReadText（）

.Close

EndWith

SetobjStream=NoThing

'输出草稿

IFPostContent<>""ThenResponse.Write（PostContent）

EndIF

Else

'保存草稿，如果草稿内容和用户名均不为空则进行保存操作

IFPostContent<>EmptyANDmemName<>EmptyThen

'使用ADODB.Stream来进行文件操作

SetobjStream=Server.CreateObject（"ADODB.Stream"）

WithobjStream

.Type=2

.Mode=3

.Open

.Charset="utf-8"

.Position=objStream.Size

.WriteText=PostContent

.SaveToFileServer.MapPath（"autosave_"&memName&".txt"）,2

.Close

EndWith

SetobjStream=NoThing

'输出保存是否成功信息

IfErr.Number=0then

Response.Write（"最后于"&Now（）&"自动保存成功"）

Else

Response.Write（"最后于"&Now（）&"自动保存失败，错误号：

"&Err.Number&"，错误描述：

"&Err.Dscription）

EndIf

EndIF

EndIF

%>

/////////////////////////////////////////////////////////////////////////////////////////////////////////////

在注册或购物车结帐的时候，需要用户填入个人资料，这个环节可以简练一下，我们只需客人填入邮政编码，然后就根据这个邮政编码，自动从数据库中取出相应的省，市等地址信息。

这样既可以减少客户的输入，增加客户体验，又可以减少由于资料输入而产生的错误。

实现：

HTML

EnterAUnitedStatesZipcode,ThenTab

   EnterZipcode:

   City:

   State:

php

$dbuser='root';

$dbpass='111111';

$cn=mysql_connect（"localhost",$dbuser,$dbpass）;

$db=mysql_select_db（"ajax"）;

$sql="selectcity,statefromzipcodeswherezipcode=".$_REQUEST['zip'];

$rs=mysql_query（$sql）;

$row=mysql_fetch_array（$rs）;

echo$row['city']."|".$row['state'];

mysql_close（$cn）;

?

>

当客户输入一个POSTCODE后，zipcode.php就接收到它，然后进行从数据表中取出对应的资料，再按一定的格式返回给客户端（此处是以|分隔）。

最后客户端接收返回的资料，显示在页面上。

if（response.indexOf（'|'!

=-1））{

           update=response.split（'|'）;

           document.getElementById（"city"）.value=update[0];

           document.getElementById（"state"）.value=update[1];

}

/////////////////////////////////////////

AJAX的问题

　　半数以上的AJAX安全风险来自隐含在服务器中的漏洞。

显然，使用安全编码技术的好的设计，对于更安全的AJAX大有帮助，我们需要感谢Max熟悉开放万维网应用安全计划（theOpenWebApplicationSecurityProject-OWASP）排名前十的最严重web应用程序安全漏洞列表（www.owasp.org）。

不幸的是，当Max实现AJAX的时候，他仍然需要面对许多额外的因素：

　　1.新的技术：

如果Max想把他的站点连接到一个SQL数据库，他在Google查到了数百万的例子。

AJAX技术，不管这种技术有多年轻，它仍然是出现在采购循环中相对较早的，尽管它只有很少一部分好的例子出现在网络上。

为了解决一些难处理的和不必要的复杂问题，这就要求像Max那样的开发者去自主开发。

Max也就不得不编写服务器端和客户端的代码，创建他自己不太确定的协议（特别是对服务器响应来讲）。

不管这些协议有多好，都将会及时表现在页面上。

　　2.非传统方式的设计：

AJAX有一点点不同于传统设计方式，因为这样的应用程序是半客户端半服务端的。

在Max的例子里，他是唯一的开发者，所以他为服务端和客户端都能够进行编码。

在同一时间使用两种不同的语言（特别是在早期阶段）进行开发将会产生一些初级的编码错误，因为他要在两端来回跳跃，对一端来讲非常好，但可能在