BlogJava-Exciting IN JAVA WAY-文章分类-AJAX Dev

动态图js脚本

chenguo — Thu, 05 Jul 2007 03:53:00 GMT

动态图js脚本

chenguo 2007-07-05 11:53 发表评论

js焦点图片轮换--几个实例

chenguo — Thu, 05 Jul 2007 03:37:00 GMT

下面是falsh文件：
一些好的下载链接：http://blog.csdn.net/suilam/archive/2005/12/15/553280.aspx
lash轮播广告
http://bbs.blueidea.com/viewthread.php?tid=2374504&page=
[下载]经典代码一次全下载！(flash幻灯片，图片幻灯片都有）
http://bbs.powereasy.net/dispbbs.asp?boardID=28&ID=290178&page=10
韩国flash焦点大图广告代码 / / 2007-06-24
http://www.zcool.com.cn/jscode/ggcode/page_2.html

chenguo 2007-07-05 11:37 发表评论

ajax框架

chenguo — Wed, 04 Jul 2007 09:58:00 GMT

chenguo 2007-07-04 17:58 发表评论

DHTML应用开发

chenguo — Tue, 03 Jul 2007 04:38:00 GMT

本文介绍了IE和Navigator两种浏览器对DHTML标准实现的差异，特别是如何编写Navigator中运行的DHTML程序。

　　DHTML(Dynamic HTML)是W3C组织提出的一种新的规范，它对原有的HTML做了许多扩充，并结合Javascript，使得静态的HTML页面产生了许多动态效果，例如菜单的展开和收起，页面元素的外观动态改变等。IE 4.0以上，Navigator 4.0以上的版本都支持这个标准。但是，不同的浏览器厂家对它都做了不同程度的扩充。以最流行IE的和NS为例，IE的实现更接近于W3C的方案，而 NS，说实话，与W3C的方案差异很大，而且并没有完全实现，甚至可以说是另一套方案。笔者在初识DHTML时，按照书上讲的编写了几个小程序，在IE上一试就通，而在NS上可以说费尽了周折才逐渐找到解决方案。由于市面上很少有讲述NS的DHTML实现方案的书(大概NS由于的实现不符合标准)，而真正的商业网站至少应同时支持IE和NS这两种主要的浏览器，我愿意把我的一些心得写出来与大家共享，使大家不必再走我走过的弯路。对于二者的实现相同的部分，本文作一简略介绍，您若有兴趣可参考有关书籍或网上资源。

　　DHTML实际上由三两部分组成：CSS(Cascade Style Sheet，级联样式表)，层(Layer)和Javascript。

　　所谓CSS，概念上类似于C++中的类，在类定义中指明元素的外观样式，如字体，颜色，大小等等，页面中的任何一个HTML元素如被指定属于这个类，就自动拥有该类的特性；还可以为某种HTML元素定义样式，这样页面中的所有这种元素都有了同样的外观。如果将这样的样式定义存在一个单独的. css文件中(就象C++那样将类定义存在 .h文件中)，再在页面中将其包含进来，则一个网站的所有页面就有了同样的外观。IE和NS对CSS的实现基本相同，在此就不再详细介绍了。

　　两者的差异主要体现在层的实现上。所谓层，就是页面上的一块区域，其中可以包含任何的HTML元素，通过改变层的属性，其间的元素可以跟着出现，消失，更改，移动等。在IE中，层依靠

和来实现，两者基本相同，通常

用于较大的层，用于较小的层，并且

在实现的层后面加上一个回车换行，而< SPAN>不加。它的语法如下(二者相同)：

　　

Layer content

或

　　

Layer content

　　其中style definition是一组有分号隔开的样式定义，常用的有以下几种：

　　position：其值可以为absolute和relative，所谓absolute(绝对定位)，就是层的内容不必按照出现的先后次序在浏览器上依次排列，而是可以像素为单位定位到浏览器用户区域的任意位置；而relative(相对定位)则是层按照相邻的内容依次排列。

　　left，top，width，height：指层的左上角坐标以及它的宽度和高度。

　　z-index：由于层可以被放置在页面的任何位置，当它与其它内容重合时，z-index值大的显示在上面，所有层的z-index值为 1。但是在NS中，所有的表单元素(文本框，列表框，按钮等)，只要是可见的就无法被遮住，而无论z-index值是多少。因此在设计页面时，要注意不要使动态出现或隐藏的元素(例如弹出式菜单)的位置上放置表单元素。

　　Visibility：指明层是否可见，通过在程序中动态改变这个值，可以实现层的出现和消失，比如下拉菜单就要依靠它来实现。它的三个候选值为：inherit，可见性与父元素的可见性相同；visible，可见(在NS中是show)；hidden，不可见(在NS中是hide)。

　　NS同样支持这两个标记，但是支持得很不好，经常出现一些莫名其妙的错误，我想这可能是出于策略上的考虑，而不见得是NS的产品质量不好。 NS引入了另两个标记，和，用于绝对定位，< ilayer>用于相对定位，因此在这两个标记的样式定义中没有position属性。

　　两个浏览器对层的不同实现体现在以下几点：

　　1. 层的引用。在IE中，页面上的每个可编程元素(不仅是层，还包括其它任何指明了ID值的元素，详见下文)都是document.all集合的一项；而在 NS中，页面中每个层，无论是用上面四个标记中的哪个定义的，也无论是绝对或是相对定位，都是document.layers集合的一项。因此，若想引用名为layer1的层，应以如下语法：

　　IE：document.all["layer1"]或document.all.layer1

　　NS：document.layers["layer1"]或document.layers.layer1

　　2. 层的坐标和大小。在IE中，每个涉及层的外观的属性，如位置，大小，颜色等，都是层的style属性集合的以一项，如层的左上角x坐标为 document.all.layer1.style.pixelLeft，y坐标为 document.all.layer1.style.pixelTop，宽度为 document.all.layer1.style.pixelWidth，高度为 document.all.layer1.style.pixelHeight。还有几组属性如scrollxxx，offsetxxx， clientxxx，其中xxx为Left，Top，Width，Height ，分别描述层的滚动，位移，客户区等属性，详见MSDN中关于坐标的描述。而在NS中，每个层都有一个clip属性集，x，y，width，height 是这个集的集合元素。

　　另外，IE中所有元素拥有同一个坐标系，无论它位于层外或层内；在NS中，每个层都有一个独立的坐标系。

　　3. 层的内容。IE中的层包含innerHTML和outerHTML属性(由于并非描述层的外观，所以它们不是style属性集的元素，而是层的属性)，其含义如下：

　　innerHTML：层中的HTML代码，但是不包括层的定义。

　　outerHTML：层中的HTML代码，且包括层的定义。

　　改变这些属性值就可以改变层的内容，如下语句改变层layer1的内容为加粗的字符串"layer1"： document.all.layer1.innerHTML=”layer1” ，而在NS中，每一个document.layers集合中的元素，即一个层，都NS被视为一个独立的窗口，有独立document属性，就象 Javascript中的document属性一样，通过调用document.write函数，可以动态改变层的内容。上例在NS中应修改为：

　　document.layers.layer1.document.open();

　　doucment.layers.layer1.write("

layer1

");

　　document.layers.layer1.document.close;

　　同样，对于层中的其它可编程元素，例如图象，其引用语法如下： document.layers.layer1.document.images[imgname]，而如果该图象位于层的外面，其语法应为 document.images[imgname]，而在IE中，无论图象位于层内或层外，其语法都是后者。

　　Javascript是Netscape公司首先提出的一种客户端编程的脚本语言，随后有扩展到服务器端。它的语法和概念都类似于C++，但是没有C++那样严格。IE同样支持客户端Javascript(微软还推出了类似的，功能更强大的Vbscript，但是NS却不支持)。两种浏览器对 Javascript的基本实现是一样的，但是又都对它做了许多不同的扩展，而在DHTML编程中，很多情况下都需要用到这些扩展。由于此时已经没有标准可遵循，二者已经看不出有相同之处。例如，浏览器的客户区的宽度，在IE中是document.body.clientWidth，在NS中是 window.innerWidth；再比如你想知道用户按浏览器的滚动条滚动了多少像素，在IE中是document.body.scrollTop，在NS中是window.pageYOffset。在这种情况下，你只能查阅二者的文档。IE的Javascript文档包含在MSDN中，也可以到微软的站点上单独下载。NS的Javascript文档可以到 http://developer.netscape.com上下载，那里也能得到NS的DHTML文档。

　　NS没有实现的功能。

　　1.IE中，页面中的任何元素都是可编程的，只要赋予它ID属性，其语法如下：

　　

content

或content

　　而在NS中，除非元素位于层中，否则无法对它编程。

　　2.IE中增添了元素的渐变(Transition)和滤镜(Filter)效果，NS中没有。

　　3.IE中支持客户端的数据绑定(Data bind)，即页面中的某个元素(例如表格中的一个格)可以与服务器端的数据库的某个字段绑定，在数据内容不变的情况下，可以不必再次访问数据库而改变页面的形式(例如按某个字段重新排序)。NS同样没有实现这种特性。

　　以上列举了二者的如此之多的差别，那我们如何编写跨浏览器的DHTML页面呢？一种方法是编写两个独立的页面，而在入口文件中根据浏览器的不同而重定向到不同的页面，如：

　　

　　

　　

　　这种方法简单，页面整洁，缺点是有很大冗余，毕竟一个页面中程序是少量的，大部分静态内容在两个浏览器中并没有区别，一旦静态的内容发生改变必须在两个页面中一起更改，而且当包含DHTML的页面增多时，每一个页面都需要三个页面来实现，增大了维护的负担。

　　另一种方法是在同一个页面中集成两个浏览器的代码。在每一个实现特定功能的函数中都根据浏览器的不同分别写代码，如：

　　

　　

　　

　　对于HTML代码也不同的部分，可以利用Javascript函数 document.writeln()来实现，例如对于层的定义，可以如下实现：

　　

　　Layer content here

　　

　　这种实现方法维护简单，缺点是失去了页面编辑器所见即所得的特性(因为只有到运行时才能将层的定义写入浏览器，在编辑阶段它们只是些 Javascript程序)，调整层的坐标和大小都比较困难。在实际编程中可以先按一种浏览器的定义写，待调整完毕后再将它转成另一种定义。但总的来说，这种办法适合对HTML标准比较熟悉的开发人员。

chenguo 2007-07-03 12:38 发表评论

下拉菜单全攻略-JavaScript篇

chenguo — Tue, 03 Jul 2007 04:29:00 GMT

自适应分辨率可扩展二层JS下拉菜单

序言：

随着互联网的普及和网页制作技术的发展，越来越多的网友开始制作自己的网站。做为网站最重要的部分—导航菜单也出现了各式各样的设计和制作方法。其中下拉式导航菜单已经成为多栏目大信息量网站的首选导航方式。那么，在下面我将简单介绍一下众多下拉菜单制作方法中完全使用JS自动生成的“自适应分辨率可扩展二层JS下拉菜单”的工作原理和使用方法。

1、 S下拉菜单原理

下拉菜单实际上就是在开始的时候显示一级或者说是主菜单（图一）。当触发条件（例如：鼠标移动到上面时）显示次级菜单（图二）。

图一

图二

那么如何实现这样的效果呢。其实很简单。所有的下拉菜单都是通过图层的显隐来实现的。在文件下载的时候，其实主菜单和次级菜单都以经形成或者说下载到了客户端也就是你的机器里。只是次级菜单被隐藏起来。隐藏的方法一般是使用javascript 配合css控制次级菜单的图层的属性visibility为隐藏
。所以在开始的使用你是看不见次级菜单的。当满足触发条件（例如：鼠标移动到上面）时，在使用javascript来控制次级菜单显示。当在次满足触发条件时（例如：鼠标移开），控制次级菜单隐藏。

我们现在讲的这个” 自适应分辨率可扩展二层JS下拉菜单”可以自动适应浏览器分辨率的改变始终保持相对位置。可以方便的自己定制菜单显示内容及连接页面。可以随意扩充主导航和次导航的栏目个数。可以自由改变连接和导航表格的样式和外观等等。

2、"自适应分辨率可扩展二层JS下拉菜单"js代码详解

//--------------- 主导航条内容 ------------//
var mainLayer=new Array("蓝色理想","动意营造");//主导航栏目

//--------------- 次导航条内容 ------------//
var subLayer0=new Array("论坛","文献"); //导航栏目一下的次级栏目
var subLayerHttp0=new Array("#","#");’’;//主导航栏目一下的次级栏目连接地址
var subLayer1=new Array("论坛","文献");//导航栏目二的次级栏目
var subLayerHttp1=new Array("#","#");//主导航栏目二的次级栏目连接地址

//--------------- 主导航条Table参数调整 ------------//
var mainTableTdWidth=100; //每个TD的宽度，调整主导航内容间距
var mainTableBorder=0; //调整主导航表格边框宽度
var mainTableCellspacing=0; //调整主导航表格Cellspacing
var mainTableCellpadding=1; //调整主导航表格Cellpadding
var mainTableBgcolor="#000000"; //调整主导航表格背景色
var mainTableBordercolor=""; //调整主导航表格编框颜色
var mainTableBackgroundImg=""; //调整主导航表格背景图片url地址
var hrefClassName="link" //调整url风格样式
var mainTableTdBgcolor="B2CBCF"; //调整主导航表格Td色

//--------------- 次导航条Table参数调整 ------------//
var subTableBorder=0; //调整次导航条表格边框宽度
var subTableCellspacing=0; //调整次导航条表格Cellspacing
var subTableCellpadding=1; //调整次导航条表格Cellpadding
var subTableBgcolor="#000000"; //调整次导航条表格背景色
var subTableBordercolor=""; //次导航条表格编框颜色
var subTableBackgroundImg=""; //次导航条表格背景图片url地址
var subTableTdBgcolor="B2CBCF"; //调整次导航表格Td色
var sbuTabbleTop=21; //次导航表格上下微调
var sbuTabbleLeft=-1; //次导航表格左右微调

//--------------- 系统参数*请勿调整 ------------//
var layerMax=mainLayer.length+10;
var layerName=”index”

//--------------- 生成下拉菜单 ------------//
function createMainLayer(){
document.write("

");
}

//--------------- 生成每项下拉菜单内容 ------------//
function createSubLayer(num){
var subLayerName= layerName +num;
var subLayerLeft=(mainTableTdWidth*num)+mainTableCellpadding+mainTableBorder;
var subLayerList=eval("subLayer"+num);
var subLayerHttpList=eval("subLayerHttp"+num);
document.write("

");
if(subLayerList.length!=0){
document.write("
for(h=0;h

document.write("");
}
document.write("

"+subLayerList[h]+"

");
}
document.write("

");

}

//------------------------------次菜单显隐控制--------------------------//
function layervib(type,num){
var H=type;
var temp=(H='visible'?'hidden':'visible')
for(var i=0;i
var E=eval('document.all.index'+i+'.style');
var H=eval(i);
if(i==num){E.visibility=type}else{E.visibility=temp};
}
}

3、"自适应分辨率可扩展二层JS下拉菜单"js代码使用方法。

(1) 将上面的代码存储为js_daohang.js.放在和调用的页面同一个目录下。
(2) 在需要使用的叶面中在如下位置添加
来产生菜单。如下例。可以随意摆放到页面的任何位置。

(4)、如何添加新的主菜单及次级菜单的栏目。
假设我们要在已有的栏目里新增加一个“七色鸟”栏目。下面有“论坛”和“文献”两个次级栏目。那么我么首先要在代码的如下部分添加“七色鸟”。

var mainLayer=new Array("蓝色理想","动意营造",”七色鸟”);//主导航栏目
0 1 2

然后在如下的位置添加“论坛”和“文献”栏目及连接地址。

var subLayer0=new Array("论坛","文献"); //导航栏目一下的次级栏目
var subLayerHttp0=new Array("#","#");’’;//主导航栏目一下的次级栏目连接地址
var subLayer1=new Array("论坛","文献");//导航栏目二的次级栏目
var subLayerHttp1=new Array("#","#");//主导航栏目二的次级栏目连接地址
var subLayer2=new Array("论坛","文献");//导航栏目三的次级栏目
var subLayerHttp2=new Array("#","#");//主导航栏目三的次级栏目连接地址

注意：蓝色部分是需要新添加的部分。红色部分是要修改的部分。要和上面的编号一一对应。 (5)、其他细节调整请参考代码详解部分。

4、附注及扩充。

代码中主要使用的函数及方法详解。
Document.write(“tmp”)在页面中写入tmp.
var subLayerHttp1=new Array();定义一个新的数组subLayerHttp1.
For(I=0;I
var temp=(H=值1?值2:值3)当H的值等于值1的时候temp等于值2。反之temp的值等于值3。

增强功能。
//--------------- 系统参数*请勿调整 ------------//
var layerMax=mainLayer.length+10;
var layerName=”index”

可以设置layerName=其他字段以生成新的下拉菜单。使页面内共存两个下拉菜单。

如有任何问题请联系我。Jiangyf@paic.com.cn

全文完。

chenguo 2007-07-03 12:29 发表评论

JavaScript[对象.属性]集锦

chenguo — Tue, 03 Jul 2007 04:15:00 GMT

SCRIPT 标记

用于包含JavaScript代码.

语法

属性

LANGUAGE 定义脚本语言

SRC 定义一个URL用以指定以.JS结尾的文件

windows对象

每个HTML文档的顶层对象.

属性

frames[] 子桢数组.每个子桢数组按源文档中定义的顺序存放.

feames.length 子桢个数.

self 当前窗口.

parent 父窗口(当前窗口是中一个子窗口).

top 顶层窗口(是所有可见窗口的父窗口).

status 浏览器状态窗口上的消息.

defaultStatus 当status无效时,出现在浏览器状态窗口上的缺省消息.

name 内部名,为由window.open()方法打开的窗口定义的名字.

方法

alert("message") 显示含有给定消息的"JavaScript Alert"对话框.

confirm("message") 显示含有给定消息的"Confirm"对话框(有一个OK按钮和一个Cancel按钮).如果用户单击OK返回true,否则返回false.

prompt("message") 显示一个"prompt"对话框,要求用户根据显示消息给予相应输入.

open("URL","name") 打开一个新窗口,给予一个指定的名字.

close() 关闭当前窗口.

frame对象

它是整个浏览器窗口的子窗口,除了status,defaultStatus,name属性外,它拥有window对象的全部属性.

location对象

含有当前URL的信息.

属性

href 整个URL字符串.

protocol 含有URL第一部分的字符串,如http:

host 包含有URL中主机名:端口号部分的字符串.如//www.cenpok.net/server/

hostname 包含URL中主机名的字符串.如http://www.cenpok.net

port 包含URL中可能存在的端口号字符串.

pathname URL中"/"以后的部分.如~list/index.htm

hash "#"号(CGI参数)之后的字符串.

search "?"号(CGI参数)之后的字符串.

document对象

含有当前文档信息的对象.

属性

title 当前文档标题,如果未定义,则包含"Untitled".

location 文档的全URL.

lastModified 含有文档最后修改日期.

referrer 调用者URL,即用户是从哪个URL链接到当前页面的.

bgColor 背景色(#xxxxxx)

fgColor 前景文本颜色.

linkColor 超链接颜色.

vlinkColor 访问过的超链颜色.

alinkColor 激活链颜色(鼠标按住未放时).

forms[] 文档中form对象的数组,按定义次序存储.

forms.length 文档中的form对象数目.

links[] 与文档中所有HREF链对应的数组对象,按次序定义存储.

links.length 文档中HREF链的数目.

anchors[] 锚(...)数组,按次序定义存储.

anchors.length 文档中锚的数目.

方法

write("string") 将字符串突出给当前窗口.(字符串可以含有HTML标记)

writeln("string") 与write()类似,在结尾追加回车符,只在预定格式文本中(

...
或
...
)生效.

clear() 清当前窗口.

close() 关闭当前窗口.

form对象

属性

name

中的NAME属性的字符串值.

method 中METHOD属性的类值,"0"="GET" ,"1"="POST" .

action 中ACTION属性的字符串值.

target 表格数据提交的目标,与标记中相应属性一致.

elements[index] elements属性包含form中的各个元素.

length 表格中的元素个数.

方法

submit() 提交表格.

事件处理器onSubmit() 用户单击一个定义好的按钮提交form时运行的代码.

text和textarea对象

属性

name NAME属性的字符串值.

value 域内容的字符串值.

defaultValue 域内容的初始字符串值.

方法

focus() 设置对象输入焦点.

blur() 从对象上移走输入焦点.

select() 选定对象的输入区域.

事件处理器

onFocus 当输入焦点进入时执行.

onBlur 当域失去焦点时执行.

onSelect 当域中有部分文本被选定时执行.

onChange 当域失去焦点且域值相对于onFocus执行有所改变时执行.

chenguo 2007-07-03 12:15 发表评论

XmlHttp实现无刷新三联动下拉框

chenguo — Wed, 20 Jun 2007 05:33:00 GMT

摘要: XmlHttp实现无刷新三联动下拉框 1.html代码 XmlHttp实现无刷新三联动下拉框 &... 阅读全文

chenguo 2007-06-20 13:33 发表评论

Ajax.NET的几个示例代码

chenguo — Wed, 20 Jun 2007 05:27:00 GMT

源代码下载/Files/singlepine/AJAXDemo.rar

chenguo 2007-06-20 13:27 发表评论

Ajax使用初步

chenguo — Wed, 20 Jun 2007 05:27:00 GMT

Ajax使用初步

Ajax定义为“Asynchronous JavaScript + XML”的简称，也就是异步的JavaScript和XML处理。从原理上看，主要是Ajax可以通过调用HttpRequest实现与服务器的异步通讯，并最终在网页中实现丰富友好的用户界面
Ajax使用初步，配置步骤
1.把Ajax.dll copy到应用系统bin目录下，然后在工程引用中引用Ajax.dll，如果没有的话可以下载/Files/singlepine/Ajax.rar
2.配置web.config，添加如下信息

3.假设应用系统叫Document，目录格式为Pages\AjaxTest
4.在Pages\AjaxTest下建立cs文件AjaxMethod.cs，添加如下方法

//[Ajax.AjaxMethod]
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
public static string GetNIVNumber(string str)
{
return str;
}

5.在Pages\AjaxTest下建立页面AjaxForm.aspx

  AjaxForm





  function testAjax()
  {
   var first=document.getElementById("txtfirst");
   AjaxMethod.GetNIVNumber(first.value,callback_GetNIVNumber);
  }
  function callback_GetNIVNumber(res)
  {
   var obj=document.getElementById("txtsecond");
   obj.value=res.value;
  }

onclick="testAjax();">

protected System.Web.UI.WebControls.TextBox txtfirst;
protected System.Web.UI.WebControls.TextBox txtsecond;
private void Page_Load(object sender, System.EventArgs e)
{
//注册,其中Document.Pages.AjaxTest.AjaxMethod为AjaxMethod.cs方法所在的命名空间
Ajax.Utility.RegisterTypeForAjax(typeof(Document.Pages.AjaxTest.AjaxMethod));
}

然后运行就可以了，
实现效果：在第一个textbox中输入内容，点击button，就把内容显示到第二textbox中。这只是一个简单的示例，还可以修改调用方法，从数据库读取以及更复杂的操作

chenguo 2007-06-20 13:27 发表评论

Ajax简单示例之改变下拉框动态生成表格

chenguo — Wed, 20 Jun 2007 05:26:00 GMT

Ajax简单示例之改变下拉框动态生成表格

1.建立一个aspx页面，html代码

    Untitled Page

        var xmlHttp;

        function createXMLHttpRequest()
        {
            if (window.ActiveXObject)
            {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if (window.XMLHttpRequest)
            {
                xmlHttp = new XMLHttpRequest();
            }
        }

        function startRequest()
        {
            //debugger;
            var ProvinceID=document.getElementById("DropDownList1");
            createXMLHttpRequest();
            xmlHttp.onreadystatechange = handleStateChange;
            xmlHttp.open("GET", "?ProvinceID="+ProvinceID.value, true);
            xmlHttp.send(null);
        }

        function handleStateChange()
        {
            if(xmlHttp.readyState == 4) //0(未初始化);1(正在装载);2 (装载完毕);3 (交互中);4 (完成)
            {
                if(xmlHttp.status == 200) //200(OK);404(not found)
                {
                    document.getElementById("gridiv").innerHTML=xmlHttp.responseText;
                }
            }
        }

2.cs代码

using System.Data.SqlClient;

protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            this.DropDownList1.Attributes.Add("onchange", "return startRequest();");
            ListProvince();
            if (ProvinceID != "")
            {
                GetCityByProvinceID(ProvinceID);
            }
        }
    }

    property#region property
    private string ProvinceID
    {
        get
        {
            if (Request["ProvinceID"] != null && Request["ProvinceID"].ToString() != "")
            {
                return Request["ProvinceID"];
            }
            else
            {
                return "";
            }
        }
    }
    #endregion

    GetDataSet#region GetDataSet
    private DataSet GetDataSet(string sql)
    {
        string constring=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
        SqlDataAdapter    sda =new SqlDataAdapter(sql,constring);
        DataSet ds=new DataSet();
        sda.Fill(ds);
        return ds;
    }
    #endregion

    GetCityByProvinceID#region GetCityByProvinceID
    private void GetCityByProvinceID(string ProvinceID)
    {
        string connStr = ConfigurationSettings.AppSettings["ConnectionString"];
        SqlConnection conn = new SqlConnection(connStr);
        string sql = "select * from city where father='" + ProvinceID + "'";
        SqlCommand cmd = new SqlCommand(sql, conn);
        conn.Open();
        SqlDataReader dr = cmd.ExecuteReader();

        string s = @"";
        s+="";
            s+="流水号代号城市";
        int m = 0;
        while (dr.Read())
        {
            if (m % 2 == 0)
            {
                s += "";
            }
            else
            {
                s += "";
            }
            m++;
            s += "" + dr["id"] + "";
            s += "" + dr["cityID"] + "";
            s += "" + dr["city"] + "";
            s += "";
        }
        s+="";
        dr.Close();
        conn.Close();
        this.Response.Write(s);
        this.Response.End();
    }
    #endregion

    ListProvince#region ListProvince
    private void ListProvince()
    {
        string sql = "select * from province";
        DataSet ds = GetDataSet(sql);
        DropDownList1.DataSource = ds;
        DropDownList1.DataTextField = "province";
        DropDownList1.DataValueField = "provinceID";
        DropDownList1.DataBind();
    }
    #endregion

3.示例数据库下载area1.rar

chenguo 2007-06-20 13:26 发表评论

Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中

chenguo — Wed, 20 Jun 2007 05:25:00 GMT

Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中
http://www.cnblogs.com/singlepine/archive/2006/05/21/405566.html

功能：在textbox中输入内容，动态从数据库模糊查询显示到下拉框中，以供选择

1.建立一aspx页面，html代码

        WebForm1

            //城市------------------------------
            function cityResult()
            {
                var city=document.getElementById("TextBox1");
                WebForm1.GetCityList(city.value,get_city_Result_CallBack);
            }

            function get_city_Result_CallBack(response)
            {
                if (response.value != null)
                {
                    //debugger;
                    document.getElementById("DropDownList1").style.display="block";
                    document.getElementById("DropDownList1").length=0;　　　　
　　　　            var ds = response.value;
                    if(ds != null && typeof(ds) == "object" && ds.Tables != null)
                    {
                        for(var i=0; i　　　　                {
　　　　                    var name=ds.Tables[0].Rows[i].city;
　　　　　　                var id=ds.Tables[0].Rows[i].cityID;
　　　　　　                document.getElementById("DropDownList1").options.add(new Option(name,id));
　　　　                }
                    }
                }
                else
                {
                    document.getElementById("DropDownList1").style.display="none";
                }
                return
            }

            function getData()
            {
                var province=document.getElementById("DropDownList1");
                var pindex = province.selectedIndex;
                var pValue = province.options[pindex].value;
                var pText  = province.options[pindex].text;

                document.getElementById("<%=TextBox1.ClientID%>").innerText=pText;
            }

2.cs代码

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
namespace ajaxselect
{
/**////

/// Summary description for WebForm1.
///

    public class WebForm1 : System.Web.UI.Page
    {
        protected System.Web.UI.WebControls.TextBox TextBox1;
        protected System.Web.UI.WebControls.DropDownList DropDownList1;

        private void Page_Load(object sender, System.EventArgs e)
        {
            Ajax.Utility.RegisterTypeForAjax(typeof(WebForm1));
            if (!Page.IsPostBack)
            {
                this.TextBox1.Attributes.Add("onchange", "cityResult();");
                this.DropDownList1.Attributes.Add("onclick", "getData();");
            }
        }

        Web Form Designer generated code#region Web Form Designer generated code
        override protected void OnInit(EventArgs e)
        {
            //
            // CODEGEN: This call is required by the ASP.NET Web Form Designer.
            //
            InitializeComponent();
            base.OnInit(e);
        }

        /**////

        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        ///

        private void InitializeComponent()
        {
            this.Load += new System.EventHandler(this.Page_Load);

        }
        #endregion

        GetCityList#region GetCityList
        [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
        public DataSet GetCityList(int provinceid)
        {
            string sql = "select * from city where father like '%" + provinceid + "%'";
            return GetDataSet(sql);
        }
        #endregion
        GetDataSet#region GetDataSet
        public static DataSet GetDataSet(string sql)
        {
            string ConnectionString = System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
            SqlDataAdapter sda = new SqlDataAdapter(sql, ConnectionString);
            DataSet ds = new DataSet();
            sda.Fill(ds);
            return ds;
        }
        #endregion

    }
}

3.源代码下载 http://singlepine.cnblogs.com/Files/singlepine/ajaxselect.rar
4.数据库脚本

CREATE TABLE [dbo].[city](
    [id] [int] NOT NULL,
    [cityID] [nvarchar](6) COLLATE Chinese_PRC_CI_AS NULL,
    [city] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,
    [father] [nvarchar](6) COLLATE Chinese_PRC_CI_AS NULL,
CONSTRAINT [PK_city] PRIMARY KEY CLUSTERED
(
    [id] ASC
)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]

chenguo 2007-06-20 13:25 发表评论

Ajax实现无刷新树

chenguo — Wed, 20 Jun 2007 05:22:00 GMT

摘要: Ajax实现无刷新树 1.建立一个aspx页面html代码小山 ... 阅读全文

chenguo 2007-06-20 13:22 发表评论

JavaScript调用Web Services实现无刷新三联动

chenguo — Wed, 20 Jun 2007 05:20:00 GMT

摘要: JavaScript调用Web Services实现无刷新三联动使用微软提供的webservice.htc实现通过JavaScript调用WebService.1.首先从微软网站上下载webservice.htc,我附件源代码也包含，不下载也可以http://msdn.microsoft.com/workshop/author/webservice/webservice.htc2.在网... 阅读全文

chenguo 2007-06-20 13:20 发表评论

Ajax实现无刷新三联动下拉框

chenguo — Wed, 20 Jun 2007 05:17:00 GMT

摘要: Ajax实现无刷新三联动下拉框 1.html代码 Ajax实现无刷新三联动下拉框 &... 阅读全文

chenguo 2007-06-20 13:17 发表评论

Ajax无刷新实现图片切换特效

chenguo — Wed, 20 Jun 2007 05:14:00 GMT

摘要: Ajax无刷新实现图片切换特效 1.页面cs代码 using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.... 阅读全文

chenguo 2007-06-20 13:14 发表评论

web应用的跨越访问的解决方案

chenguo — Mon, 18 Jun 2007 10:16:00 GMT

做过跨越多个网站的Ajax开发的朋友都知道，如果在A网站中，我们希望使用Ajax来获得B网站中的特定内容，如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题。

      Ajax的跨域访问问题是现有的Ajax开发人员比较常遇到的问题。
      IE对于跨域访问的处理是，弹出警告框，提醒用户。如果用户将该网站纳入可信任网站，或者调低安全级别，那么这个问题IE就不会在提醒你。
         FireFox等其它非微软的浏览器遇到跨域访问，则解决方案统一是拒绝访问。
          有人说，IE是主流浏览器，只要它能正常使用就好了。此言差已，IE虽然能够处理，但是是有前提的，要么用户不厌其烦地在页面弹出警告框之后点击是（点击否就不执行该Ajax调用了），要么用户将该网站纳入可信任站点。这两种做法，在企业管理系统的应用中倒是比较常见，因为系统管理员可以以行政手段保证用户的行为。但是对于互联网上的网站或者门户开发，这种做法则不行。
         最近遇到了这个问题，需要在跨域访问结束之后完成使主窗口出现一些特效，搜索了一些资料，通过不断尝试以及在不同浏览器中进行兼容性测试，找到了几个可行的方案：
         1、 Web代理的方式。即用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面，由该页面代替用户页面完成交互，从而返回合适的结果。此方案可以解决现阶段所能够想到的多数跨域访问问题，但要求A网站提供Web代理的支持，因此A网站与B网站之间必须是紧密协作的，且每次交互过程，A网站的服务器负担增加，且无法代用户保存session状态。
         2、on-Demand方式。MYMSN的门户就用的这种方式，不过 MYMSN中不涉及跨域访问问题。动态控制script标记的生成，通过修改script标记的src属性完成对跨域页面的调用。此方案存在的缺陷是， script的src属性完成该调用时采取的方式时get方式，如果请求时传递的字符串过大时，可能会无法正常运行。不过此方案非常适合聚合类门户使用。
         3、 iframe方式。查看过醒来在javaeye上的一篇关于跨域访问的帖子，他提到自己已经用iframe的方式解决了跨域访问问题。数据提交跟获取，采用iframe这种方式的确可以了，但由于父窗口与子窗口之间不能交互（跨域访问的情况下，这种交互被拒绝），因此无法完成对父窗口效果的影响。
         4、用户本地转储方式：IE本身依附于windows平台的特性为我们提供了一种基于iframe，利用内存来“绕行”的方案，即两个window之间可以在客户端通过windows剪贴板的方式进行数据传输，只需要在接受数据的一方设置Interval进行轮询，获得结果后清除Interval即可。FF的平台独立性决定了它不支持剪贴板这种方式，而以往版本的FF中存在的插件漏洞又被fixed了，所以FF无法通过内存来完成暗渡陈仓。而由于文件操作FF 也没有提供支持（无法通过Cookie跨域完成数据传递），致使这种技巧性的方式只能在IE中使用。
         5、我自己用于解决这类问题的方式：结合了前面几种方式，在访问A网站时，先请求B网站完成数据处理，再根据返回的标识来获得所需的结果。这种方法的缺点也很明显，B网站的负载增大了。优点，对session也实现了保持，同时A网站与B网站页面间的交互能力增强了。最重要的一点，这种方案满足了我的全部需要.

chenguo 2007-06-18 18:16 发表评论

IFrame 的使用

chenguo — Wed, 13 Jun 2007 03:05:00 GMT

在我们进行jsp的开发中，不可避免的会遇到有jsp层叠的情况，所以经过我的试验，这个标签还是很有的作用的。下面我们来看看具体怎么使用：

首先

里面的属性我就不多说了，都是很常见的。这里我多写了一个函数dyniframesize()，它的作用是处理装载页面与容器页面的同步，即将大小调整到合适的位置。
因为这样装载的页面很难固定的控制大小，所以用Document进行相对大小的设定，是一个不错的想法。

chenguo 2007-06-13 11:05 发表评论

一日精通Ajax技术

chenguo — Wed, 13 Jun 2007 02:26:00 GMT

一日精通Ajax技术

　　Ajax这个名称怎么来的，本人也不得而之了，大概是（Active Javascript Action Xml）吧，说白一点就是运用了 javascript、xmlhttp和xmldom技术及网站后台来处理用户的一些操作的方法吧。

　　那么本人就分三步来说明如何使用 Ajax 技术来做开发。

　　一、用 javascript 操作 xmlhttp 对象

　　二、服务器部对xmlhttp请求的响应（PHP范例）

　　三、xmldom 的使用方法

　　先说第一部份：

　　一、用 javascript 操作 xmlhttp 对象

　　IE7, Mozilla ,Firefox等浏览器中，javascript是内置有 XMLHttpRequest 这个对象的，但IE5+则没有，需要用如下方法来启动：
//IE 6
try{ xhttp = new ActiveXObject("Msxml2.XMLHTTP";} catch(e){ ; }
//IE5+
if(xhttp == null) try { xhttp = new ActiveXObject("Microsoft.XMLHTTP";} catch(e){ ; }

　　那考虑不同浏览器的兼容，启动一个xmlhttp一般都要按如下方式：

CODE:[Copy to clipboard]var xhttp = null;

if(window.XMLHttpRequest){ //IE7, Mozilla ,Firefox 等浏览器内置该对象

xhttp = new XMLHttpRequest();

}else if(window.ActiveXObject){ //IE6、IE5

try{ xhttp = new ActiveXObject("Msxml2.XMLHTTP");} catch (e){ ; }

if( xhttp == null) try { xhttp = new ActiveXObject("Microsoft.XMLHTTP");} catch (e){; }

}

　　对于 xmlhttp 的使用，一般遵守如下的顺序：

　　1、初始化 xmlhttp 对象（上文）；

　　2、打开链接

　　方法

xhttp.open("GET", purl, true);

　　参数一：用 GET 或 POST 方式发送数据

　　参数二、请求网址（只能请求你服务器上的资源，一般浏览器安全限制不能读取跨域的数据）

　　参数三、true 表示异步传输（服务器返回信息完成前，你可以进行其它操作），false 表示阻断方式的传输。

　　3、设定要发送的 http 请求头

　　方法：

xhttp.setRequestHeader(key,value);

　　一般来说，默认要发送的头是：xhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded";

　　这种表示发送的内容类型的请求头用于发送文本数据，而且javascript默认是以unicode发送的，还有另外一种形式是：xhttp.setRequestHeader("Content-Type","multipart/form-data";这表示发送二制形式的数据，由于安全性原因，javascript一般不能用这种方式来发送数据，所以这个头一般没什么用。

　　如果你的网站开启了使用 refer 参数来防盗链，那么你必须用这个方法指定 Refer 参数，或者如果用户需要登录才能进行某操作，那么要指定 Cookie 的请求头。

　　4、send 数据

　　方法：xhttp.send(postdata);

　　对于用 get攻手请求，不需要指定postdata，直接用 test.php?a=a&b=b 这样形式的网址来请求即可。

　　如果是post方式，需要用 key1=value2&key2=value2 这样的形式来对数据进行处理，把它合并在 postdata 字串中，然后发送。

　　注意事项：

　　javascript默认发送数据的方式是unicode，处理返回的数据必须是utf-8格式，因此，在发送的时候，需要用escape()函数来处理postdata和网址的value，在服务器上必须还原这些value，并把unicode转为页面编码值，因此如果用 jsp 或 asp.net 都会比较简单，但如果用php处理起来是什么费劲的，等下会教你如何做。

　　5、确认服务器返回资料完成下载

　　[1] 如果用阻断的方式来发送请求，那么直接用 if(xhttp.readyState == 4)就能判断是否完成。

readyState 的具体属性值为：
0 没open
1 没send
2 状态未知
3 正在传送
4 传送完成

　　当然为了保障起见，还需要加多一重判断，就是 if(xhttp.status == 200) ，status 就是 http 协议里的返回头代码

1xx 表示（唉呀，忘记了）
2xx 表示成功的信息
3xx 表示页面转移
4xx 页面不存在
5xx 表示服务器的各种错误

　　如果你的页面没特殊处理，一般用 if(xhttp.status == 200) 来确信内容返回是正确的

　　[2] 如果用异步传输，需要用 onreadystatechange 的事件来监听

xhttp.onreadystatechange = function()
{
   //这里来进行上面阻断方式的判断
   if(myajax.xhttp.readyState == 4){
                if(myajax.xhttp.status == 200){
                  //要进行的后续操作
                }
        }
}

　　6、获取返回结果

属性：
[1]xhttp.responseBody;
[2]xhttp.responseStream;
[3]xhttp.responseXml;
[4]xhttp.responseText;

　　其中1、2都是二进制的方式，一般很少会用到，4不用看都知道了

　　如果服务端无意外的话[3]返回的是一个xmldom的对象

　　二、服务器部对xmlhttp请求的响应（PHP范例）

　　为了简化操作，在这里把 xmlhttp的各作操作封装为一个类

　　CODE:[Copy to clipboard]function DedeAjax(WiteOKFunc){ //WiteOKFunc 为异步状态事件处理函数

//xmlhttp和xmldom对象
this.xhttp = null;
this.xdom = null;

//post或get发送数据的键值对
this.keys = Array();
this.values = Array();
this.keyCount = -1;

//http请求头
this.rkeys = Array();
this.rvalues = Array();
this.rkeyCount = -1;
//请求头类型
this.rtype = 'text';

//初始化xmlhttp
if(window.XMLHttpRequest){//IE7, Mozilla ,Firefox 等浏览器内置该对象
     this.xhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){//IE6、IE5
     try { this.xhttp = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) { }
     if (this.xhttp == null) try { this.xhttp = new ActiveXObject("Microsoft.XMLHTTP");} catch (e) { }
}
this.xhttp.onreadystatechange = WiteOKFunc;
//rs: responseBody、responseStream、responseXml、responseText

//以下为成员函数
//--------------------------------

//初始化xmldom
this.InitXDom = function(){
var obj = null;
if (typeof(DOMParser) != "undefined") { // Gecko、Mozilla、Firefox
    var parser = new DOMParser();
    obj = parser.parseFromString(xmlText, "text/xml");
} else { // IE
    try { obj = new ActiveXObject("MSXML2.DOMDocument");} catch (e) { }
    if (obj == null) try { obj = new ActiveXObject("Microsoft.XMLDOM"); } catch (e) { }
}
this.xdom = obj;
};

//增加一个POST或GET键值对
this.AddKey = function(skey,svalue){
        this.keyCount++;
        this.keys[this.keyCount] = skey;
        this.values[this.keyCount] = escape(svalue);
};

//增加一个Http请求头键值对
this.AddHead = function(skey,svalue){
        this.rkeyCount++;
        this.rkeys[this.rkeyCount] = skey;
        this.rvalues[this.rkeyCount] = svalue;
};

//清除当前对象的哈希表参数
this.ClearSet = function(){
        this.keyCount = -1;
        this.keys = Array();
        this.values = Array();
        this.rkeyCount = -1;
        this.rkeys = Array();
        this.rvalues = Array();
};

//发送http请求头
this.SendHead = function(){
        if(this.rkeyCount!=-1){ //发送用户自行设定的请求头
          for(;i<=this.rkeyCount;i++){
                  this.xhttp.setRequestHeader(this.rkeys[i],this.rvalues[i]);
          }
}
if(this.rtype=='binary'){
          this.xhttp.setRequestHeader("Content-Type","multipart/form-data");
}else{
          this.xhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
};

//用Post方式发送数据
this.SendPost = function(purl){
        var pdata = "";
        var i=0;
        this.state = 0;
        this.xhttp.open("POST", purl, true);
        this.SendHead();
if(this.keyCount!=-1){ //post数据
          for(;i<=this.keyCount;i++){
                  if(pdata=="") pdata = this.keys[i]+'='+this.values[i];
                  else pdata += "&"+this.keys[i]+'='+this.values[i];
          }
}
this.xhttp.send(pdata);
};

//用GET方式发送数据
this.SendGet = function(purl){
        var gkey = "";
        var i=0;
        this.state = 0;
        if(this.keyCount!=-1){ //get参数
          for(;i<=this.keyCount;i++){
                  if(gkey=="") gkey = this.keys[i]+'='+this.values[i];
                  else gkey += "&"+this.keys[i]+'='+this.values[i];
          }
          if(purl.indexOf('?')==-1) purl = purl + '?' + gkey;
          else purl = purl + '&' + gkey;
}
        this.xhttp.open("GET", purl, true);
        this.SendHead();
this.xhttp.send();
};

} // End Class DedeAjax
上面代码保存为： dedeajax.js

ok 那现在做个最简单的测试吧
test.htm

CODE:[Copy to clipboard]

test.php

CODE:[Copy to clipboard] header("Content-Type: text/html; charset=gb2312");
echo $_POST['key1'];
?>
看到了什么了呢？不用激动，真正让你头痛的东西还没有出来。

把类里面的

CODE:[Copy to clipboard]this.AddKey = function(skey,svalue){
   this.keyCount++;
   this.keys[this.keyCount] = skey;
   this.values[this.keyCount] = svalue;//escape(svalue);
};
escape 屏蔽掉

发送
myajax.AddKey("key1","-----中---国----人-----";

看到什么了，乱码是吧？呵呵，这回开始头大了

先把 escape放回去
this.values[this.keyCount] = escape(svalue);

那么看到的就是
-----%u4E2D---%u56FD----%u4EBA-----

如何把 %u4E2D 这些东西弄回来呢？对于php而言这是一个很复杂的问题，如果用asp就简单多了

下面是我写的一个函数：

CODE:[Copy to clipboard]//unicode url编码转gbk编码函数
function Unicode2Gbk($str)
{
        //载入对照词典
        if(!isset($GLOBALS['GbkUniDic']))
        {
          $ds = file("./data/gbk_unicode.dic");
          foreach($ds as $l){
                  $GLOBALS['GbkUniDic'][hexdec('0x'.substr($l,0,4))] = substr($l,5,4);
          }
}
//处理字符串
$glen = strlen($str);
$okstr = "";
for($i=0; $i < $glen; $i++)
{
           if( $glen-$i > 4){
                    if($str[$i]=='%' && $str[$i+1]=='u'){
                              $uni = hexdec('0x'.substr($str,$i+2,4));
                              if(isset($GLOBALS['GbkUniDic'][$uni])){
                                      $uni = $GLOBALS['GbkUniDic'][$uni];
                                      $okstr .= chr(hexdec(substr($uni,0,2))).chr(hexdec(substr($uni,2,2)));
                              }
                              else $okstr .= "&#{".hexdec("0x".$uni).";";
                              $i = $i+5;
                    }
                    else $okstr .= $str[$i];
           }
           else $okstr .= $str[$i];
}
return $okstr;
}
词典文件： http://www.ce86.com/myimg/data.rar

把test.php 输出改为

echo Unicode2Gbk($_POST['key1']);

正常了吧

以下说下面和xml有关的东西的了

　　三、xmldom 的使用方法

由于本文仅是牵针引线的作用，这一章就简单些，因为针对的是 php ，如果针对的是 asp.net 或 jsp 写涉及 web server 类的通信，已经不单纯是 ajax 的问题了，本章的任务是把test2.php

CODE:[Copy to clipboard] header("Content-Type: text/xml; charset=gb2312");
echo '<'.'?'."xml version=\"1.0\" encoding=\"gb2312\" ".'?'.">

我是小一
我是小二

";
?>这个xml文档在客户端用自己的方式展现出来。因为xml这种东西比较麻烦，所以语法也必须严格，test2.htm的页面的源码为

CODE:[Copy to clipboard]

ajax测试

在IE中测试一下，如果弹出的对话框是 [object] 就表示成功获得返回的xml的xmldoc了。

那下面是处理：

CODE:[Copy to clipboard]function WiteOK()
{
   var myinfo = document.getElementById("myinfo");
   var mydom = null;
   myinfo.innerHTML = "以下是处理结果：
";
   if(myajax.xhttp.readyState == 4){
     mydom = myajax.xhttp.responseXml;
     var nodeList = mydom.selectNodes("/myhome/item");
     var mynode = null;
     var myatt = null;
     var mysex = "";
     for(i=1;i<=nodeList.length;i++)
     {
              mynode = nodeList[i-1];
              for(j=0;j < myinfo.attributes.length;j++)
              {
                       if(!mynode.attributes[j]) break;
                       myatt = mynode.attributes[j];
                       if(myatt.name=='sex') mysex = myatt.value;
              }
              myinfo.innerHTML += "我是："+mynode.text+"，我的性别是："+ mysex +"
";
     }
   }
}

结果：

CODE:[Copy to clipboard]以下是处理结果：
我是：我是小一，我的性别是：男
我是：我是小二，我的性别是：女
OK，目的已经达到

　　关于dom的部份只在IE6中测试过，可能在firefox中会有问题，大家可能参考与兼容性有关的文档。

chenguo 2007-06-13 10:26 发表评论

ajax组件--xmlhttp

chenguo — Wed, 13 Jun 2007 02:14:00 GMT

XMLHTTP的使用

　　顾名思义，XMLHTTP是个传送XML格式数据的超文本传输协议。

　　实际上，XMLHTTP的数据传输过程更为灵活一些：

　　它上传的指令可以是XML格式数据，也可以是字符串，流，或者一个无符号整数数组。还可以是URL的参数。

　　它下达的结果可以是XML格式数据，也可以是字符串，流，或者一个无符号整数数组。

　　详情可参阅文末链接。

　　客户端调用XMLHTTP的过程很简单，只有5个步骤：

　　1、创建XMLHTTP对象

　　2、打开与服务端的连接，同时定义指令发送方式，服务网页(URL)和请求权限等。

　　客户端通过Open命令打开与服务端的服务网页的连接。与普通HTTP指令传送一样，可以用"GET"方法或"POST"方法指向服务端的服务网页。

　　3、发送指令。

　　4、等待并接收服务端返回的处理结果。

　　5、释放XMLHTTP对象

　　XMLHTTP方法

　　Open bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword

　　bstrMethod：数据传送方式，即GET或POST。

　　bstrUrl：服务网页的URL。

　　varAsync：是否同步执行。缺省为True，即同步执行，但只能在DOM中实施同步执行。应用中一般将其置为False，即异步执行。

　　bstrUser：用户名，可省略。

　　bstrPassword：用户口令，可省略。

　　Send varBody

　　varBody：指令集。可以是XML格式数据，也可以是字符串，流，或者一个无符号整数数组。也可以省略，让指令通过Open方法的URL参数代入。

　　setRequestHeader bstrHeader, bstrValue

　　bstrHeader：HTTP 头(header)

　　bstrValue：HTTP 头(header)的值

　　如果Open方法定义为POST，可以定义表单方式上传xmlhttp.setRequestHeader "Content-Type", "application/x-www-form-urlencoded"

　　XMLHTTP属性

　　onreadystatechange：在同步执行方式下获得返回结果的事件句柄。只能在DOM中调用。

　　responseBody：结果返回为无符号整数数组。

　　responseStream：结果返回为IStream流。

　　responseText ：结果返回为字符串。

　　responseXML：结果返回为XML格式数据。

　　下面是本文附件源程序中的一个应用示例：

　　Function GetResult(urlStr)

　　Dim xmlHttp

　　Dim retStr

　　Set xmlHttp = CreateObject("Msxml2.XMLHTTP") '创建对象

　　On Error Resume Next '出错处理

　　xmlHttp.Open "POST", urlStr, False '用POST方式打开连接，异步执行。

　　xmlHttp.setRequestHeader "Content-Type", "application/x-www-form-urlencoded" '上传表单

　　xmlHttp.Send '发送指令

　　If Err.Number = 0 Then '如果连接正确

　　retStr = xmlHttp.responseText '等待并获得服务端返回的结果字符串

　　Else

　　retStr = "Url not found" '否则返回出错信息

　　End If

　　Set xmlHttp = nothing '释放对象

　　GetResult = retStr '返回结果

　　End Function

　　GetResult()函数带入一个服务网页的URL参数，把上传的指令安放在URL后面的参数上，如：

　　urlStr = "server.asp?cmd=" & cmd & "&db=" & db & "table=" & table

　　cmd：执行方式，例如查询，修改，删除等等。

　　db：服务端数据库名

　　table：服务端表名

　　然后提交指令，等待并接收返回的处理结果。结果以字符串方式返回。最后由函数调用者处理并显示结果。

chenguo 2007-06-13 10:14 发表评论

ajax-http状态码手册

chenguo — Wed, 13 Jun 2007 02:09:00 GMT

(一) HTTP 1.1支持的状态代码

100 Continue 初始的请求已经接受，客户应当继续发送请求的其余部分
101 Switching Protocols 服务器将遵从客户的请求转换到另外一种协议
200 OK 一切正常，对GET和POST请求的应答文档跟在后面。
201 Created 服务器已经创建了文档，Location头给出了它的URL。
202 Accepted 已经接受请求，但处理尚未完成。
203 Non-Authoritative Information 文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝
204 No Content 没有新文档，浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的
205 Reset Content 没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容
206 Partial Content 客户发送了一个带有Range头的GET请求，服务器完成了它
300 Multiple Choices 客户请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选择，则应该在Location应答头指明。
301 Moved Permanently 客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。
302 Found 类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。
303 See Other 类似于301/302，不同之处在于，如果原来的请求是POST，Location头指定的重定向目标文档应该通过GET提取
304 Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。
305 Use Proxy 客户请求的文档应该通过Location头所指明的代理服务器提取
307 Temporary Redirect 和302（Found）相同。许多浏览器会错误地响应302应答进行重定向，即使原来的请求是POST，即使它实际上只能在POST请求的应答是303时才能重定向。由于这个原因，HTTP 1.1新增了307，以便更加清除地区分几个状态代码：当出现303应答时，浏览器可以跟随重定向的GET和POST请求；如果是307应答，则浏览器只能跟随对GET请求的重定向。
400 Bad Request 请求出现语法错误。
401 Unauthorized 客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头，浏览器据此显示用户名字/密码对话框，然后在填写合适的Authorization头后再次发出请求。
403 Forbidden 资源不可用。
404 Not Found 无法找到指定位置的资源
405 Method Not Allowed 请求方法（GET、POST、HEAD、DELETE、PUT、TRACE等）对指定的资源不适用。
406 Not Acceptable 指定的资源已经找到，但它的MIME类型和客户在Accpet头中所指定的不兼容
407 Proxy Authentication Required 类似于401，表示客户必须先经过代理服务器的授权。
408 Request Timeout 在服务器许可的等待时间内，客户一直没有发出任何请求。客户可以在以后重复同一请求。
409 Conflict 通常和PUT请求有关。由于请求和资源的当前状态相冲突，因此请求不能成功。
410 Gone 所请求的文档已经不再可用，而且服务器不知道应该重定向到哪一个地址。它和404的不同在于，返回407表示文档永久地离开了指定的位置，而404表示由于未知的原因文档不可用。
411 Length Required 服务器不能处理请求，除非客户发送一个Content-Length头。
412 Precondition Failed 请求头中指定的一些前提条件失败
413 Request Entity Too Large 目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求，则应该提供一个Retry-After头
414 Request URI Too Long URI太长
416 Requested Range Not Satisfiable 服务器不能满足客户在请求中指定的Range头
500 Internal Server Error 服务器遇到了意料不到的情况，不能完成客户的请求
501 Not Implemented 服务器不支持实现请求所需要的功能。例如，客户发出了一个服务器不支持的PUT请求
502 Bad Gateway 服务器作为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答
503 Service Unavailable 服务器由于维护或者负载过重未能应答。例如，Servlet可能在数据库连接池已满的情况下返回503。服务器返回503时可以提供一个Retry-After头
504 Gateway Timeout 由作为代理或网关的服务器使用，表示不能及时地从远程服务器获得应答
505 HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本

(二) XMLHttpRequest 对象方法

abort() 停止当前请求
getAllResponseHeaders() 作为字符串返问完整的headers
getResponseHeader("headerLabel") 作为字符串返问单个的header标签
open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 设置未决的请求的目标 URL, 方法, 和其他参数
send(content) 发送请求
setRequestHeader("label", "value") 设置header并和请求一起发送

(三) XMLHttpRequest 对象属性

onreadystatechange   状态改变的事件触发器
readyState    对象状态(integer):
    0 = 未初始化
    1 = 读取中
    2 = 已读取
    3 = 交互中
    4 = 完成
responseText  服务器进程返回数据的文本版本
responseXML  服务器进程返回数据的兼容DOM的XML文档对象
status   服务器返回的状态码, 如：404 = "文件末找到" 、200 ="成功"
statusText  服务器返回的状态文本信息

chenguo 2007-06-13 10:09 发表评论

AJAX 开发简略

chenguo — Wed, 13 Jun 2007 02:01:00 GMT

http://dev2dev.bea.com.cn/bbs/thread.jspa?forumID=121&threadID=28135&start=0&tstart=0

AJAX开发简略

http://blog.csdn.net/ll_feng/archive/2006/01/23/587041.aspx
一、AJAX定义
二、现状与需要解决的问题
三、为什么使用AJAX
四、谁在使用AJAX
五、用AJAX改进你的设计
例子1：数据校验
例子2：按需取数据—级联菜单
例子3：读取外部数据
六、AJAX的缺陷
七、AJAX开发
7.1、AJAX应用到的技术
A、XMLHttpRequest对象
B、Javascript
C、DOM
D、XML
7.2、AJAX开发框架
A、初始化对象并发出XMLHttpRequest请求
B、指定响应处理函数
C、发出HTTP请求
D、处理服务器返回的信息
E、一个初步的开发框架
7.3、简单的示例
A、数据校验
B、级联菜单
参考文章：
在使用浏览器浏览网页的时候，当页面刷新很慢的时候，你的浏览器在干什么？你的屏幕内容是什么？是的，你的浏览器在等待刷新，而你的屏幕内容是一片空白，而你在屏幕前苦苦的等待浏览器的响应。开发人员为了克服这种尴尬的局面，不得不在每一个可能需要长时间等待响应的页面上增加一个DIV，告诉用户“系统正在处理您的请求，请稍候……”。
现在，有一种越来越流行越热的“老”技术，可以彻底改变这种窘迫的局面。那就是AJAX。如今，随着Gmail、Google-maps的应用和各种浏览器的支持，AJAX正逐渐吸引全世界的眼球。
一、AJAX定义
AJAX（Asynchronous JavaScript and XML）其实是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。其中：
使用XHTML和CSS标准化呈现，使用DOM实现动态显示和交互，使用XML和XSTL进行数据交换与处理，使用XMLHttpRequest对象进行异步数据读取，使用Javascript绑定和处理所有数据。
在AJAX提出之前，业界对于上述技术都只是单独的使用，没有综合使用，也是由于之前的技术需求所决定的。随着应用的广泛，AJAX也成为香饽饽了。
二、现状与需要解决的问题
传统的Web应用采用同步交互过程，这种情况下，用户首先向HTTP服务器触发一个行为或请求的呼求。反过来，服务器执行某些任务，再向发出请求的用户返回一个HTML页面。这是一种不连贯的用户体验，服务器在处理请求的时候，用户多数时间处于等待的状态，屏幕内容也是一片空白。如下图：

自从采用超文本作为Web传输和呈现之后，我们都是采用这么一套传输方式。当负载比较小的时候，这并不会体现出有什么不妥。可是当负载比较大，响应时间要很长，1分钟、2分钟……数分钟的时候，这种等待就不可忍受了。严重的，超过响应时间，服务器干脆告诉你页面不可用。另外，某些时候，我只是想改变页面一小部分的数据，那为什么我必须重新加载整个页面呢？！当软件设计越来越讲究人性化的时候，这么糟糕的用户体验简直与这种原则背道而驰。为什么老是要让用户等待服务器取数据呢？至少，我们应该减少用户等待的时间。现在，除了程序设计、编码优化和服务器调优之外，还可以采用AJAX。
三、为什么使用AJAX
与传统的Web应用不同，AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。

使用AJAX，可以为ISP、开发人员、终端用户带来可见的便捷：
         减轻服务器的负担。AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
         无刷新更新页面，减少用户心理和实际的等待时间。特别的，当要读取大量的数据的时候，不用像Reload那样出现白屏的情况，AJAX使用XMLHTTP对象发送请求并得到服务器响应，在不重新载入整个页面的情况下用Javascript操作DOM最终更新页面。所以在读取数据的过程中，用户所面对的不是白屏，是原来的页面内容（也可以加一个Loading的提示框让用户知道处于读取数据过程），只有当数据接收完毕之后才更新相应部分的内容。这种更新是瞬间的，用户几乎感觉不到。
         带来更好的用户体验。
         可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。
         可以调用外部数据。
         基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
         进一步促进页面呈现和数据的分离。
四、谁在使用AJAX
在应用AJAX开发上面，Google当仁不让是表率。Orkut、Gmail、Google Groups、Google Maps、Google Suggest都应用了这项技术。Amazon的A9.com搜索引擎也采用了类似的技术。
微软也在积极开发更为完善的AJAX应用：它即将推出代号为Atlas的AJAX工具。Atlas的功能超越了AJAX本身，包括整合Visual Studio的调试功能。另外，新的ASP.NET控件将使客户端控件与服务器端代码的捆绑更为简便。Atlas客户脚本框架（Atlas Clent Script Framework）也使与网页及相关项目的交互更为便利。但Visual Studio 2005中并不包含此项功能。
微软最近宣布Atlas客户脚本框架将包含如下内容（详细资料请访问Atlas计划网站）：
* 一个可扩展的核心框架，它添加了JavaScript功能：如生命同时期管理、继承管理、多点传送处理器和界面管理。
* 一个常见功能的基本类库，有丰富的字符串处理、计时器和运行任务。
* 为HTML附加动态行为的用户界面框架。
* 一组用来简化服务器连通和网络访问的网络堆栈。
* 一组丰富的用户界面开发控件，如：自动完成的文本框、动画和拖放。
* 处理浏览器脚本行为差异的浏览器兼容层面。
典型的，微软将AJAX技术应用在MSN Space上面。很多人一直都对MS Space服务感到很奇怪，当提交回复评论以后，浏览器会暂时停顿一下，然后在无刷新的情况下把我提交的评论显示出来。这个就是应用了AJAX的效果。试想，如果添加一个评论就要重新刷新整个页面，那可真费事。
目前，AJAX应用最普遍的领域是GIS-Map方面。GIS的区域搜索强调快速响应，AJAX的特点正好符合这种需求。
五、用AJAX改进你的设计
AJAX虽然可以实现无刷新更新页面内容，但是也不是什么地方都可以用，主要应用在交互较多、频繁读数据、数据分类良好的Web应用中。现在，让我们举两个例子，看看如何用AJAX改进你的设计。
例子1：数据校验
在输入form表单内容的时候，我们通常需要确保数据的唯一性。因此，常常在页面上提供“唯一性校验”按钮，让用户点击，打开一个校验小窗口；或者等form提交到服务器端，由服务器判断后在返回相应的校验信息。前者，window.open操作本来就是比较耗费资源的，通常由window. showModalDialog代替，即使这样也要弹出一个对话框；后者，需要把整个页面提交到服务器并由服务器判断校验，这个过程不仅时间长而且加重了服务器负担。而使用AJAX，这个校验请求可以由XMLHttpRequest对象发出，整个过程不需要弹出新窗口，也不需要将整个页面提交到服务器，快速又不加重服务器负担。
例子2：按需取数据—级联菜单
以前，为了避免每次对菜单的操作引起的重载页面，不采用每次调用后台的方式，而是一次性将级联菜单的所有数据全部读取出来并写入数组，然后根据用户的操作用JavaScript来控制它的子集项目的呈现，这样虽然解决了操作响应速度、不重载页面以及避免向服务器频繁发送请求的问题，但是如果用户不对菜单进行操作或只对菜单中的一部分进行操作的话，那读取的数据中的一部分就会成为冗余数据而浪费用户的资源，特别是在菜单结构复杂、数据量大的情况下（比如菜单有很多级、每一级菜又有上百个项目），这种弊端就更为突出。
现在应用AJAX，在初始化页面时我们只读出它的第一级的所有数据并显示，在用户操作一级菜单其中一项时，会通过Ajax向后台请求当前一级项目所属的二级子菜单的所有数据，如果再继续请求已经呈现的二级菜单中的一项时，再向后面请求所操作二级菜单项对应的所有三级菜单的所有数据，以此类推……这样，用什么就取什么、用多少就取多少，就不会有数据的冗余和浪费，减少了数据下载总量，而且更新页面时不用重载全部内容，只更新需要更新的那部分即可，相对于后台处理并重载的方式缩短了用户等待时间，也把对资源的浪费降到最低。
例子3：读取外部数据
AJAX可以调用外部数据，因此，可以对一些开发的数据比如XML文档、RSS文档进行二次加工，实现数据整合或者开发应用程序。
六、AJAX的缺陷
AJAX不是完美的技术。使用AJAX，它的一些缺陷不得不权衡一下：
         AJAX大量使用了Javascript和AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。
         AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。
         对流媒体的支持没有FLASH、Java Applet好。
         一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax。
七、AJAX开发
到这里，已经可以清楚的知道AJAX是什么，AJAX能做什么，AJAX什么地方不好。如果你觉得AJAX真的能给你的开发工作带来改进的话，那么继续看看怎么使用AJAX吧。
7.1、AJAX应用到的技术
AJAX涉及到的7项技术中，个人认为Javascript、XMLHttpRequest、DOM、XML比较有用。
A、XMLHttpRequest对象
XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。
IE5.0开始，开发人员可以在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能，不用从当前的Web页面导航就可以直接传输数据到服务器或者从服务器接收数据。,Mozilla1.0以及NetScape7则是创建继承XML的代理类XMLHttpRequest；对于大多数情况，XMLHttpRequest对象和XMLHTTP组件很相似，方法和属性类似，只是部分属性不同。
XMLHttpRequest对象初始化：
XMLHttpRequest对象的方法：
方法    描述
abort()    停止当前请求
getAllResponseHeaders()    作为字符串返回完整的headers
getResponseHeader("headerLabel")    作为字符串返回单个的header标签
open("method","URL"[,asyncFlag[,"userName"[, "password"]]])    设置未决的请求的目标 URL，方法，和其他参数
send(content)    发送请求
setRequestHeader("label", "value")    设置header并和请求一起发送
XMLHttpRequest对象的属性：
属性    描述
onreadystatechange    状态改变的事件触发器
readyState    对象状态(integer):
0 = 未初始化
1 = 读取中
2 = 已读取
3 = 交互中
4 = 完成
responseText    服务器进程返回数据的文本版本
responseXML    服务器进程返回数据的兼容DOM的XML文档对象
status    服务器返回的状态码, 如：404 = "文件未找到" 、200 ="成功"
statusText    服务器返回的状态文本信息
B、Javascript
Javascript一直被定位为客户端的脚本语言，应用最多的地方是表单数据的校验。现在，可以通过Javascript操作XMLHttpRequest，来跟数据库打交道。
C、DOM
DOM（Document Object Model）是提供给HTML和XML使用的一组API，提供了文件的表述结构，并可以利用它改变其中的内容和可见物。脚本语言通过DOM才可以跟页面进行交互。Web开发人员可操作及建立文件的属性、方法以及事件都以对象来展现。比如，document就代表页面对象本身。
D、XML
通过XML（Extensible Markup Language），可以规范的定义结构化数据，是网上传输的数据和文档符合统一的标准。用XML表述的数据和文档，可以很容易的让所有程序共享。
7.2、AJAX开发框架
这里，我们通过一步步的解析，来形成一个发送和接收XMLHttpRequest请求的程序框架。AJAX实质上也是遵循Request/Server模式，所以这个框架基本的流程也是：对象初始化à发送请求à服务器接收à服务器返回à客户端接收à修改客户端页面内容。只不过这个过程是异步的。
A、初始化对象并发出XMLHttpRequest请求
为了让Javascript可以向服务器发送HTTP请求，必须使用XMLHttpRequest对象。使用之前，要先将XMLHttpRequest对象实例化。之前说过，各个浏览器对这个实例化过程实现不同。IE以ActiveX控件的形式提供，而Mozilla等浏览器则直接以XMLHttpRequest类的形式提供。为了让编写的程序能够跨浏览器运行，要这样写：
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
有些版本的Mozilla浏览器处理服务器返回的未包含XML mime-type头部信息的内容时会出错。因此，要确保返回的内容包含text/xml信息。
http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');
B、指定响应处理函数
接下来要指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性就可以了。比如：
http_request.onreadystatechange = processRequest;
需要指出的时，这个函数名称不加括号，不指定参数。也可以用Javascript即时定义函数的方式定义响应函数。比如：
http_request.onreadystatechange = function() {
};
C、发出HTTP请求
指定响应处理函数之后，就可以向服务器发出HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法。
http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null);
open的第一个参数是HTTP请求的方法，为Get、Post或者Head。
对于 GET 请求，使用 null 值或空字符串“”。
POST 请求包含一个带有表单数据的字符串参数。它们也要求在请求的标题中设置 Content-Type。

第二个参数是目标URL。基于安全考虑，这个URL只能是同网域的，否则会提示“没有权限”的错误。这个URL可以是任何的URL，包括需要服务器解释执行的页面，不仅仅是静态页面。
第三个参数只是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为True，则不会继续执行，直到服务器返回信息。默认为True。
按照顺序，open调用完毕之后要调用send方法。send的参数如果是以Post方式发出的话，可以是任何想传给服务器的内容。
不过，跟form一样，如果要传文件给服务器，必须先调用setRequestHeader方法，修改MIME类别。如下：
http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
req.send("name=scott&email=stiger@foocorp.com");
D、处理服务器返回的信息
在第二步我们已经指定了响应处理函数，这一步，来看看这个响应处理函数都应该做什么。
首先，它要检查XMLHttpRequest对象的readyState值，判断请求目前的状态。参照前文的属性表可以知道，readyState值为4的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下：
if (http_request.readyState == 4) {
    // 信息已经返回，可以开始处理
} else {
    // 信息还没有返回，等待
}
服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中，200代表页面正常。
if (http_request.status == 200) {
    // 页面正常，可以开始处理信息
} else {
    // 页面有问题
}
XMLHttpRequest对成功返回的信息有两种处理方式：
responseText：将传回的信息当字符串使用；
responseXML：将传回的信息当XML文档使用，可以用DOM处理。

function processXMLResponse() { if (req.readyState == 4) { if (request.status != 200) {// Process the XML response       }   } }
XML 响应的处理是通过使用标准 Javascript DOM 方法完成的。例如，要从输入的 XML 流中抽取员工姓名：
Chris
您可以使用以下代码：
var name = req.responseXML.getElementsByTagName("employee")[0];
分析更为复杂的 XML 会使用如下代码迭代元素：

for (i=0;ifor (j=0;jvar ElementData = elements[i].childNodes[j].firstChild.nodeValue;   }
}
E、一个初步的开发框架
总结上面的步骤，我们整理出一个初步的可用的开发框架，供以后调用；这里，将服务器返回的信息用window.alert以字符串的形式显示出来：

7.3、简单的示例
接下来，我们利用上面的开发框架来做两个简单的应用。
A、数据校验
在用户注册的表单中，经常碰到要检验待注册的用户名是否唯一。传统的做法是采用window.open的弹出窗口，或者window. showModalDialog的对话框。不过，这两个都需要打开窗口。采用AJAX后，采用异步方式直接将参数提交到服务器，用window.alert将服务器返回的校验信息显示出来。代码如下：
在之间增加一段form表单代码：

在开发框架的基础上再增加一个调用函数：
function userCheck() {
    var f = document.form1;
    var username = f.username.value;
    if(username=="") {
        window.alert("用户名不能为空。");
        f.username.focus();
        return false;
    }
    else {
        send_request('sample1_2.jsp?username='+username);
    }
}
看看sample1_2.jsp做了什么：
<%@ page contentType="text/html; charset=gb2312" errorPage="" %>
<%
String username = request.getParameter("username");
if("educhina".equals(username)) out.print("用户名已经被注册，请更换一个用户名。");
else out.print("用户名尚未被使用，您可以继续。");
%>
运行一下，嗯，没有弹出窗口，没有页面刷新，跟预想的效果一样。如果需要的话，可以在sample1_2.jsp中实现更复杂的功能。最后，只要将反馈信息打印出来就可以了。

B、级联菜单
我们在第五部分提到利用AJAX改进级联菜单的设计。接下来，我们就演示一下如何“按需取数据”。
首先，在中间增加如下HTML代码：

经理室

开发部

在框架的基础上增加一个响应函数showRoles(obj)：
//显示部门下的岗位
function showRoles(obj) {
    document.getElementById(obj).parentNode.style.display = "";
    document.getElementById(obj).innerHTML = "正在读取数据..."
    currentPos = obj;
    send_request("sample2_2.jsp?playPos="+obj);
}
修改框架的processRequest函数：
// 处理返回信息的函数
function processRequest() {
if (http_request.readyState == 4) { // 判断对象状态
    if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
    document.getElementById(currentPos).innerHTML = http_request.responseText;
    } else { //页面不正常
      alert("您所请求的页面有异常。");
    }
}
}
最后就是smaple2_2.jsp了：
<%@ page contentType="text/html; charset=gb2312" errorPage="" %>
<%
String playPos = request.getParameter("playPos");
if("pos_1".equals(playPos))
out.print("  总经理
  副总经理");
else if("pos_2".equals(playPos))
out.println("  总工程师
  软件工程师");
%>
运行一下看看效果：

参考文章：
作者：    fanscial    标题：    《AJAX简介》
网址：    http://www.blogjava.net/fanscial/archive/2005/08/31/11628.html

作者：    Amour GUO    标题：    《AJAX内部交流文档》
网址：    http://www.dragonson.com/doc/ajax.html

作者：    MoztwWiki    标题：    《AJAX上手篇》
网址：    http://wiki.moztw.org/index.php/AJAX_%E4%B8%8A%E6%89%8B%E7%AF%87

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=587041

chenguo 2007-06-13 10:01 发表评论

AjAX核心大纲

chenguo — Wed, 13 Jun 2007 01:58:00 GMT

Ajax是一项综合的技术,Ajax的使用过程,首先是在HTML控件中添加相应的事件触发属性,使其具备事件触发能力;其次是编写事件处理函数,并在这个函数中初始化XMLHttpRequest对象,指定响应处理程序,创建http请求,设置必要的http请求头信息,向服务器发送所创建的http请求;最后才是创建响应处理函数,在对http请求状态进行判断的基础上作出既定的业务处理事务。
       (一)事件处理函数，按照以下顺序处理下列事务：
                a) 初始化XMLHttpRequest对象；
                 实现代码如下:
                  if(widow.XMLHttpRequest) {//Mozilla,Safari,.......
                    http_request= new XMLHttpRequest();
                    } else if(window.ActiveXObject) {//IE
                    http_request= new ActiveXObject("Microsoft.XMLHTTP");
                    } else {
                       window.alert("浏览器没有实现XMLHttpRequest 组件对象!");
                    }
                b) 设置XMLHttpRequest对象的onreadystatechange 属性,指定服务器返回响应数据时要调用的回调函数，即指定响应处理函数；
                实现代码如下:
                 http_request.onreadystatechange=processRequest;
                c) 调用XMLHttpRequest对象的open方法,创建http请求；
                  实现代码如下:
                   http_request.open("GET", "http://www.example.org/some.file", true);
                 d) 调用XMLHttpRequest对象的setRequestHeader等方法,设置必要的http请求头信息；
                   实现代码如下:
                    http_request.setRequestHeader("Content-Type",application/x-www-form-urlencoded);
                 e) 调用XMLHttpRequest对象的send方法,发送之前创建的http请求；
                   实现代码如下:
                   http_request.send(null);
                 f) 根据XMLHttpRequest对象的open方法参数,决定是否等待服务器返回响应数据.
     (二)回调函数(响应处理函数)执行以下事务：
　　　　aa) 判断http请求的状态,并作相应处理;
                bb) 调用XMLHttpRequest对象的responseXML or responseText方法,将服务器返回的响应数据赋予Javascript变量或对象;
                cc) 使用DOM或其它方式解析服务器返回的响应数据，保存在缓存变量或数组中；
                dd) 使用DOM解析HTML文档，定位目标HTML文档节点;
                ee) 使用解析完毕的服务器返回的响应数据,更新上一步解答分析HTML文档节点的属性值或内容,从而更新HTML文档页面内容.

Ajax控件和类库简析

【导读】Ajax控件和类库现在真的太多了，本人对Ajax的观点:Ajax和服务器端技术毫不相关,DOM模型是Ajax最本质的技术,要学好JavaScript，在使用Ajax控件前理解它们的实现……

Ajax控件和类库现在真的太多了，不知不觉中增加了Ajax的神秘性和复杂性，谈谈本人对Ajax的观点，希望能让大家对Ajax有一个本质的认识。

观点一：Ajax和服务器端技术毫不相关

严格的说，与传统web开发相比，Ajax是完完全全的客户端技术。由于很多控件封装了客户端和服务器端的通信过程，因此很多问题也因通信而起。事实上，不论何种Ajax技术，服务器端都是返回的一个纯文本流，再由客户端来处理这个文本。这段文本可以是xml格式，也可以是一个Html片段，也可以是一段 JavaScript脚本，或者仅是一个字符串。服务器端仅仅是作为一个数据接口，客户端使用XMLHttpRequest对象来请求这个页面，服务器端在页面内写入结果文本，这个过程和普通的web开发没有任何区别。所不同的只是，客户端在异步获取结果后，不是直接显示在页面，而是由客户端的 Javascript脚本处理后再显示在页面。至于各种控件所谓的能返回DataSet对象，Date对象，或者其他的数据类型，都是封装了这个处理过程的结果。

观点二：DOM模型是Ajax最本质的技术

之所以没有把XMLHttpRequest列为最本质的技术，因为本人觉得它实在是太简单了，它只是可以让浏览器在后台请求一个页面，并将其内容交给JavaScript处理。真正的核心应该是：DOM模型，即文档对象模型。在DOM模型里，Html标记都被认为是一个对象，例如：div对象，table对象等等。DOM模型就规定了这些对象所具有的属性、方法和事件。通过这些性质，可以对一个已经显示于浏览器的页面进行内容的修改，例如增加节点、修改节点位置，删除节点等等。而不仅仅是一个innerHTML属性这么简单，虽然这是一个很有用的属性。

观点三：在使用Ajax控件前理解它们的实现

使用Ajax控件的确可以提高效率，但如果你空中楼阁般使用控件，那就得不偿失了。从一个控件换到另外一个控件又会有一个漫长的学习曲线。所以应该从底层了解其，况且Ajax实在不是什么高深的技术。其实任何东西的最底层其实都是简单的，但如果封装了这些底层的东西，事情会变得复杂和难以理解。以Asp.net为例，它的定制特性可以使得只要在方法前加上[ajax method]类似这样的标志就可以称为一个异步方法，相信这使得Asp.net的Ajax开发显得更加“高效”或者是“神秘”，而更多的事情则被封装了。同样记住一条，任何对服务器端的请求仅仅是返回纯文本，我们不一定要依赖于封装好的处理过程，而完全可以自己来实现。

观点四：学好JavaScript

在大多数人看来，JavaScript总不是那么一种正规的语言，随便copy一段就碰巧能运行，学过c之类的人，一看也能看懂，而且在浏览器中常常有脚本错误提示，所以潜意识觉得总不能付之以大任。事实上，要学好Ajax，这就完全是一种错误的看法。javascript作为一种脚本语言，其语法的确不是很严格，但并不妨碍其完成诸多复杂的任务，没有JavaScript，就没有Ajax。所以本人强烈建议，学Ajax前，一定要好好研究一番 JavaScript，一般来讲，如果能顺利看懂prototype框架的代码（如：prototype-1.3.1.js），你的JavaScript 水平就基本过关了。同时对DOM模型也可以算有一个基本的了解。

观点五：Ajax点缀：CSS

用JavaScript控制CSS其实很简单，基本上每个DOM对象都有一个style对象，只要把css属性里的"-"去掉，并让随后的字母变为大写就可以作为属性使用了，例如：element.style.backgroundColor="#f00";在css是：选择符 {background-color:#f00}

chenguo 2007-06-13 09:58 发表评论