‘AJAX’ 分类下的所有文章
2010十月1

ajax读取数据

AJAX 评论关闭
function getXMLHttpRequest()
{
    if (window.XMLHttpRequest) {
        return new window.XMLHttpRequest;
    }
    else {
        try {
            return new ActiveXObject("MSXML2.XMLHTTP.3.0");
        }
        catch(ex) {
            return null;
        }
    }
}
function handler()
{
    if (oReq.readyState == 4 /* complete */) {
        if (oReq.status == 200) {
            alert(oReq.responseText);
        }
    }
}

var oReq = getXMLHttpRequest();

if (oReq != null) {
    oReq.open("GET", "http://localhost/test.xml", true);
    oReq.onreadystatechange = handler;
    oReq.send();
}
else {
    window.alert("AJAX (XMLHTTP) not supported.");
}注:firefox默认限制了跨域访问,需要在open前开启允许权限: try { netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); } catch (e) {  //alert("Permission UniversalBrowserRead denied.");  }
2010十月1

利用ajax读取数据并执行的方法

AJAX 评论关闭

利用ajax读取数据,若想让数据在页面中执行,如输出js方法,此时要用document.write( 得到的数据 ); 而不要用 aa.innerHTML= 得到的数据,
后者只是替换,而不会执行
如:执行js语句:
document.write( “<script>alert(得到的数据);</script>” );

2010十月1

DWR与Spring的融合

AJAX 评论关闭

?1,在dwr.xml中指定类的生成方式即可
?? <dwr>
? <allow>
??? <create creator=”new” javascript=”JDate”>
????? <param name=”class” value=”java.util.Date”/>
??? </create>
??? <create creator=”spring” javascript=”JLogin”>
????? <param name=”beanName” value=”dwrLogin”/>
??? </create>
? </allow>
</dwr>

2,在spring中的applicationContext.xml中配置dwrLogin
? <bean id=”dwrLogin”>
??? </bean>

2010十月1

DWR — 应用于JAVA的AJAX框架

AJAX 评论关闭

DWR:是java的AJAX,它用来完成服务器上的bean对象与和客户端上的js对象的交互,可认为:dwr提供了用js操作java类对象的方式!!!

应用流程如下:

1,下载jar包放在web-inf 下的 lib中,同时注意dwr 需要commons-logging.包的支持,项目中也要有此包

2,编辑配置文件-web.xml

加入如下代码:
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>

<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

//这就为查看自动生成的映射文件 http://localhost:8080/lj/dwr/ 打下基础,
// 并且在页面中<script type=’text/javascript’ src=’/dwr/util.js’></script>时就会调用dwr这个servlet,完成功能。

注:DWR执行流程:
页面调用JLogin.checkLogin 之类的方法,会将其转到XMLHttpRequest,以get或post发送,当然地址中会用/dwr,
以让服务器接收时转到在web.xml中定义的servlet,这个servlet就会将传来的方法转到java方法调用,之后得用
XMLHttpRequest的回调函数传回数据
DWR:从事的就是javascript语法与java语法的转换工作。

3,在与web.xml同一目录下建立dwr.xml文件

<!DOCTYPE dwr PUBLIC
“-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN”
“http://getahead.org/dwr/dwr20.dtd”>

<dwr>
<allow>???????????????? //标签中包括可以暴露给javascript访问的东西。
<create creator=”new” javascript=”JDate”>
<param name=”class” value=”java.util.Date”/>
<include method=”checkLogin”/>
</create>
<create creator=”new” javascript=”Demo”>
<param name=”class” value=”your.java.Bean”/>
</create>

<convert converter=”bean” match=”com.lvjian.User”>
<param name=”include” value=”user” />
</convert>

</allow>
</dwr>

注:(1)creator=”new”代表用无参构造器来创建对象 ,也可用spring,由spring代理类的生命周期的管理
(2)javascript=”JDate” 指定在js中应用对象时的名称
(3)<param name=”class” value=”java.util.Date”/> 指定js对象JDate对应的java类
(4) <include method=”checkLogin”/> 指定公开给javascript的方法。不指定的话就公开所有方法。
对应有:<exclude>? 标签指定要防止被访问的方法。

(5)<convert>: <creator>标签负责公开用于Web远程的类和类的方法,<convertor>? 标签则负责这些方法
的参数和返回类型。
convert? 元素的作用是告诉DWR在服务器端Java对象表示和序列化的JavaScript之间如何转换数据类型。DWR? 自动地在Java和JavaScript
表示之间调整简单数据类型。这些类型包括? Java? 原生类型和它们各自的封装类表示,还有? String? 、Date? 、
数组和集合类型。??? DWR? 也能把? JavaBean? 转换成? JavaScript? 表示,但是出于安全性的原因,
要求显式的配置,
<convertor>? 标签就是完成此功能的。? converter=”bean”? 属性指定转换的方式采用? JavaBean? 命名规范,
match=”"com.dwr.TestBean”? 属性指定要转换的? javabean? 名称,? <param>? 标签指定要转换的JavaBean? 属性。

若参数是集合类型,且其中的元素是自定义元素,那么就要用如下方式指定:

<dwr>
<allow>
<create creator=”new” javascript=”testClass” >
<param name=”class” value= “com.dwr.TestClass” />
<include method=”testMethod7″/>
</create>
<convert converter=”bean” match= “com.dwr.TestBean “>
<param name=”include” value=”username,password” />
</convert>
</allow>
<signatures>
<![CDATA[
import java.util.List;
import com.dwr.TestClass;
import com.dwr.TestBean;
TestClass.testMethod7(List<TestBean>);
]]>
</signatures>
</dwr>

<signatures>? 标签是用来声明? java? 方法中? List? 、? Set? 或者? Map? 参数所包含的确切类,以便? java? 代码作出判断

注:上述方式完成了js与java类对象的映射,在java类中定义方法时要注意两点:

(1)因js中delete为其关键字,故在java类在定义方法时不能指定delete方法。
(2)因js不支持重载方法,故其对应的类中不能有重载方法,不然在应用中调用的总会是重载方法中的最后一个方法

4,查看DWR自动生成的映射文件 http://localhost:8080/lj/dwr/,其中如下代码要包含在jsp文件中,

<script type=’text/javascript’ src=’/dwr/interface/JLogin.js’></script>
<script type=’text/javascript’ src=’/dwr/engine.js’></script>
<script type=’text/javascript’ src=’/dwr/util.js’></script>

5,应用:编写js文件,调用即可
(1) jsp:
包含的js文件:
<script type=’text/javascript’ src=’/dwr/interface/JLogin.js’></script>
<script type=’text/javascript’ src=’/dwr/engine.js’></script>
<script type=’text/javascript’ src=’/dwr/util.js’></script>

<script type=’text/javascript’ src=’js/login.js’></script>? //用来处理

调用:
<input type=”text” name=”userName” id=”userName” value=”goodday” onblur=”check()”>? //check来自login.js
<span id=”demoReply” style=”background:#eeffdd; padding-left:4px; padding-right:4px;”>&nbsp;</span>

(2) login.js如下:

function check(){
var name = dwr.util.getValue(“userName”);
JLogin.checkLogin(name, function(data) {
dwr.util.setValue(“demoReply”, data);
});
}

JLogin.checkLogin(name, function(data)) :
调用Login.checkLogin(name), 当结果返回时用data接收,并调用其后的方法(回调函数)

可以是:(1) JLogin.checkLogin(name, function(data))
(2) JLogin.checkLogin(name, myCallBack)

(3) JLogin.checkLogin(42, {
callback:myCallBack
});
第三种方式不仅易读,并且也可指定超时参数,及异常处理函数

JLogin.checkLogin(42, {
callback:myCallBack,
timeout:5000,
errorHandler:function(message) { alert(“Oops: ” + message); }
});

注:在js中创建对象并传递给java的方法:
(1) var p = {
name:”Fred Bloggs”,
age:42,
appointments:[ new Date(), new Date("1 Jan 2008") ]
};

JLogin.checkLogin(p, myCallBack)?? 那么在类的checkLogin参数须是一个类对象来接收封装而来的数据
(2) 带集合且集合元素都是自定义类

data = [
{
username:"user1",
password:"password2"????????????????????? //第一个对象
},
{
username:"user2",
password:" password2"???????????????????? //第二个对象
}
];

JLogin.checkLogin(p, myCallBack)??????? 那么在类的checkLogin参数须是一个类对象来接收封装而来的数据

6, 在js中访问java对象
JLogin.checkLogin(name, function(data))
(1)data为基型,直接操作
(2) data为一自定义对象, (在web.xml中配置<conventor>)
for(var property in data){
alert(“property:”+property);
alert(property+”:”+data[property]);? //或data.username
}

7,dwr.util

(1)获取及设置页面元素value
1) $()???????? 注:$ = document.getElementById
即:var user = $(‘admin.accounts’).value? 等同于 var user = document.getElementById(‘admin.accounts’).value

2)DWRUtil.getValue(id) 可以根据id取得value,使用这个方法,你不必在意div和select list的不同。

3)DWRUtil.getValues() 这个方法和getValue()一样,只是它传入的是一个包含名字和数值的javascript对象.这个名字就
是HTML元素的ID。这个方法不会返回任何对象,它只会将ID的value映射给传入的value。例:
4)DWRUtil.setValue(id, value) 用ID找到元素,并更新value
5)DWRUtil.setValues() 和setValue(id,value)一样,只是它需要的参数是个javascript对象

(2)操作页面元素
addRows()和removeAllRows()用于编辑tables。
addOptions()和removeAllOptions()用于编辑lists(如:select lists、ul、ol)。

DWR:是java的AJAX,它用来完成服务器上的bean对象与和客户端上的js对象的交互,可认为:dwr提供了用js操作java类对象的方式!!!

应用流程如下:

1,下载jar包放在web-inf 下的 lib中,同时注意dwr 需要commons-logging.包的支持,项目中也要有此包

2,编辑配置文件-web.xml

加入如下代码:
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>

<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

//这就为查看自动生成的映射文件 http://localhost:8080/lj/dwr/ 打下基础,
// 并且在页面中<script type=’text/javascript’ src=’/dwr/util.js’></script>时就会调用dwr这个servlet,完成功能。

注:DWR执行流程:
页面调用JLogin.checkLogin 之类的方法,会将其转到XMLHttpRequest,以get或post发送,当然地址中会用/dwr,以让服务器接收时
转到在web.xml中定义的servlet,这个servlet就会将传来的方法转到java方法调用,之后得用XMLHttpRequest的回调函数传回数据
DWR:从事的就是javascript语法与java语法的转换工作。

3,在与web.xml同一目录下建立dwr.xml文件

<!DOCTYPE dwr PUBLIC
“-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN”
“http://getahead.org/dwr/dwr20.dtd”>

<dwr>
<allow>???????????????? //标签中包括可以暴露给javascript访问的东西。
<create creator=”new” javascript=”JDate”>
<param name=”class” value=”java.util.Date”/>
<include method=”checkLogin”/>
</create>
<create creator=”new” javascript=”Demo”>
<param name=”class” value=”your.java.Bean”/>
</create>

<convert converter=”bean” match=”com.lvjian.User”>
<param name=”include” value=”user” />
</convert>

</allow>
</dwr>

注:(1)creator=”new”代表用无参构造器来创建对象 ,也可用spring,由spring代理类的生命周期的管理
(2)javascript=”JDate” 指定在js中应用对象时的名称
(3)<param name=”class” value=”java.util.Date”/> 指定js对象JDate对应的java类
(4) <include method=”checkLogin”/> 指定公开给javascript的方法。不指定的话就公开所有方法。
对应有:<exclude>? 标签指定要防止被访问的方法。

(5)<convert>: <creator>标签负责公开用于Web远程的类和类的方法,<convertor>? 标签则负责
这些方法的参数和返回类型。convert? 元素的作用是告诉DWR在服务器端Java对象表示和序列化的JavaScript
之间如何转换数据类型。DWR? 自动地在Java和JavaScript表示之间调整简单数据类型。这些类型包括? Java? 原生类型
和它们各自的封装类表示,还有? String? 、Date? 、数组和集合类型。
DWR? 也能把? JavaBean? 转换成? JavaScript? 表示,但是出于安全性的原因,要求显式的配置,
<convertor>? 标签就是完成此功能的。? converter=”bean”? 属性指定转换的方式采用? JavaBean? 命名规范,
match=”"com.dwr.TestBean”? 属性指定要转换的? javabean? 名称,? <param>? 标签指定要转换的? JavaBean? 属性。

若参数是集合类型,且其中的元素是自定义元素,那么就要用如下方式指定:

<dwr>
<allow>
<create creator=”new” javascript=”testClass” >
<param name=”class” value= “com.dwr.TestClass” />
<include method=”testMethod7″/>
</create>
<convert converter=”bean” match= “com.dwr.TestBean “>
<param name=”include” value=”username,password” />
</convert>
</allow>
<signatures>
<![CDATA[
import java.util.List;
import com.dwr.TestClass;
import com.dwr.TestBean;
TestClass.testMethod7(List<TestBean>);
]]>
</signatures>
</dwr>

<signatures>? 标签是用来声明? java? 方法中? List? 、? Set? 或者? Map? 参数所包含的确切类,以便? java? 代码作出判断

注:上述方式完成了js与java类对象的映射,在java类中定义方法时要注意两点:

(1)因js中delete为其关键字,故在java类在定义方法时不能指定delete方法。
(2)因js不支持重载方法,故其对应的类中不能有重载方法,不然在应用中调用的总会是重载方法中的最后一个方法

4,查看DWR自动生成的映射文件 http://localhost:8080/lj/dwr/,其中如下代码要包含在jsp文件中,

<script type=’text/javascript’ src=’/dwr/interface/JLogin.js’></script>
<script type=’text/javascript’ src=’/dwr/engine.js’></script>
<script type=’text/javascript’ src=’/dwr/util.js’></script>

5,应用:编写js文件,调用即可
(1) jsp:
包含的js文件:
<script type=’text/javascript’ src=’/dwr/interface/JLogin.js’></script>
<script type=’text/javascript’ src=’/dwr/engine.js’></script>
<script type=’text/javascript’ src=’/dwr/util.js’></script>

<script type=’text/javascript’ src=’js/login.js’></script>? //用来处理

调用:
<input type=”text” name=”userName” id=”userName” value=”goodday” onblur=”check()”>? //check来自login.js
<span id=”demoReply” style=”background:#eeffdd; padding-left:4px; padding-right:4px;”>&nbsp;</span>

(2) login.js如下:

function check(){
var name = dwr.util.getValue(“userName”);
JLogin.checkLogin(name, function(data) {
dwr.util.setValue(“demoReply”, data);
});
}

JLogin.checkLogin(name, function(data)) :
调用Login.checkLogin(name), 当结果返回时用data接收,并调用其后的方法(回调函数)

可以是:(1) JLogin.checkLogin(name, function(data))
(2) JLogin.checkLogin(name, myCallBack)

(3) JLogin.checkLogin(42, {
callback:myCallBack
});
第三种方式不仅易读,并且也可指定超时参数,及异常处理函数

JLogin.checkLogin(42, {
callback:myCallBack,
timeout:5000,
errorHandler:function(message) { alert(“Oops: ” + message); }
});

注:在js中创建对象并传递给java的方法:
(1) var p = {
name:”Fred Bloggs”,
age:42,
appointments:[ new Date(), new Date("1 Jan 2008") ]
};

JLogin.checkLogin(p, myCallBack)?? 那么在类的checkLogin参数须是一个类对象来接收封装而来的数据? (2) 带集合且集合元素都是自定义类

data = [
{
username:"user1",
password:"password2"????????????????????? //第一个对象
},
{
username:"user2",
password:" password2"???????????????????? //第二个对象
}
];

JLogin.checkLogin(p, myCallBack)??????? 那么在类的checkLogin参数须是一个类对象来接收封装而来的数据

6, 在js中访问java对象
JLogin.checkLogin(name, function(data))
(1)data为基型,直接操作
(2) data为一自定义对象, (在web.xml中配置<conventor>)
for(var property in data){
alert(“property:”+property);
alert(property+”:”+data[property]);? //或data.username
}

7,dwr.util

(1)获取及设置页面元素value
1) $()???????? 注:$ = document.getElementById
即:var user = $(‘admin.accounts’).value? 等同于 var user = document.getElementById(‘admin.accounts’).value

2)DWRUtil.getValue(id) 可以根据id取得value,使用这个方法,你不必在意div和select list的不同。

3)DWRUtil.getValues() 这个方法和getValue()一样,只是它传入的是一个包含名字和数值的javascript对象.这个名字就
是HTML元素的ID。这个方法不会返回任何对象,它只会将ID的value映射给传入的value。例:
4)DWRUtil.setValue(id, value) 用ID找到元素,并更新value
5)DWRUtil.setValues() 和setValue(id,value)一样,只是它需要的参数是个javascript对象

(2)操作页面元素
addRows()和removeAllRows()用于编辑tables。
addOptions()和removeAllOptions()用于编辑lists(如:select lists、ul、ol)。

2010十月1

form包括的元素在失去焦点时的触发事件onblur

AJAX 评论关闭

onblur: 当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可] ,可用来当用户输入完毕后自动提交数据验证。

onAbort 图片在下载时被用户中断?
onBeforeUnload 当前页面的内容将要被改变时触发的事件
onError 捕抓当前页面因为某种原因而出现的错误,如脚本错误与外部数据引用的错误
onLoad 页面内空完成传送到浏览器时触发的事件,包括外部文件引入完成
onScroll 浏览器的滚动条位置发生变化时触发的事件
onStop 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断
onBeforeCopy 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件

2010十月1

ajax: Asynchronous JavaScript And XML

AJAX 评论关闭

异步JavaScript和可扩展标记语言

同步与异步:向服务器端发送请求,如果不需要服务器响应就是异步,如果需要服务器返回信息就是同步
主机A发送数据的时候,主机B必须等待接收,处于阻塞状态,这就好比别人给你打电话,你必须当场听话
主机A发送数据的时候,主机B无须等待接收,主机B要获得数据就从缓存里取,就好比别人给你发邮件一样

ajax中的异步指的是客户端在发出请求后不必等待服务器响应,就可进行其它操作,服务器处理之后会自动将数据传入到客户端或无需刷新客户端页面。
同步:客户端在发出请求后须等待服务器响应完成才可进行下一步操作。表现形式:页面要刷新。
ajax应用: google, baidu 搜索输入出现下拉框提示。google笔记本的即时保存,不用刷新页面。
???????? 土豆的留言即时显示

2010十月1

HTTP 协议

AJAX 评论关闭

Internet的基本协议是TCP/IP协议,在TCP/IP模型最上层的是应用层(Application layer),它包含所有高层的协议。高层协议有:文件传输协议FTP、电子邮件传输协议SMTP、域名系统服务DNS、网络新闻传输协议NNTP和HTTP协议等。

?? 在地址栏中键入:http://www.google.com/ 就代表用http用户协议来访问指定位置的信息。
??
?? HTTP是工作流程
一次HTTP操作称为一个事务,其工作过程可分为四步:
(1)首先客户机与服务器需要建立连接。只要单击某个超级链接,HTTP的工作就开始了。
(2)连接后,客户机发送一个请求给服务器,请求方式的格式为:统一资源标识符(URL)、协议版本号,后边是MIME信息包括请求修饰符、客户机信息和可能的内容。
(3)服务器接到请求后,给予相应的响应信息,其格式为一个状态行,包括信息的协议版本号、一个成功或错误的代码,后边是MIME信息包括服务器信息、实体信息和可能的内容。
(4)客户端接收服务器所返回的信息通过浏览器显示在用户的显示屏上,然后客户机与服务器断开连接。
??? ?
??? http 由请求与响应两部分组成。
??? ?
??? 1,请求报文
???????? 请求行(request line)、请求头部(header)、空行和请求数据4个部分组成
????????????? 格式:

???????????????? 请求方法 URL http协议版本?? (请求行)

??????????????????? User-Agent:产生请求的浏览器类型。

??????????????????? Accept:客户端可识别的内容类型列表。?????? (请求头部)

??????????????????? Host:请求的主机名,允许多个域名同处一个IP地址,即虚拟主机。

???????????????????? …..
?????????????????????????? 空的一行
?????????????????????????? 请求数据(post方法才有)

??? HTTP协议的请求方法有GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT。最常用的GET方法和POST方法。

??? get 主要用于请求服务器传来数据,适用于参数不多的页面,故其没有请求数据段,它传的参数在请求行的URL中传递,而post主要向服务器传数据,适用于大量参数的页面,它的参数存储于请求数据中,故在请求行的URL中不用再带参。这也是用get方法url会显示参数,而post却不会的原因所在。

??? (1)get

??? GET /books/?name=Professional%20Ajax HTTP/1.1??????? (请求行)

??? Host: www.wrox.com???????????????????????????????????????????????????????? (请求头部)

??? User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6)

??? Gecko/20050225 Firefox/1.0.1

??? Connection: Keep-Alive

??? 请求行

??? 请求行的第一部分说明了该请求是GET请求。该行的第二部分是一个斜杠/books/,用来说明请求的是该域名的/books目录。该行的最后一部分说明使用的是HTTP 1.1版本(另一个可选项是1.0)。再配合host就是所要的位置。

??? 请求头部

?????????? 第2行是请求的第一个首部,HOST。首部HOST将指出请求的目的地。结合HOST和上一行中的斜杠(/books),可以通知服务器请求的是? www.wrox.com/books(HTTP 1.1才需要使用首部HOST,而原来的1.0版本则不需要使用)。
?????????? 第三行中包含的是首部 User-Agent,服务器端和客户端脚本都能够访问它,它是浏览器类型检测逻辑的重要基础。该信息由你使用的浏览器来定义(在本例中是 Firefox 1.0.1),并且在每个请求中将自动发送。最后一行是首部Connection,通常将浏览器操作设置为Keep-Alive(当然也可以设置为其他值,但这已经超出了本书讨论的范围)。注意,在最后一个首部之后有一个空行。即使不存在请求主体,这个空行也是必需的。

??? (2)post

??? POST / HTTP/1.1?????????????????????????????? (请求行)

??? Host: www.wrox.com/???????????????????? ? ? (请求头部)

??? User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6)

??? Gecko/20050225 Firefox/1.0.1

??? Content-Type: application/x-www-form-urlencoded??????? ?

??? Content-Length: 40????????????????????? ?

??? Connection: Keep-Alive

??? name=Professional%20Ajax&publisher=Wiley????????????????????? ( 请求数据)

??? 首部Host和User-Agent仍然存在,在后面有两个新行。其中首部Content-Type说明了请求主体的内容是如何编码的。浏览器始终以application/ x-www- form- urlencoded的格式编码来传送数据,这是针对简单URL编码的MIME类型。首部Content-Length说明了请求主体的字节数。在首部Connection后是一个空行,再后面就是请求主体。与大多数浏览器的POST请求一样,这是以简单的“名称?值”对的形式给出的,其中 name是Professional Ajax,publisher是Wiley。你可以以同样的格式来组织URL的查询字符串参数。

??? HTTP响应

???? 与请求不同点就在于请求行!

??? 如下所示,HTTP响应的格式与请求的格式十分类似:

??? <status-line>

??? <headers>

??? <blank line>

??? [<response-body>]

??? 正如你所见,在响应中唯一真正的区别在于第一行中用状态信息代替了请求信息。状态行(status line)通过提供一个状态码来说明所请求的资源情况。以下就是一个HTTP响应的例子:

??? HTTP/1.1 200 OK

??? Date: Sat, 31 Dec 2005 23:59:59 GMT

??? Content-Type: text/html;charset=ISO-8859-1

??? Content-Length: 122

??? <html>

??? <head>

??? <title>Wrox Homepage</title>

??? </head>

??? <body>

??? <!– body goes here –>

??? </body>

??? </html>

??? 在本例中,状态行给出的HTTP状态代码是200,以及消息OK。状态行始终包含的是状态码和相应的简短消息,以避免混乱。最常用的状态码有:

??? ◆200 (OK): 找到了该资源,并且一切正常。

??? ◆304 (NOT MODIFIED): 该资源在上次请求之后没有任何修改。这通常用于浏览器的缓存机制。

??? ◆ 401 (UNAUTHORIZED): 客户端无权访问该资源。这通常会使得浏览器要求用户输入用户名和密码,以登录到服务器。

??? ◆403 (FORBIDDEN): 客户端未能获得授权。这通常是在401之后输入了不正确的用户名或密码。

??? ◆404 (NOT FOUND): 在指定的位置不存在所申请的资源。

??? 在状态行之后是一些首部。通常,服务器会返回一个名为Data的首部,用来说明响应生成的日期和时间(服务器通常还会返回一些关于其自身的信息,尽管并非是必需的)。接下来的两个首部大家应该熟悉,就是与POST请求中一样的Content-Type和 Content-Length。在本例中,首部Content-Type指定了MIME类型HTML(text/html),其编码类型是ISO- 8859-1(这是针对美国英语资源的编码标准)。响应主体所包含的就是所请求资源的HTML源文件(尽管还可能包含纯文本或其他资源类型的二进制数据)。浏览器将把这些数据显示给用户。

??? 注意,这里并没有指明针对该响应的请求类型,不过这对于服务器并不重要。客户端知道每种类型的请求将返回什么类型的数据,并决定如何使用这些数据。

头部
? 在页面中可通过meta设置如:<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />

HTTP的头域包括通用头,请求头,响应头和实体头四个部分。每个头域由一个域名,冒号(:)和域值三部分组成。域名是大小写无关的,域值前可以添加任何数量的空格符,头域可以被扩展为多行,在每行开始处,使用至少一个空格或制表符。

通用头域

??? 通用头域包含请求和响应消息都支持的头域,通用头域包含Cache-Control、 Connection、Date、Pragma、Transfer-Encoding、Upgrade、Via。对通用头域的扩展要求通讯双方都支持此扩展,如果存在不支持的通用头域,一般将会作为实体头域处理。

(1)Cache-Control头域(请求和应答通用头域)
Cache -Control指定请求和响应遵循的缓存机制。不要缓存的实体,要求现在从WEB服务器去取,在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached,响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、 proxy-revalidate、max-age。
各个消息中的指令含义如下:
Public 指示响应可被任何缓存区缓存。
Private 指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效。
no-cache 指示请求或响应消息不能缓存
no-store 用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
max-age 指示客户机可以接收生存期不大于指定时间(以秒为单位)的响应。
min-fresh 指示客户机可以接收响应时间小于当前时间加上指定时间的响应。
max-stale 指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。
禁止页面缓存,:

?????????????????????????? request.setCharacterEncoding(“GB2312″);//设置编码
?????????????????????????? ((HttpServletResponse)response).setHeader(“Pragma”,”No-cache”);
?????????????????????????? ((HttpServletResponse)response).setHeader(“Cache-Control”,”no-cache”);
?????????????????????????? ((HttpServletResponse)response).setHeader(“Expires”,”0″);//禁止缓存

(2)Connection
?Connection:请求:close(告诉WEB服务器或者代理服务器,在完成本次请求的响应后,断开连接,不要等待本次连接的后续请求了)。
keepalive(告诉WEB服务器或者代理服务器,在完成本次请求的响应后,保持连接,等待本次连接的后续请求)。
响应:close(连接已经关闭)。
keepalive(连接保持着,在等待本次连接的后续请求)。
Keep-Alive:如果浏览器请求保持连接,则该头部表明希望 WEB 服务器保持连接多长时间(秒)。
例如:Keep-Alive:300

(3)Pragma 主要使用 Pramga: no-cache,相当于 Cache-Control: no-cache。
例如:Pragma:no-cache
(4)Transfer-Encoding: WEB 服务器表明自己对本响应消息体(不是消息体里面的对象)作了怎样的编码,比如是否分块(chunked)。例如:Transfer-Encoding: chunked

(5)Via? 列出从客户端到 最终服务器 或者相反方向的响应经过了哪些代理服务器,他们用什么协议(和版本)发送的请求。
当客户端请求到达第一个代理服务器时,该服务器会在自己发出的请求里面添加 Via 头部,并填上自己的相关信息,当下一个代理服务器
收到第一个代理服务器的请求时,会在自己发出的请求里面复制前一个代理服务器的请求的Via 头部,并把自己的相关信息加到后面,
以此类推,当 OCS 收到最后一个代理服务器的请求时,检查 Via 头部,就知道该请求所经过的路由。
例如:Via:1.0 236-81.D07071953.sina.com.cn:80 (squid/2.6.STABLE13)

请求头域

请求头域可能包含下列字段Accept、Accept- Charset、Accept-Encoding、Accept-Language、Authorization、From、Host、If- Modified-Since、If-Match、If-None-Match、If-Range、If-Unmodified- Since、Max-Forwards、Proxy-Authorization、Range、Referer、User-Agent。对请求头域的扩展要求通讯双方都支持,如果存在不支持的请求头域,一般将会作为实体头域处理。

(1)Accept:告诉WEB服务器自己接受什么介质类型,*/* 表示任何类型,type/* 表示该类型下的所有子类型,type/sub-type。
(2)Accept-Charset: 浏览器申明自己接收的字符集
(3)Accept-Encoding: 浏览器申明自己接收的编码方法,通常指定压缩方法,是否支持压缩,支持什么压缩方法(gzip,deflate)
(4)Accept-Language::浏览器申明自己接收的语言. 跟字符集的区别:中文是语言,中文有多种字符集,比如big5,gb2312,gbk等等。

(5)Authorization:当客户端接收到来自WEB服务器的 WWW-Authenticate 响应时,用该头部来回应自己的身份验证信息给WEB服务器。
(6)Proxy-Authorization:浏览器响应代理服务器的身份验证请求,提供自己的身份信息。

(7)Host头域
Host头域:客户端指定自己想访问的WEB服务器的域名/IP 地址和端口号。例如:Host:rss.sina.com.cn,必须表示请求url的原始服务器或网关的位置。HTTP/1.1请求必须包含主机头域,否则系统会以400状态码返回。

(8)User-Agent: 浏览器表明自己的身份(是哪种浏览器)。
例如:User-Agent:Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.8.1.14) Gecko/20080404 Firefox/2.0.0.14

(9)If-Modified-Since:如果请求的对象在该头部指定的时间之后修改了,才执行请求的动作(比如返回对象),否则返回代码304,告诉浏览器该对象没有修改。例如:If-Modified-Since:Thu, 10 Apr 2008 09:14:42 GMT

(10)If-Unmodified- Sincee:如果请求的对象在该头部指定的时间之后没修改过,才执行请求的动作(比如返回对象)。

(11)If-Match:如果对象的 ETag 没有改变,其实也就意味著对象没有改变,才执行请求的动作。
(12)If-None-Match:如果对象的 ETag 改变了,其实也就意味著对象也改变了,才执行请求的动作。

(13)If-Range:浏览器告诉 WEB 服务器,如果我请求的对象没有改变,就把我缺少的部分给我,如果对象改变了,就把整个对象给我。浏览器通过发送请求对象的 ETag 或者 自己所知道的最后修改时间给 WEB 服务器,让其判断对象是否改变了。总是跟 Range 头部一起使用。

(14)Referer:浏览器向 WEB 服务器表明自己是从哪个 网页/URL 获得/点击 当前请求中的网址/URL,这可以允许服务器生成回退链表,可用来登陆、优化cache等,例如:Referer:http://www.sina.com/

响应头域

响应头域允许服务器传递不能放在状态行的附加信息,这些域主要描述服务器的信息和Request-URI进一步的信息。响应头域包含Age、 Location、Proxy-Authenticate、Public、Retry-After、Server、Vary、Warning、WWW- Authenticate。对响应头域的扩展要求通讯双方都支持,如果存在不支持的响应头域,一般将会作为实体头域处理。。

(1)Content-Encoding:WEB服务器表明自己使用了什么压缩方法(gzip,deflate)压缩响应中的对象。
例如:Content-Encoding:gzip
(2)Content-Language:WEB 服务器告诉浏览器自己响应的对象的语言。
(3)Content-Length: WEB 服务器告诉浏览器自己响应的对象的长度。
例如:Content-Length: 26012
(4)Content-Range: WEB 服务器表明该响应包含的部分对象为整个对象的哪个部分。
例如:Content-Range: bytes 21010-47021/47022
(5)Content-Type: WEB 服务器告诉浏览器自己响应的对象的类型。
例如:Content-Type:application/xml

(6)Age:当代理服务器用自己缓存的实体去响应请求时,用该头部表明该实体从产生到现在经过多长时间了。

(7)Location:用于重定向接收者到一个新URI地址。WEB 服务器告诉浏览器,试图访问的对象已经被移到别的位置了,到该头部指定的位置去取。(redirect 就是利用此location,传回一个状态码及要请求的url,url放在location中)

(8)Proxy-Authenticatee: 代理服务器响应浏览器,要求其提供代理身份验证信息。

(9)Server: WEB 服务器表明自己是什么软件及版本等信息。此域能包含多个产品标识和注释,产品标识一般按照重要性排序。例如:Server:Apache/2.0.61 (Unix)

(10)Vary: WEB服务器用该头部的内容告诉 Cache 服务器,在什么条件下才能用本响应所返回的对象响应后续的请求。假如源WEB服务器在接到第一个请求消息时,其响应消息的头部为:Content-Encoding: gzip; Vary: Content-Encoding那么 Cache 服务器会分析后续请求消息的头部,检查其 Accept-Encoding,是否跟先前响应的 Vary 头部值一致,即是否使用相同的内容编码方法,这样就可以防止 Cache 服务器用自己 Cache 里面压缩后的实体响应给不具备解压能力的浏览器。例如:Vary:Accept-Encoding

(11)Location响应头Location响应头用于重定向接收者到一个新URI地址。

实体
请求消息和响应消息都可以包含实体信息,实体信息一般由实体头域和实体组成。实体头域包含关于实体的原信息,实体头包括
Allow、Content- Base、
Content-Encoding、
Content-Language、
Content-Length、
Content-Location、
Content-MD5、
Content-Range、
Content-Type、
Etag、Expires、
Last-Modified、
extension-header。

extension-header:允许客户端定义新的实体头,但是这些域可能无法未接受方识别。实体可以是一个经过编码的字节流,它的编码方式由Content-Encoding或Content-Type定义,它的长度由Content-Length或Content -Range定义。

Content-Type实体头:用于向接收方指示实体的介质类型,指定HEAD方法送到接收方的实体介质类型,或GET方法发送的请求介质类型 Content-Range实体头

Content-Range实体头:用于指定整个实体中的一部分的插入位置,他也指示了整个实体的长度。在服务器向客户返回一个部分响应,它必须描述响应覆盖的范围和整个实体长度。一般格式:

Content-Range: bytes-unit SP first-byte-pos -last-byte-pos/entity-legth
例如,传送头500个字节次字段的形式:Content-Range: bytes 0-499/1234 如果一个http消息包含此节(例如,对范围请求的响应或对一系列范围的重叠请求),Content-Range表示传送的范围,Content- Length表示实际传送的字节数。

Range:浏览器(比如 Flashget 多线程下载时)告诉 WEB 服务器自己想取对象的哪部分。可以请求实体的一个或者多个子范围。例如,
表示头500个字节:???????? bytes = 0 – 499
表示第二个500字节:?????? bytes = 500 – 999
表示最后500个字节:?????? bytes = -500
表示500字节以后的范围:?? bytes = 500-
第一个和最后一个字节:???? bytes = 0-0 , -1
同时指定几个范围:???????? bytes = 500-600, 601-999
但是服务器可以忽略此请求头,如果无条件GET包含Range请求头,响应会以状态码206(Partial Content)返回而不是以200
例如:Range: bytes=1173546-

ETag:就是一个对象(比如URL)的标志值,就一个对象而言,比如一个 html 文件,如果被修改了,其 Etag 也会别修改,所以,ETag 的作用跟 Last-Modified 的作用差不多,主要供 WEB 服务器判断一个对象是否改变了。比如前一次请求某个 html 文件时,获得了其 ETag,当这次又请求这个文件时,浏览器就会把先前获得的 ETag 值发送给WEB 服务器,然后 WEB 服务器会把这个 ETag 跟该文件的当前 ETag 进行对比,然后就知道这个文件有没有改变了。

Last-Modified:WEB 服务器认为对象的最后修改时间,比如文件的最后修改时间,动态页面的最后产生时间等等。例如:Last-Modified:Tue, 06 May 2008 02:42:43 GMT

Expired:WEB服务器表明该实体将在什么时候过期,对于过期了的对象,只有在跟WEB服务器验证了其有效性后,才能用来响应客户请求。
是 HTTP/1.0 的头部。例如:Expires:Sat, 23 May 2009 10:02:12 GMT(11) Last-Modified:WEB 服务器认为对象的最后修改时间,比如文件的最后修改时间,动态页面的最后产生时间等等。
例如:Last-Modified:Tue, 06 May 2008 02:42:43 GMT

使用Visual Sniffer( 用于拦截通过网络传输的TCP/IP/UDP/ICMP等数据包的一个工具),它可以监测到通过本机的使用HTTP协议交互的数据。

2010十月1

ajax – 隐藏帧技术

AJAX 评论关闭

所谓隐藏帧,指的是将一frame或iframe设置大小为0,显示不出来,在界面上相当于只有一个页面。此时可利用隐藏的帧来做一些事情。可完成不刷新页面的情况下接收数据,因为刷新的是隐藏帧,而隐藏帧大小为0,不可见,故可认为当前页面没有刷新。
??
?实现原理:
????? 操作帧将数据传入给隐藏帧,隐藏帧执行后转入一新的页面,在此新的页面中执行onLoad()方法改变操作帧的数据,从而使得操作帧看起来在不刷新页面的情况下完成数据的更新。

?实现:
?????? 1,定义frame
?????????? <frameset rows=”100%,0″ frameborder=”0″>
?? ??? ??? ??? ?<frame name=”displayFrame” src=”display.htm” noresize=”noresize”>
?? ??? ??? ??? ?<frame name=”hiddenFrame”? src=”about:blank” noresize=”noresize”>
?? ??? ????</frameset>
????????? frameset rows=”100%,0″ ,frameborder=”0″ 0指定隐藏帧大小为0,border为0指定帧集不显示边框,达到完全隐藏的效果。
????
????? 2,在触发后执行(触发可以是输入完成之类)
???????? var name= document.getElementById(“userName”).value;
???????? top.frames["hiddenFrame"].location=”/manage/login.action?name=” + name;
?????????? //通过location就开始执行action,并且指定执行后返回的页面显示到隐藏帧中。

????? 3,返回的页面在加载时改变操作帧的数据,使得操作帧在不刷新情况下获得数据。
????????
??? ? ? ?? window.onload=function(){
?? ??? ??? ?var data= document.getElementById( “msg” );
?? ??? ??? ?top.frames["displayFrame"].displayInfo(data.innerHTML)
?????????????????????? //调用操作帧页面中的displayinfo来调整页面数据。
?? ??? ??? ?}

?? 注:可看出上述采用的是url传参,即GET方法,而GET方法主要用来获得数据,故其参数的大小是有限制的,若想传大量参数,即想利用隐藏帧实现POST方法。方式如下:
???????????? 目前的难点是将大量参数传到隐藏帧中去,但不通过url传参,实现方式:
????????? 1,3参见上的get
????????? 2.不是调用js方法进行location执行,而是正规的在form中提交!!!
???????????
?????????????? <form method=”post” action=”/manage/login.action” target=”hiddenFrame”>????????
? ? ? ? ? ? ? ? ? ?? <input type = “test” name=”userName” />
??????????????????? <input type=”submit” value=”submit”/>
?????????????? </form>
????????? form的target属性用来在指定的位置跳转到新的URL,与<a/>中的target类似
????????? 这里就是在隐藏帧中跳转到指定的URL,完成了POST方法。 (get方法也可如此用)

?? 注:(1)iframe也可如上用。
?? ??? ????iframe,它是在HTML 4.0中引入的。iframe与帧基本是相同的,唯一的区别是iframe可以放在一个未设置帧集的HTML页面中,可以使页面中的任意部分成为一个帧。iframe技术可以在未预先设置帧集的页面中使用,能够更好地适应功能的逐渐添加。
????????? (2)隐藏帧技术的缺点是若页面不存在不能得到错误信息,完全依赖于返回正确的页面,而用XmlHttp可以通过status来判断。
????????? (3)隐藏帧的其它作用:
????????????????? 1)用户登录之后保存用户的信息,因为存在session的话session可能丢失,做一个临时存储区用
????????????????? 2)连续播放背景音乐,而不会随着页面的更换而打断!

2010十月1

ajax-Xpath

AJAX 评论关闭

xml方式在查询某一结点时不太方便,而Xpath提供了在XML文档中查找任意节点的解决方案

XPath表达式由两部分所组成:上下文节点和选择模式。

book[@isbn='0471777781'] 在book结点所有子结点中查找isbn属性为’0471777781′的作者元素

1,IE中的XPath

?? ??? ?微软通过两种方法来实现基于XPath表达式的节点选择。

?? ??? ??? ?????? (1)selectSingleNode()? 它将返回匹配表达式的第一个节点
?? ??? ??? ??? ??? ??? ?? var oFirstAuthor = oXmlDom.documentElement.selectSingleNode(“book/author”);
???????????????? 返回是documentElement的上下文中<book/>元素子节点的第一个<author/>元素

?????????????????? (2)selectNode() 返回一个NodeList,它是所有与该XPath表达式匹配的节点集,要注意的一点是如果文档中没有相匹配的元素,那么还是会返回一个NodeList,只是长度为0。因此在使用NodeList前,最好先判断其长度是否大于0:
?
??????????? var cAuthors = oXmlDom.documentElement.selectNodes(“book/author”);

?? ??? ??? ??? ??? ?if (cAuthors.length > 0) {

????? ??? ??? ??? ??? ? //进行操作

?? ??? ??? ??? ??? ?}

2, Firefox中的XPath

????? Firefox的实现版本允许XPath表达式以相同方式在HTML和XML文档中运行。这里最主要的对象有两个:XPathEvaluator和XPathResult。

XPathEveluator类使用evaluate()方法对给定的XPath表达式进行求值,evaluate()方法包含五个参数:需要计算的XPath表达式字符串,表达式执行的上下文节点,命名空间解析器(处理表达式中命名空间的函数),结果类型(允许10种不同的结果类型)以及包含结果的XPathResult对象(如果参数为null,那么返回新的XPathResult对象)。

var oEvaluator = new XPathEvaluator();

var sXPath = “book/author”;

var oResult = oEvaluator.evaluate(sXPath,oXmlDom.documentElement,null,

?????? XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

?var aNodes = new Array;

?if (oResult != null) {

??? var oElement;

??? while (oElement = oResult.iterateNext()) {

?????? aNodes.push(oElement);

??? }

}

evalute()方法返回的不同结果类型:

q? XPathResult.ANY_TYPE,返回不确定类型。该方法返回的类型由表达式计算的结果决定。

q? XPathResult.ANY_UNORDERED_NODE_TYPE,返回通过singleNodeValue属性访问的某个节点的节点集合,如果没有匹配的节点,那么返回null。返回的节点集合不一定按出现的顺序排列。

q? XPathResult.BOOLEAN_TYPE,返回布尔值。

q? XPathResult.FIRST_ORDERED_NODE_TYPE,返回某个节点的节点集合。该节点使用XPathResult类的singleNodeValue属性访问。返回的节点是文档中第一个出现的节点。

q? XPathResult.NUMBER_TYPE,返回数字值。

q? XPathResult.ORDERED_NODE_ITERATOR_TYPE,返回文档顺序的节点集合(使用iterateNext()方法遍历)。因此,可以容易地访问集合中每个独立的节点。

q? XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,返回文档顺序的节点集合(结果集合的快照)。任何对文档中节点的修改都不影响结果。

q? XPathResult.STRING_TYPE,返回字符串值。

q? XPathResult.UNORDERED_NODE_ITERATOR_TYPE,返回可以遍历的节点集合,然而,节点的顺序与其在文档中出现的顺序不一定一致。

q? XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,返回无序快照节点集合。任何对文档中节点的修改都不影响结果。

最常用的结果类型是XPathResult.ORDERED_NODE_ITERATOR_TYPE:

2010十月1

ajax – XMLDom – Firefox

AJAX 评论关闭

Firefox中的XML DOM

1, 创建
var oXmlDom = document.implementation.createDocument(“”, “books”, null);? //创建了一个XML DOM,其documentElement是<books/>
Firefox中创建一个XML DOM,需要调用document.implementation对象的createDocument()方法。该方法接受三个参数:第一个参数是包含文档所使用的命名空间URI的字符串;第二个参数是包含文档根元素名称的字符串;第三个参数是要创建的文档类型(也称为doctype),事实上,现在Firefox中并不提供针对文档类型的JavaScript支持,所以第三个参数总是为null

2,载入XML数据
(1) 将XML载入XML DOM的方法和微软采用的方法大致相同,只存在一个显著区别:Firefox只支持load()方法。因此,在这两种浏览器中载入外部XML数据的代码是相同的:

oXmlDom.load(“books.xml”);

(2) Firefox不支持readyState属性及onreadystatechange事件处理函数。在Firefox中,支持load事件和onload事件处理函数。在文档完全载入后将触发load事件:

oXmlDom.load(“books.xml”);

oXmlDom.onload = function () {

??? //文档完全载入后的操作

};

(3)在Firefox的XML DOM实现中,并没有loadXML()方法,不过通过Firefox中的DOMParser类可以模拟loadXML()的行为。该类有一个名为parseFromString()的方法,用来载入字符串并解析成文档:

var sXml = “<root><person><name>Jeremy McPeak</name></person></root>”;

var oParser = new DOMParser();

var oXmlDom = oParser.parseFromString(sXml,”text/xml”);


3,获取数据
(1)IE和Firefox中用于获取文档中XML数据的大多数属性和方法是一致的,

Firefox同样支持W3C标准属性,包括childNodes、firstChild、lastChild、nextSibling、nodeName、nodeType、nodeValue、ownerDocument、parentNode和previousSibling。不幸的是,对于微软专有的text和xml属性,Firefox并不支持,不过可以利用其他方法来模拟该属性的行为。如:

function getText(oNode) {

??? var sText = “”;

??? for (var i = 0; i < oNode.childNodes.length; i++) {

?????? if (oNode.childNodes[i].hasChildNodes()) {

?????????? sText += getText(oNode.childNodes[i]);

?????? } else {

?????????? sText += oNode.childNodes[i].nodeValue;

?????? }

??? }

??? return sText;

}

(2)序列化

IE中的xml属性将存放对当前节点包含的所有XML进行序列化的结果。在Firefox中,提供了一个名为XMLSerializer对象来完成这一功能。该对象提供一个使用JavaScript可访问的serializeToString()方法,使用该方法可以对XML数据进行序列化。

function serializeXml(oNode) {

??? var oSerializer = new XMLSerializer();

??? return oSerializer.serializeToString(oNode);

}

serializeXml()函数以XML节点作为参数,创建一个XMLSerializer对象,并将该节点传给serializeToString()方法。该方法将向调用者返回XML数据的字符串表示。

(3)对于节点操作的DOM方法,Firefox与IE大致相同

4,捕获错误

(1)当Firefox遇到错误时,它会将包含错误信息的XML文档载入到XML DOM文档中,当载入错误的XML时,XML DOM对象将会载入一个documentElement为<parsererror/>的错误文档。我们可以通过检查documentElement的tagName属性来确定是否发生错误。如果tagName属性不是parsererror,就可以确定没有发生任何错误。

if (oXmlDom.documentElement.tagName != “parsererror”) {

??? //没有错误发生,进行所需操作

} else {

??? alert(“An Error Occurred”);

}

(2)错误信息的提取

错误信息都包含在错误文档的文本中。如果要通过程序使用这些错误信息,那么首先就要对其进行解析。最简单的方法是使用一个稍长的正则表达式:

var reError = />([\s\S]*?)Location:([\s\S]*?)Line Number (\d+), Column

??? (\d+):<sourcetext>([\s\S]*?)(?:\-*\^)/;

该正则表达式将错误文档分为五个部分:错误消息、发生错误的文件名、行号、该行中发生错误的位置,以及发生错误的源代码。使用正则表达式对象的test()方法可以使用这些信息:

if (oXmlDom.firstChild.tagName != “parsererror”) {

??? //没有错误发生,进行所需操作

} else {

??? var oXmlSerializer = new XMLSerializer();

??? var sXmlError = oXmlSerializer.serializeToString(oXmlDom);

??? var reError = />([\s\S]*?)Location:([\s\S]*?)Line Number (\d+), Column

?????? (\d+):<sourcetext>([\s\S]*?)(?:\-*\^)/;

??? reError.test(sXmlError);

正则表达式捕获到的第一部分数据是错误消息,第二部分是文件名,第三部分是行号,第四部分是行内位置,第五部分是源码。

2010十月1

ajax – XMLDom – IE

AJAX 评论关闭

此项技术同时应用于Web服务器端和客户端,而不仅仅像过去那样只在Web服务器端才提供XML功能

IE中的?XML DOM使用方法

1,创建
?? ?var oXmlDom = new ActiveXObject(“Microsoft.XmlDom”);
?? 同XMLHttp有多个一样, XMLDOM也有多个版本,

q? Microsoft.XmlDom

q? MSXML2.DOMDocument

q? MSXML2.DOMDocument.3.0

q? MSXML2.DOMDocument.4.0

q? MSXML2.DOMDocument.5.0

要找最新版本的,以获得最全功能?

var oXmlDom = createDocument() ;

function createDocument() {

??? var aVersions = [ "MSXML2.DOMDocument.5.0",

?????? "MSXML2.DOMDocument.4.0","MSXML2.DOMDocument.3.0",

?????? "MSXML2.DOMDocument","Microsoft.XmlDom"

??? ];

?

????? for (var i = 0; i < aVersions.length; i++) {

???????? try {

???????????? var oXmlDom = new ActiveXObject(aVersions[i]);

???????????? return oXmlDom;

???????? } catch (oError) {

?????????????? // 不做任何处理

????? }

??? }

??? throw new Error(“MSXML is not installed.”);

}

?

2,IE中载入XML数据 oXmlDom.load(“myxml.xml”);

?MSXML支持两种载入XML的方法:load()loadXML()Load()方法从Web的指定位置载入一个XML文件。?loadXML()?从字符串载入XML,而不是根据指定的文件名载入XML

?(1) load():

?? ?XMLHttp一样,load()方法可以以同步或异步两种模式载入数据。默认情况下,load()方法采用异步模式;如果要采用同步模式,那么必须将MSXML对象的async属性设置为false,代码如下:

oXmlDom.async = false;

?DOM文档支持onreadystatechange事件处理函数,可以监控readyState属性。因为异步模式是默认选项,因此将async属性设置为true是可选的:

oXmlDom.async = true;

?

oXmlDom.onreadystatechange = function () {

??? if (oXmlDom.readyState == 4) {

????? ?//document完全载入后,进行某些操作

??? }

};

?

oXmlDom.load(“myxml.xml”);

(2)?loadXML()

?var sXml = “<root><person><name>Jeremy McPeak</name></person></root>”;

?oXmlDom.loadXML(sXml);

在此,oXmlDom文档将载入sXml变量中包含的XML数据。loadXML()方法不需要像load()方法那样检查readyState属性,也不需要设置async属性,因为该方法并不涉及服务器请求。

3, 创建且载入数据之后可访问数据,方法如下:???

var oRoot = oXmlDom.documentElement;

var oFirstBook = oRoot.firstChild;

var oFirstBook2 = oRoot.childNodes[0];

选择childNodes集合中的第一项将返回根节点的第一个子节点

var sText = oRoot.childNodes[2].text;

获取特定节点或数值的方法

1)text属性(微软特有的属性)可以得到该节点包含的所有文本节点,该属性相当有用。如果没有text属性,访问文本节点必须:var sText = oRoot.childNodes[2].firstChild.nodeValue; text属性将得到包含当前元素及其子节点的所有文本节点的值,而nodeValue属性只能得到当前节点的值。它虽然是个有用的属性,但可能会返回比预期值更多的内容


2)getAttribute()getElementsByTagName()
????
getAttribute()方法将接受一个包含属性名称的字符串型参数,并返回属性值。如果指定的属性不存在,那么返回的值为null
???? var sAttribute = oFirstChild.getAttribute(“isbn”);

?? getElementsByTagName()方法根据其参数所指定的名字,返回子元素的NodeList
?
?? ?var cBooks = oRoot.getElementsByTagName(“book”); 获取文档中所有的<book/>元素


?

XML DOM文档的遍历与HTML DOM的遍历非常类似,因为它们都是节点层次的结构。节点树的最顶部是documentElement属性,包含文档的根元素。使用表4-1中所列出的属性,可以访问文档中任何元素或属性。

4-1 XML DOM属性

???

???

attributes

包含当前节点属性的数组

childNodes

包含子节点数组

firstChild

指向当前节点的第一个子节点

lastChild

指向当前节点的最后一个子节点

nextSibling

返回当前节点的下一个邻居节点

nodeName

返回当前节点的名字

nodeType

指定当前节点的XML DOM节点类型

nodeValue

包含当前节点的文本

ownerDocument

返回文档的根元素

parentNode

指向当前节点的父节点

previousSibling

返回当前节点的前一个邻居节点

text

返回当前节点的内容或当前节点及其子节点的文本(只有IE才支持的属性)

xml

以字符串返回当前节点及其子节点的XML(只有IE才支持的属性)

4,结点操作
?

l?? 创建节点

使用DOM方法可以创建多种不同的节点。第一种就是用createElement()方法创建的元素。向该方法传入一个参数,指明要创建的元素标签名称,并返回一个对XMLDOMElement的引用:

var oNewBook = oXmlDom.createElement(“book”);

var oNewBookText = oXmlDom.createTextNode(“Professional .NET 2.0 Generics”);

oNewBook.appendChild(oNewBookText);

oNewBook.setAttribute(“isbn”,”0764559885″);

oXmlDom.documentElement.appendChild(oNewBook);

这段代码创建一个新的<book/>元素,并通过appendChild()方法把它添加到documentElement中。appendChild()方法添加由其参数指定的新元素,并且将其作为最后一个子节点

l?? 删除、替换和插入节点

删除
removeChild()方法正是用来实现该功能的。该方法包含一个参数:要删除的节点。例如,要从文档中删除第一个<book/>元素,则可以使用以下代码:var oRemovedChild = oRoot.removeChild(oRoot.firstChild);

替换
通过replaceChild()方法来实现,该方法返回被替换的节点:
var oReplacedChild = oRoot.replaceChild(oRemovedChild, oRoot.childNodes[2]);
replaceChild()方法接受两个参数:新添加的节点和将被替换的节点

插入节点
nsertBefore()方法将该节点插入到某个节点之前:
oRoot.insertBefore(oReplacedChild, oRoot.lastChild);

这段代码将之前被替换的节点插入到最后一个<book/>元素的前面

5,异常捕获

XML数据的载入过程中,可能会由于不同的原因而抛出错误。例如,外部的XML文件找不到,或者XML的格式不正确。为了处理这些情况,MSXML提供了一个包含错误信息的parseError对象。对于每个由MSXML创建的XML DOM文档对象而言,该对象都是其所属的属性值之一。

可以通过parseError对象公开的与整数0进行比较的errorCode属性来检查错误。errorCode属性可以是正数也可以是负数,只有当errorCode为0时才表示没有错误发生。

if (oXmlDom.parseError.errorCode != 0) {

??? alert(“An Error Occurred: ” + oXmlDom.parseError.reason);

} else {

??? //XML载入成功后的操作

}

若想进一步了解错误信息,可通过使用parseError对象的reason属性来获取错误出现的原因。

parseError对象提供了以下属性,

q? errorCode:错误代码(长整型);

q? filePos:在文件中发生错误的位置(长整型);

q? line:包含错误的代码行的行号(长整型);

q? linePos:在特定行中发生错误的位置(长整型);

q? reason: 错误的原因(字符串型);

q? srcText: 发生错误的代码行内容(字符串型);

q? url: XML文档的URL(字符串型)。


6,在IE中获取XML数据

要获取XML数据只需使用一个属性,即xml。该属性将对当前节点的XML数据进行序列化。序列化(serialization是将对象转换成简单的可存储或可传输格式的过程。xml属性将XML转换成字符串形式,包括完整的标签名称、属性和文本:

var sXml = oRoot.xml;

alert(sXml);

这段代码从文档元素开始序列化XML数据,并将其作为参数传递给alert()方法。下面就是部分已序列化的XML

<books><book isbn=”0471777781″>Professional Ajax</book></books>

已序列化的数据可以载入到另一个XML DOM对象,发送到服务器,或者传给另一个页面。通过xml属性返回的已序列化XML数据,取决于当前节点。如果是在documentElement节点使用xml属性,那么将返回整个文档的XML数据;如果只是在<book/>元素上使用它,那么将返回该<book/>元素所包含的XML数据。

xml属性是只读属性。如果希望往文档中添加元素,那么必须使用DOM方法来实现。

2010十月1

ajax – XmlHttp

AJAX 评论关闭

XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向http服务器发送请求并使用微软XML文档对象模型Microsoft? XML Document Object Model (DOM)处理回应。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面, ajax主要通过XmlHttp来实现功能。

XmlHttp应用过程:

??? 1,创建。
???????? 因浏览器的不同,IE,Mozilla Firefox之类提供的XmlHttp创建方式也随之不同,故要根据用户传来的浏览器信息来相应进行选择相应的创建方式。而浏览器信息在客户端请求时是存放在 User-Agent中,故可通过读取其来创建,或者判断XMLHttpRequest,ActiveXObject对象是否存在来判别浏览器。

?? IE 的XmlHttp:MSXML2.XMLHTTP.6.0,?? MSXML2.XMLHTTP.5.0,?
???????????????????????? MSXML2.XMLHTTP.4.0? ,MSXML2.XMLHTTP.3.0,?
????????????????????? ?? MSXML2.XMLHTTP,??????????? Microsoft.XMLHTTP
? 上面6种适用于IE6以下版本的浏览器(IE6,IE5 )
? 对于每一款版本的浏览器对应的MSXML2.XMLHTTP可能有好几个版本(Miscrosoft在IE5才应用此技术,而IE5对应的操作系统是windows 98 故以上六种可解决多数IE浏览器),上面的六种版本,对于IE5,IE6都是支持的,也就是说,任意一个都可用来创建XmlHttp,一般来说,新的版本会比旧的版本错误更少,性能更好。应该优先考虑使用最新的版本,先试6.0,若用户没有此升级补丁,再试5.0….
?对于IE7以上的版本Microsoft支持与其它浏览器创建相同的方式,即通过:objXmlHttp=new XMLHttpRequest() 完成。
?
?创建方法如下:
???????? var xmlHttp;
???????? function GetXmlHttpObject(handler) {

? ? ? ?? ??? //针对不同的浏览器建立XMLHttpRequest对像?
?? ? ? ? ? ? if(window.XMLHttpRequest){??
???????????? //若存在内置的XMLHttpRequest说明是IE7,及其它浏览器

???????? ?? //针对非IE多款浏览器,Firefox,operia及IE7
????????? ? xmlHttp=new XMLHttpRequest();?

????? ????? ? ?//此if语句主要针对部分版本的Mozillar浏览器的xml bug?
??? ?? ????? ?if(xmlHttp.overrideMimetype){?
????????? ?? ?? ??xmlHttp.overrideMimeType(“text/xml”);?
????????????? ? }?
????? ??? ? }?
?? ?? ??? ?else if(window.ActiveXObject){?
??????????????? //若存在ActiveXObject对象,证明一定是IE6以下的浏览器
??? ?? ??? ??? ?//针对IE6.0及以下的IE浏览器?
??????????? ??? ? var MSXML=['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',?
?????????????????????? 'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0',?
?????????????????????? 'MSXML2.XMLHTTP','Microsoft.XMLHTTP'];?

?????????? ??? //for语句检测与MSXML列表对应的系统MSXML版本?
???? ??? ??? ? for(var n = 0; n < MSXML.length; n ++){???????????
???? ??? ??? ?? ?? try{//如果找到则创建该对象?
???????????????? ?? ?? ?xmlHttp = new ActiveXObject(MSXML[n]);?
??????????????? ??? ?? ?break;?
??????????????? ??? ?? }catch(e){ //抛出说明没有当前版本的补丁,试下一个低级版本for…
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }?
???????????? ?? ?? }?
????????????
???????????? if ( xmlHttp == null ){
?? ??? ??? ?????? alert(“不能建立XMLHttpRequest对象,浏览器不是IE,FireFox等通用浏览器或IE的??????????????????????????????????? WINDOWS\system32msxml2.dll 文件不存在”);
?????????????? }
???????? ? }?

??? ??? ?}

2,操作:客户端请求, 服务器响应并返回结果。

? (1)请求:
????? 1)设置接受服务器响应结果的函数(当open的async为true时有效)
?????????? xmlHttp.onreadystatechange=handler?? //handler为自定义的处理函数的名称,不要括号

?????????? onreadystatechange:当HTTP请求的状态改变时调用handler方法,HTTP 请求有5种状态
?????????? readyState有5种状态,分别用数字的 0 到 4 来表示。
?? ??? ??? ??? ?0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建(未调用open()之前)或已被 abort() 方法重置。
?? ??? ??? ??? ?1 Open open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。
?? ??? ??? ??? ?2 Sent Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。
?? ??? ??? ??? ?3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。
?? ??? ??? ??? ?4 Loaded HTTP 响应已经完全接收。

?? ??? ??? ?注:onreadystatechange事件句柄不同的浏览器能处理的状态并不一致,IE和FireFox能处理1到4,而 Safari能处理2到4的状态,Opera 能处理3、4两中状态。0的状态基本没什么用,因为创建了XMLHttpRequest 对象后都会马上调用open() 方法,这时候状态就变成1了,当然除非你要判断对象是否已经被 abort() 取消,可是这样的情况依然很少。大部分情况下判断是不是4(已经接受完成)这个状态就够了。
??????????? function Mycallback(){??? //自定义的回调函数
???????????? if(xmlhttp.readyState == 4){?
???????????????? if(xmlhttp.status == 200){?
????????
???????????????????? resultNode.innerHTML = xmlhttp.responseText;?
???????????????? } else{?
???????????????????? resultNode.innerHTML = “服务器故障”;?
??????????????? }?
???????????? }?
??????? }
? ? ? ?
?? 注:status 说明:由服务器返回的 HTTP 状态代码。
???????? statusText 说明:这个属性用名称而不是数字指定了请求的 HTTP 的状态代码
???????? xmlhttp.status == 200 查看数据在在网络传输过程的状态,xmlhttp.status 等于200时表示传输过程完整没有错误,其它的情况可能有在网络传输过程中出错或者指定的地址失效.常用的状态码有:
????? ? ◆200 (OK): 找到了该资源,并且一切正常。
??? ?? ?◆304 (NOT MODIFIED): 该资源在上次请求之后没有任何修改。这通常用于浏览器的缓存机制。
????? ? ◆ 401 (UNAUTHORIZED): 客户端无权访问该资源。这通常会使得浏览器要求用户输入用户名和密码,以登录到服务器。
??? ?? ?◆403 (FORBIDDEN): 客户端未能获得授权。这通常是在401之后输入了不正确的用户名或密码。
??? ?? ?◆404 (NOT FOUND): 在指定的位置不存在所申请的资源。

????? 2)建立与服务器的连接,初始化 HTTP 请求参数,例如 URL 和 HTTP 方法,但是并不发送请求
??????????? xmlHttp.open(“GET”, url , true)
??????????
??????????? oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);

??????????? ?? ?参数
?? ??? ??? ??? ??? ?bstrMethod:http方法,例如:POST、GET、PUT及PROPFIND。大小写不敏感。
?? ??? ??? ??? ??? ?bstrUrl? 请求的URL地址,可以为绝对地址也可以为相对地址。
?? ??? ??? ??? ??? ?varAsync[可选]: 布尔型,指定此请求是否为异步方式,默认为true。如果为真,当状态改变时会调用?? ??? ??? ??? ?onreadystatechange属性指定的回调函数。也就是说当true时定义接受服务器响应结果的函数–回调函数才有效
???????????? 因ajax主要利用异步,同步直接提交表单就可完在,不需ajax,故可为open( “GET”,url ) 默认为true
?? ??? ??? ??? ??? ?bstrUser[可选] :如果服务器需要验证,此处指定用户名,如果未指定,当服务器需要验证时,会弹出验证窗口。
?? ??? ??? ??? ??? ?bstrPassword[可选]:验证信息中的密码部分,如果用户名为空,则此值将被忽略。
?????
? ?? 3)执行
?????????? xmlHttp.send (varBody? );?? varBody:欲通过此请求发送的数据。
?????????? 此方法的同步或异步方式取决于open方法中的bAsync参数,如果bAsync == False,此方法将会等待请求完成或者超时时才会返回,如果bAsync == True,此方法将立即返回
?????????? varBody为传送的数据,当open方法为get时,参数在url中指定,当方式为post时,参数应存放在请求数据中,目前自定义发送存入请求数据的过程就是用varBody指定。可知当为get时,send传空即:xmlHttp.send( “” );
????????? 如:
????????? xmlHttpRequest.open(“POST”,”login.jsp”,true);
 ??  xmlHttpRequest.setRequestHeder(“Content-Type”,”application/x-www-form-urlencoded;charset=UTF-8″);
????????????????? //使用send方法传递参数使用的是POST方法,需要设定Content-Type头信息,模拟HTTP POST方法发送 一个表单,这样服务器才会知道如何处理上传的内容。
  ?? xmlHttpRequest.send(“user=”+username+”&pwd=”+password);
????????
????? 注:xmlHttp.send(“”);如果写成xmlHttp.send(); 或 xmlHttp.send(null);FireFox不支持。

? (2) 服务器响应并返回结果
??????????? 编写处理函数,并将结果返回
?????????????? doGet(){
??????????? response.setContentType(“text/html;charset=GB2312″);?
? ? ? ? ? ? PrintWriter out = response.getWriter();?
??????????? out.println(“<b>hello ajax</b>”);????
? ? ? ? ? //以上是servlet形式,需要手动设置返回格式,而在struts中用return success转到某一页面,此页面只是信? 息。因为当前会接受这些信息,而不是用来转到某一页面。 ?????????????????
}
????????? 在回调函数中接收:
?????????????? document.getElementById(“txtHint”).innerHTML = xmlhttp.responseText;?
?????? ? 属性 : responseText? 服务器返回的文本内容
????????????????? responseXML 服务器返回的兼容DOM的XML内容
????????????????? statusText???? 服务器返回状态码的文本信息

2010十月1

ajax 实现数据库数据的读取,因与页面加载异步,故不影响页面打开速度。实现了js操作数据库的操作。

AJAX 评论关闭
页面加载时也会执行initIndex()函数,并会执行完毕,但因采用的是异步方式,数据读取与函数执行分开,故数据读取所用的时间不包含在页面加载的时间之内,提高了速度。实现了静态与动态的分离,时间的分离!

以下程序兼容Firefox 与 IE

1,在页面加载时调用initIndex();
  

2, JS
var projecturl = "WebService.asmx/";
function InitIndex()
{
    //发货记录
      var record = document.getElementById("spanShipRecord");
      getString(record,"get", "ShipRecord", "num=8");  //传入页面中将要显示数据的控件,一般为一个div,或span.
      var knowledge = document.getElementById("loseweightknowledge");
      getString( knowledge,"get", "News", "sortId=1&&num=10");
      var words = document.getElementById("guestWords");
      getString( words,"get", "GuestWords", "num=10");
}

function getString(record,methods,functions,key)
{

    url = "WebService.asmx/"+functions+"?"+key;  //通过此来执行连接,转到页面进行处理,数据库操作就在页面中完成,可转到java中的action
    var xmlhttp = false;
    try
    {
        xmlhttp = new XMLHttpRequest();
    }
    catch (trymicrosoft)
    {
        try
        {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (othermicrosoft)
        {
            try
            {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (failed)
            {
                xmlhttp = false;
            }
        }
    }

    if (!xmlhttp)
    {
        alert("Error initializing XMLHttpRequest!");
    }

    xmlhttp.open(methods, url,true); //true代表异步传输,结果在onreadystatechange的回调函数中进行处理。
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xmlhttp.onreadystatechange= function (){

    if(xmlhttp.readyState == 4){ 

             if(xmlhttp.status == 200){ 

     if (window.ActiveXObject)
    {
        dom = new ActiveXObject("Microsoft.XMLDOM");
        dom.async = true;
        dom.resolveExternals = false;
        dom.load(xmlhttp.responseBody);
        //dom = xmlhttp.responseXML;
        //dom.load(xmlhttp.responseXML);
    }
    else if (document.implementation && document.implementation.createDocument)
    {
        var parser=new DOMParser();
        dom=parser.parseFromString(xmlhttp.responseText,"text/xml");
    }

    var nodes = dom.documentElement.childNodes;  //获取页面中操作完之后返回的页面,会自动转成xml
    if ( nodes[0] != undefined){
                record.innerHTML = nodes[0].nodeValue;  //record.innerHTML显示结果。
            }
                       } else{
                     record.innerHTML = "服务器故障";
                }
             }
    }

    xmlhttp.send("");      

}

3, 页面处理数据:通过上面的open 一个url,执行其中的函数,读取数据库中的数据。
 public string ShipRecord(int num)
    {
        StringBuilder sb = new StringBuilder();
        sb.Append("


");

        return sb.ToString();
    }