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

基本语法

jQuery 评论关闭

1,$:$(“a”) 是一个jQuery选择器(selector),在这里,它选择所有的a标签,得到一个对象集合,$号是 jQuery “类”(jQuery “class”)的一个别称,因此$()构造了一个新的jQuery 对象(jQuery object)。相当于document.getElementsByTagName(“a”),这是一个函数!,$号是 jQuery “类”(jQuery “class”)的一个别称,因此$()构造了一个新的jQuery 对象(jQuery object)。函数 click() 是这个jQuery对象的一个方法,它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法.
(1):$(“div > p”) :找div下的p元素,如

one

two

three

会返回

two

$(“div > p”)[0]:第一个, $(“p”):直接找到段落P,即无符号.#时直接找页面的类型,又如$(“div”)
(2):$(document.body).background( “black” ); 即()可除了字符串之外,还可以是dom对象
(3):选择ID $(“#orderedlist”) 前面加个#号即可,(如CSS),相当于getElementById(“”),$(“#orderedlist li”) 打到orderdilist下的li元素
(4) : $(“.wrdLatest:last”);$得到一个集合,得到class为.wrdLatest的所有集合,last指示得到取出最后一个元素
(5):*用法 定义:匹配所有元素 多用于结合上下文来搜索。
实例:查看页所有元素的数量 代码:$(“*”).length; //点击按钮四将执行这句代码
(6)定义:将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。
:$(“.red_test,#btn_5″)

2, 执行方法:通过$得到元素,在方法中直接写function: $(“#orderedlist”).click( function(){$(“#orderedlist”).addClass(“red”);} )
每一个onXXX事件都有效,如onclick,onchange,onsubmit等,都有jQuery等价表示方法(onXXX,所以都改成了XXX,去掉了on)

3,为得到的元素增加CSS操作:
(1) CSS属性: $(this).css({‘background-color’ : ‘yellow’, ‘font-weight’ : ‘bolder’}); 得到某一属性:var color = $(this).css(“background-color”);
或:$(this).css(“color”,”blue”);
(2 ) addClass: $(this).addClass(“green”); removeClass
(3):height( ):得到宽度,height(100);设置宽度 类似还有:width( ), html()(得到元素内部html)
(4):$(“#checkbox_id”).attr(“checked”); //获取一个CheckBox的状态(有没有被选中,返回true/false)
$(“#checkbox_id”).attr(“checked”,true); //设置一个CheckBox的状态为选中(checked=true)
$(“.wrdLatest1:last”).attr(“id”)
$(“input[name='checkbox_name'][checked]“); //选择被选中CheckBox元素的集合

4,遍历元素:each:$(“#orderedlist”).find(“li”).each(function(i) { $(this).html( $(this).html() + ” BAM! ” + i ); //$(“#orderedlist”).find(“li”)是一个集合,遍历之
each之前是一个集合。

5,查找元素:find,filter(),not() : $(“li”).not(“:has(ul)”).css(“border”, “1px solid black”);
选择上一个或者下一个元素:$(this).next(),parents(“p”)

6,jQuery常用技巧

1、关于页面元素的引用

通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换

只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。

普通的dom对象一般可以通过$()转换成jquery对象。

如:$(document.getElementById(”msg”))则为jquery对象,可以使用jquery的方法。

由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。

如:$(”#msg”)[0],$(”div”).eq(1)[0],$(”div”).get()[1],$(”td”)[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。

以下几种写法都是正确的:

$(”#msg”).html();$(”#msg”)[0].innerHTML;$(”#msg”).eq(0)[0].innerHTML;$(”#msg”).get(0).innerHTML;
3、如何获取jQuery集合的某一项
对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而 get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个

元素的内容。有如下两种方法:

$(”div”).eq(2).html(); //调用jquery对象的方法$(”div”).get(2).innerHTML; //调用dom的方法属性
4、同一函数实现set和get
jQuery中的很多方法都是如此,主要包括如下几个:

$(”#msg”).html(); //返回id为msg的元素节点的html内容。$(”#msg”).html(”new content”);//将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content$(”#msg”).text(); //返回id为msg的元素节点的文本内容。$(”#msg”).text(”new content”);//将“new content” 作为普通文本串写入id为msg的元素节点内容中,页面显示new content$(”#msg”).height(); //返回id为msg的元素的高度$(”#msg”).height(”300″); //将id为msg的元素的高度设为300$(”#msg”).width(); //返回id为msg的元素的宽度$(”#msg”).width(”300″); //将id为msg的元素的宽度设为300$(”input”).val(”); //返回表单输入框的value值$(”input”).val(”test”); //将表单输入框的value值设为test$(”#msg”).click(); //触发id为msg的元素的单击事件$(”#msg”).click(fn); //为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有着两种调用方法。

5、集合处理功能对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理,jquery已经为我们提供的很方便的方法进行集合的处理。

包括两种形式:

$(”p”).each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})//为索引分别为0,1,2的p元素分别设定不同的字体颜色。$(”tr”).each(function(i) {this.style.backgroundColor=['#ccc','#fff'][i%2]})//实现表格的隔行换色效 果$(”p”).click(function(){alert($(this).html())})//为每个p元素增加了click事件,单击某个p 元素则弹出其内容
6、扩展我们需要的功能

$.extend({min: function(a, b){return a < b?a:b; },max: function(a, b){return a > b?a:b; }}); //为jquery扩展了min,max两个方法
使用扩展的方法(通过“$.方法名”调用):

alert(”a=10,b=20,max=”+$.max(10,20)+”,min=”+$.min(10,20));
7、支持方法的连写
所谓连写,即可以对一个jquery对象连续调用各种不同的方法。例如:

$(”p”).click(function(){alert($(this).html())}).mouseover(function(){alert(’mouse over event’)}).each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]});
8、操作元素的样式
主要包括以下几种方式:

$(”#msg”).css(”background”); //返回元素的背景颜色$(”#msg”).css(”background”,”#ccc”) //设定元素背景为灰色$(”#msg”).height(300); $(”#msg”).width(”200″); //设定宽高$(”#msg”).css({ color: “red”, background: “blue” });//以名值对的形式设定样式$(”#msg”).addClass(”select”); //为元素增加名称为select的class$(”#msg”).removeClass(”select”); //删除元素名称为select的class$(”#msg”).toggleClass(”select”); //如果存在(不存在)就删除(添加)名称为select的class

9、完善的事件处理功能
jQuery已经为我们提供了各种事件处理方法,我们无需在html元素上直接写事件,而可以直接为通过jquery获取的对象添加事件。$(”#msg”).click(function(){alert(”good”)}) //为元素添加了单击事件$(”p”).click(function(i){this.style.color= ['#f00','#0f0','#00f'][ i ]})//为三个不同的p元素单击事件分别设定不同的处理
jQuery中几个自定义的事件:
(1)hover(fn1,fn2):一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。

//当鼠标放在表格的某行上时将class置为over,离开时置为out。$(”tr”).hover(function(){$(this).addClass(”over”);},function(){$(this).addClass(”out”);});
(2)ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

$(document).ready(function(){alert(”Load Success”)})//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价
(3)toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。

// 每次点击时轮换添加和删除名为selected的class。$(”p”).toggle(function() {$(this).addClass(”selected”);},function(){$(this).removeClass(”selected”);});
(4)trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如:

$(”p”).trigger(”click”); //触发所有p元素的click事件
(5)bind(eventtype,fn),unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中(添加)删除绑定的事件。例如:

$(”p”).bind(”click”, function(){alert($(this).text());}); //为每个p元素添加单击事件$(”p”).unbind(); //删除所有p元素上的所有事件$(”p”).unbind(”click”) //删除所有p元素上的单击事件
10、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。

11、几个有用的jQuery方法

$.browser.浏览器类型:检测浏览器类型。有效参数:safari, opera, msie, mozilla。如检测是否ie:$.browser.isie,是ie浏览器则返回true。

$.each(obj, fn):通用的迭代函数。可用于近似地迭代对象和数组(代替循环)。如

$.each( [0,1,2], function(i, n){ alert( “Item #” + i + “: ” + n ); });
等价于:

var tempArr=[0,1,2];for(var i=0;i
也可以处理json数据,如

$.each( { name: “John”, lang: “JS” }, function(i, n){ alert( “Name: ” + i + “, Value: ” + n ); });
结果为:

Name:name, Value:JohnName:lang, Value:JS
$.extend(target,prop1,propN):用一个或多个其他对象来扩展一个对象,返回这个被扩展的对象。这是jquery实现的继承方式。
如:

代码
$.extend(settings, options);//合并settings和options,并将合并结果返回settings中,相当于options继承setting并将继承结 果保存在setting中。var settings = $.extend({}, defaults, options);//合并defaults和options,并将合并结果返回到setting中而不覆盖default内容。
可以有多个参数(合并多项并返回)

$.map(array, fn):数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中,并返回生成的新数组。
如:

var tempArr=$.map( [0,1,2], function(i){ return i + 4; });tempArr内容为:[4,5,6]var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });tempArr内容为:[2,3]$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。如:$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]$.trim(str):删除字符串两端的空白字符。如:$.trim(” hello, how are you? “); //返回”hello,how are you? ”

12、解决自定义方法或其他类库与jQuery的冲突
很多时候我们自己定义了$(id)方法来获取一个元素,或者其他的一些js类库如prototype也都定义了$方法,如果同时把这些内容放在一起就会引起变量方法定义冲突,Jquery对此专门提供了方法用于解决此问题。
使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用 Jquery的时候只要将所有的$换成jQuery即可,如原来引用对象方法$(”#msg”)改为jQuery(”#msg”)。
如:jQuery.noConflict();// 开始使用jQueryjQuery(”div p“).hide();// 使用其他库的 $()$(”content”).style.display = ‘none’;

2010十月1

jQuery教程-函数学习之AJAX部分

jQuery 评论关闭

函数$.ajax的解析

函数:$.ajax(properties)
功能:用一个http请求访问一个远程页面
返回:XMLHttpRequest
参数:

(String)? url  请求地址;
(String)? type?? 请求类型(”GET”,”POST”);
(String)? dataType:从服务器端返回的数据类型(”xml”,”html”,”script”,”json”);
(Boolean)? ifModified:根据Last-Modified header判断返回内容是否改变;
(Number)? timeout:请求超时;
(Boolean)? global:对此次请求是否引起全局的ajax事件出来,默认true;
(Function)? error:错误处理函数;
(Function)? complete:请求完成后的处理函数;
(Object|String)? data:发送到服务器端的数据;
(String) contentType :默认”application/x-www-form-urlencoded”;
(Boolean)? processData :传输到服务器端的数据默认被转换到query string中以适合默认”application/x-www-form-urlencoded”方式,如果你想以DOMDocuments方式传输数据,就将该选项设为false;
(Boolean)? aysnc:是否异步传输,默认为true;
(Function)? beforeSend:请求前响应函数;

例子:(加载并且执行一个js文件)

jQuery Code

$.ajax({
type: “GET”,
url: “test.js”,
dataType: “script”
})

向服务器保存数据并且响应用户的动作完成

jQuery Code

$.ajax({
type: “POST”,
url: “some.php”,
data: “name=John&location=Boston”,
success: function(msg){
alert( “Data Saved: ” + msg );
}
});

jQuery Code

var html = $.ajax({
url: “some.php”,
async: false
}).responseText;

jQuery Code

var xmlDocument = [create xml document];
$.ajax({
url: “page.php”,
processData: false,
data: xmlDocument,
success: handleResponse
});

函数$.ajaxSetup的解析

函数:$.ajaxSetup(settings),$.ajaxTimeout(time)
功能:设定请求的一些参数
返回: undefined

例子:

$.ajaxSetup( {
url: “/xmlhttp/”,
global: false,
type: “POST”
} );
$.ajaxTimeout( 5000 );

函数$.get的解析

函数:$.get(url, params, callback),$.getIfModified(url, params, callback),
$.getJSON(url, params, callback),$.getScript(url, callback)
功能:get方式提交数据

例子:

$.get(”test.cgi”,
{ name: “John”, time: “2pm” },
function(data){
alert(”Data Loaded: ” + data);
});

函数$.post

函数:$.post(url, params, callback)

功能:post方式提交数据

例子:

$.post(”test.cgi”,
{ name: “John”, time: “2pm” },
function(data){
alert(”Data Loaded: ” + data);
});

函数ajaxComplete的解析

函数:ajaxComplete(callback),ajaxComplete(callback),ajaxSend(callback)

ajaxStart(callback),ajaxStop(callback),ajaxSuccess(callback)

功能:XMLHttpRequest状态改变过程中各个响应处理函数

例子:

$(”#msg”).ajaxComplete(function(request, settings){
$(this).append(”<li>Request Complete.</li>”);
});
$(”#msg”).ajaxSuccess(function(request, settings){
$(this).append(”<li>Successful Request!</li>”);
});
$(”#loading”).ajaxStop(function(){
$(this).hide();
});
$(”#msg”).ajaxSend(function(request, settings){
$(this).append(”<li>Starting request at ” + settings.url + “</li>”);
});

函数load的解析

函数:load(url, params, callback),loadIfModified(url, params, callback)

功能:加载html内容
返回:jQuery对象
参数:同get和post方式提交
例子:

代码

//jQuery Code
$(”#feeds”).load(”feeds.html”);
Before
<div id=”feeds”></div>
Result:
<div id=”feeds”><b>45</b> feeds found.</div>

//jQuery Code
$(”#feeds”).load(”feeds.html”,
{limit: 25},
function() { alert(”The last 25 entries in the feed have been loaded”); }

函数serialize的解析

函数:serialize()

功能:将表单元素和值序列化成string
返回:String
例子:

jQuery Code
$(”input[@type=text]“).serialize();
Before
<input type=’text’ name=’name’ value=’John’/>
<input type=’text’ name=’location’ value=’Boston’/
Result
name=John&location=Boston

2010十月1

$()使用

jQuery 评论关闭

jQuery-Selectors(选择器)的使用(一、基本篇)

本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法,我将以实例方式进行讲述,以简单,全面为基础,不会涉及很深,我的学习方法:先入门,后进阶!
本系列文章分为:基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。
您对本系列文章有任何建议或意见请发送到邮箱:sjzlgt@qq.com
由于是第一次写技术性系列文章,难免会出错或代码BUG,欢迎指出,在此谢过!
您可以到jQuery官网来学习更多的有关jQuery知识。

1. #id用法
定义:根据给定的ID匹配一个元素。
返回值:Element
参数:id (String) : 用于搜索的,通过元素的 id 属性中给定的值
实例:将ID为”div_red”的DIV的边框改为红色
代码:$(“#div_red”).css(“border”,”red 2px solid”); //点击按钮一将执行这句代码
DIV ID=”div_red”

扩展:#id中的id可以是页面任何元素的id,如input,btuuon,div,table,span等等

2. element用法
定义:根据给定的元素名匹配所有元素。
返回值:Array<Element>
参数:element (String) : 一个用于搜索的元素。指向 DOM 节点的标签名。
实例:将页面<P>标记内的文字颜色改为红色
代码:$(“p”).css(“color”,”red”); //点击按钮二将执行这句代码

P标记1 ID=”p1″

P标记2 无ID

扩展:参数值可以是页面任何元素,如div,button,div,table,tr,td,p,h1,span,input

3. .class用法
定义:根据给定的类(样式名称)匹配元素。
返回值:Array<Element>
参数:class (String) 一个用以搜索的类(样式名称)。一个元素可以有多个类(样式名称),只要有一个符合就能被匹配到。
实例:将页面所有引用了”.red_test”样式的元素背景颜色改为蓝色
代码:$(“.red_test”).css(“background-color”,”blue”); //点击按钮三将执行这句代码
DIV ID=”div_red_1″ calss=”red_test”
DIV ID=”div_red_2″ 无class

SPAN ID=”span_red_1″ calss=”red_test”

扩展:可以看一下jQuery官网上Selectors/.class的实例。

4. *用法
定义:匹配所有元素 多用于结合上下文来搜索。
返回值:Array<Element>
实例:查看页所有元素的数量
代码:$(“*”).length; //点击按钮四将执行这句代码
扩展:可以看一下jQuery官网上Selectors/*的实例。

5. selector1,selector2,selectorN用法
定义:将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。
返回值:Array<Element>
参数:selector1 (Selector) : 一个有效的选择器 selector2 (Selector) : 另一个有效的选择器 selectorN (Selector) : (可选) 任意多个有效选择器
实例:将页面上所有引用名称为”li_test”样式的<Li>元素和ID为”li_red”的<Li>元素的边框改为绿色,宽度为5px
代码:$(“.red_test,#btn_5″).css(“border”,”5px solid Green”); //点击按钮五将执行这句代码

* Li
* Li id=”li_red”
* Li
* Li
* Li
* Li

jQuery选择器的使用灵活度非常高,至此,您可以利用本文中的四种选择器和上一篇中所讲的选择器组合并看效果,相信你会看到足以令你震撼的结果!
1. ancestor descendant用法
定?? 义:在给定的祖先元素下匹配所有的符合条件后代元素
返回值:Array
参?? 数:ancestor (Selector):任何有效选择器 descendant (Selector):用以匹配元素的选择器,并且它是第一个选择器的后代元素
实?? 例:将ID为”div_1″的DIV中所有的Input元素的背景色改为红色
代码: $(“div_1 input”).css(“background-color”,”red”); //点击按钮一将执行这句代码

DIV ID=”div_1″
DIV ID=”div_2″
DIV ID=”div_3″
DIV ID=”div_4″

DIV ID=”div_5″
DIV ID=”div_5_1″

注意:本实例请与第2个用法的实例作对比,看其控制范围!
2. parent > child用法
定?? 义:在给定的父元素下匹配所有的子元素
返回值:Array
参?? 数:parent (Selector):任何有效选择器 child (Selector): 用以匹配元素的选择器,并且它是第一个选择器的子元素
实?? 例:将ID为”div_a1″的DIV中所有的Input元素的背景色改为红色
代码: $(“#div_a1 > input”).css(“background-color”,”red”); //点击按钮二将执行这句代码

DIV ID=”div_a1″
DIV ID=”div_a2″
DIV ID=”div_a3″
DIV ID=”div_a4″

DIV ID=”div_a5″
DIV ID=”div_a5_1″
3. prev + next用法
定?? 义:匹配所有紧接在 prev 元素后的 next 元素
返回值:Array
参?? 数:prev (Selector):任何有效选择器 next (Selector):一个有效选择器并且紧接着第一个选择器
实?? 例:将ID为”div_b1″的DIV中所有span元素后紧跟的input元素的背景色改为红色
代码:$(“#div_b1 span + input”).css(“background-color”,”red”); //点击按钮三将执行这句代码

DIV ID=”div_b1″
span

DIV ID=”div_b2″
span
DIV ID=”div_b3″
span
DIV ID=”div_b4″
span

DIV ID=”div_b5″
DIV ID=”div_b5_1″ span

注意:第一个选择器我用了ancestor descendant用法,您也可以尝试其它用法。本例请与下面第4点的实例作对比并看效果!
4. prev ~ siblings用法
定?? 义:匹配 prev 元素之后的所有 siblings 元素
返回值:Array
参?? 数:prev (Selector):任何有效选择器 siblings (Selector):一个选择器,并且它作为第一个选择器的同辈
实?? 例:将ID为”div_c1″的DIV中所有与span元素之后平级的input元素的背景色改为红色
代码:$(“#div_c1 span ~ input”).css(“background-color”,”red”); //点击按钮四将执行这句代码

DIV ID=”div_c1″
span

DIV ID=”div_c2″
span
DIV ID=”div_c3″
span
DIV ID=”div_c4″
span

DIV ID=”div_c5″
DIV ID=”div_c5_1″ span

注意:DIV ID=”div_c1″ 和 ID=”div_c4″中的span元素前的input并未改变背景色,因为第二个选择器查找第一个选择器之后的元素

1. :first用法
定?? 义:匹配找到的第一个元素
返回值:Element
实?? 例:将ID为”ul_1″的ul中的第一个Li元素的背景色改为红色
代?? 码: $(“#ul_1 li:first”).css(“background-color”,”red”); //点击按钮一将执行这句代码

ul ID=”ul_1″

* Li 1
* Li 2
* Li 3
* Li 4
* Li 5
* Li 6
* Li 7
* Li 8

2. :last用法
定?? 义:匹配找到的最后一个元素
返回值:Element
实?? 例:将ID为”ul_2″的ul中的最后一个Li元素的背景色改为红色
代?? 码: $(“#ul_2 li:last”).css(“background-color”,”red”); //点击按钮二将执行这句代码

ul ID=”ul_2″

* Li 1
* Li 2
* Li 3
* Li 4
* Li 5
* Li 6
* Li 7
* Li 8

3. :not(selector)用法
定?? 义:去除所有与给定选择器匹配的元素
返回值:Array
参?? 数:selector (Selector) : 用于筛选的选择器
实?? 例:将ID为”ul_3″的ul中除最后一个Li元素以外的其他Li元素的背景色改为红色
代?? 码: $(“#ul_3 li:not(li:last)”).css(“background-color”,”red”); //点击按钮三将执行这句代码

ul ID=”ul_3″

* Li 1
* Li 2
* Li 3
* Li 4
* Li 5
* Li 6
* Li 7
* Li 8

扩展:你可以试试执行 $(“li:not(li:last)”).css(“background-color”,”red”); 这句代码,看看有什么效果
4. :even用法
定?? 义:匹配所有索引值为偶数的元素,从 0 开始计数
返回值:Array
实?? 例:将ID为”ul_4″的ul中索引为偶数的Li元素的背景色改为红色(注:索引从0开始)
代?? 码: $(“#ul_4 li:even”).css(“background-color”,”red”); //点击按钮四将执行这句代码

ul ID=”ul_4″

* Li 1
* Li 2
* Li 3
* Li 4
* Li 5
* Li 6
* Li 7
* Li 8

5. :o dd用法
定?? 义:匹配所有索引值为奇数的元素,从 0 开始计数
返回值:Array
实?? 例:将ID为”ul_5″的ul中索引为奇数的Li元素的背景色改为红色(注:索引从0开始)
代?? 码: $(“#ul_5 li:odd”).css(“background-color”,”red”); //点击按钮五将执行这句代码

ul ID=”ul_5″

* Li 1
* Li 2
* Li 3
* Li 4
* Li 5
* Li 6
* Li 7
* Li 8

6. :eq(index)用法
定?? 义:匹配一个给定索引值的元素
返回值:Element
参?? 数:index (Number) : 从 0 开始计数
实?? 例:将ID为”ul_6″的ul中索引为3的Li元素的背景色改为红色(注:索引从0开始)
代?? 码: $(“#ul_6 li:eq(3)”).css(“background-color”,”red”); //点击按钮六将执行这句代码

ul ID=”ul_6″

* Li 1
* Li 2
* Li 3
* Li 4
* Li 5
* Li 6
* Li 7
* Li 8

7. :gt(index)用法
定?? 义:匹配所有大于给定索引值的元素
返回值:Array
参?? 数:index (Number) : 从 0 开始计数
实?? 例:将ID为”ul_7″的ul中索引值大于3的Li元素的背景色改为红色(注:索引从0开始)
代?? 码: $(“#ul_7 li:gt(3)”).css(“background-color”,”red”); //点击按钮七将执行这句代码

ul ID=”ul_7″

* Li 1
* Li 2
* Li 3
* Li 4
* Li 5
* Li 6
* Li 7
* Li 8

8. :lt(index)用法
定?? 义:匹配所有小于给定索引值的元素
返回值:Array
参?? 数:index (Number) : 从 0 开始计数
实?? 例:将ID为”ul_8″的ul中索引值小于3的Li元素的背景色改为红色(注:索引从0开始)
代?? 码: $(“#ul_8 li:lt(3)”).css(“background-color”,”red”); //点击按钮八将执行这句代码

ul ID=”ul_8″

* Li 1
* Li 2
* Li 3
* Li 4
* Li 5
* Li 6
* Li 7
* Li 8

9. :header用法
定?? 义:匹配如 h1, h2, h3之类的标题元素
返回值:Array
实?? 例:将ID为”div_1″的DIV中所有header(标题)元素的背景色改为红色
代?? 码: $(“#div_1 :header”).css(“background-color”,”red”); //点击按钮九将执行这句代码

DIV ID=”div_1″P标记

span标记
H1
H2
H3
H4
H5
H6

10. :animated用法
定?? 义:匹配所有正在执行动画效果的元素
返回值:Array
实?? 例:将ID为”div_2″的DIV中没有执行动画效果的元素的背景色改为红色
代?? 码: $(“#div_2 :not(:animated)”).css(“background-color”,”red”); //点击按钮十将执行这句代码
DIV id=”div_2″
span标记

1. :input用法 定?? 义:匹配所有 input, textarea, select 和 button 元素

2. :text用法 定?? 义:匹配所有的单行文本框

3. :password用法 定?? 义:匹配所有密码框

2010十月1

例子

ExtJS 评论关闭

,拆线图

//数据,JSON
var murl = ‘data.aspx’;
var store = new Ext.data.JsonStore({
url: murl,
autoLoad:true,
root: ‘images’,
fields: ['name', 'visits', 'views']
});

//显示
new Ext.Panel({
iconCls:’chart’,
title: ‘ExtJS.com Visits Trend, 2007/2008 (Simple styling)’,
frame:true,
renderTo: ‘container’,
width:500,
height:300,
layout:’fit’,

items: {
??? xtype: ‘linechart’,
??? store: store,
??? url: ‘../ExtLib/resources/charts.swf’,
??? xField: ‘name’,
??? yField: ‘visits’,
??? yAxis: new Ext.chart.NumericAxis({
??????? displayName: ‘Visits’,
??????? labelRenderer : Ext.util.Format.numberRenderer(’0,0′)
??? }),
??? tipRenderer : function(chart, record){
??????? return Ext.util.Format.number(record.data.visits, ’0,0′) + ‘ visits in ‘ + record.data.name;
??? }
}
});

2010十月1

EXTJS基本语法

ExtJS 评论关闭

1,引入文件:应用extjs 需要在页面中引入extjs 的样式及extjs 库文件,样式文件为resources/css/extall.css,extjs 的js 库文件主要包含两个,adapter/ext/ext-base.js 及ext-all.js,其中ext-base.js 表示框架基础库,ext-all.js 是extjs 的核心库

2, 提示框调用:Ext.Msg.alert(“提示”,”须提供订单号!”);? 需要注意的是 MessageBox 对象是异步的。不同于 JavaScript中原生的alert(它会暂停浏览器的执行),显示 MessageBox 不会中断代码的运行。由于这个原因,如果代码需要在用户对 MessageBox 做出反馈之后执行,则必须用到回调函数 Ext.Msg.alert(“提示”,”须提供订单号!”, myfunction);
Ext.Msg.show({
title:’Save Changes?’,
msg: ‘You are closing a tab that has unsaved changes. Would you like to save your changes?’,
buttons: Ext.Msg.YESNOCANCEL,
fn: processResult,? //执行完之后要调用的函数
animEl: ‘elId’,
icon: Ext.MessageBox.QUESTION
});
function processResult(){
alert(‘bbb’);
}
相应的还有:confirm,prompt

3,创建组件:
var obj={title:”hello”,width:300,height:200,html:’Hello,easyjf open source’};
var panel=new Ext.Panel(obj); panel.render(“hello”);? //hello控件的ID,将在ID为hello的控件上创建一个面板,或直接在obj内用renderTo指定。
<div id=”hello”>&nbsp;</div>

在api中找到要用的控件,用new创建,要传的参数用obj建立,里面即是api指示的属性。最后通过render输出。
如:new Ext.Button({id:”btn”,text:”myButton”}).render(“hello”);
new Ext.form.TextField({id:”btn”,value:”first”,width:200}) .render(“hello”);

4,事件
Ext.get(“btnAlert”).addListener(“click”,a);
//为ID为btnAlert的控件增加click事件 a等同于:document.getElementById(“btnAlert”).onclick=a;
延迟处理:Ext.get(“btnAlert”).on(“click”,a,this,{delay:2000});? //为btnAlert增加a方法,延迟2秒执行

5,面板
面板由以下几个部分组成,一个顶部工具栏、一个底部工具栏、面板头部、面板尾部、面板主区域几个部分组件。

6,窗口
var i=0;
function newWin()
{
var win=new Ext.Window({title:”窗口”+i++,
width:400,
height:300,
maximizable:true});
win.show();
}
Ext.onReady(function(){
Ext.get(“btn”).on(“click”,newWin);
});

7,布局
ExtJS 的容器组件包含一个layout 及layoutConfig 配置属性,这两个属性用来指定容器使用的布局及布局的详细配置信息,如果没有指定容器组件的layout 则默认会使用ContainerLayout 作为布局,该布局只是简单的把元素放到容器中,,常用的布局有border、column、fit、form、card、tabel等布局。
使用方式:指定布局方式,指定位置(可选)
Ext.onReady(function(){
new Ext.Panel({
renderTo:”hello”,
width:400,
height:200,
layout:”column”,
items:[{columnWidth:.5,
title:"面板1"},
{columnWidth:.5,
title:"面板2"}
]
});
注:items:传入的单独一个项,应直接传入一个对象的引用( 如items: {…})。多个项应以数组的类型传入(如items: [{...}, {...}])。
如:items:[
{fieldLabel:"请输入姓名",name:"name",xtype:"button",text:"hello"},
//用xtype指定使用的控件,控件类型为Ext.Componentxtype
{fieldLabel:"请输入地址",name:"address"}] //默认为textbox

1)Column布局:layout:”column” 在items中用ColumnWidth指定占据的宽度即可
2)Border区域布局 。该布局把容器分成东南西北中五个区域,分别由east,south, west,north, cente来表示
layout:”Border” 在items中用region:”east” 指定位置。
3)fit布局:自动用子填充父容器,以第一个子为主,其它加上也是无用。
4) Form 布局是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用,在实际应用中,Ext.form.FormPanel 这个类默认布局使用的是Form 布局,而且FormPanel还会创建与<form> 标签相关的组件,因此一般情况下我们直接使用FormPanel 即可。
new Ext.form.FormPanel({
renderTo:”hello”,? //指定输出
title:”容器组件”,
width:300,
labelAlign:”right”,
height:120,
defaultType: ‘textfield’,
items:[
{fieldLabel:"请输入姓名",name:"name"},
{fieldLabel:"请输入地址",name:"address"},
{fieldLabel:"请输入电话",name:"tel"}
] }
);
});
5)Accordion 布局由类Ext.layout.Accordion 定义,名称为accordion,表示可折叠的布局,也就是说使用该布局的容器组件中的子元素是可折叠的形式,有个动态的上下卷动效果。在窗口属性 layoutConfig 中指定布局配置参数animate 为true,表示在执行展开折叠时是否应
用动画效果。
6)Table 布局,该布局负责把容器中的子元素按照类似普通html 标签排列
Ext.onReady(function(){
var panel=new Ext.Panel({
renderTo:”hello”,
title:”容器组件”,
width:500,
height:200,
layout:”table”,
layoutConfig: {
columns: 3?? //指定列数
},
items:[{title:"子元素1",html:"这是子元素1中的内容",rowspan:2,height:100}, //指定每个占用的td
{title:"子元素2",html:"这是子元素2中的内容",colspan:2},
{title:"子元素3",html:"这是子元素3中的内容"},
{title:"子元素4",html:"这是子元素4中的内容"}
] }
);
});

8,表格控件:表格由类Ext.grid.GridPanel 定义,继承自Panel,其xtype 为grid。ExtJS 中,表格Grid必须包含列定义信息, 并指定表格的数据存储器Store 。表格的列信息由类Ext.grid.ColumnModel 定义、而表格的数据存储器由Ext.data.Store 定义,数据存储器根据解
析的数据不同分为JsonStore、SimpleStroe、GroupingStore 等。
1),显示数据,故要指定数据,在属性中有一store,用来指定数据,此外还有有列名,列名用cm定义
Ext.onReady(function(){
//指定数据
var data=[ [1, 'EasyJWeb', 'EasyJF','www.easyjf.com'],
[2, 'jfox', 'huihoo','www.huihoo.org'],
[3, 'jdon', 'jdon','www.jdon.com'],
[4, 'springside', 'springside','www.springside.org.cn'] ];
var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});

//指定列名
var colM=new Ext.grid.ColumnModel([{header:"项目名称",dataIndex:"name",sortable:true},
{header:"开发团队",dataIndex:"organization",sortable:true},
{header:"网址",dataIndex:"homepage"}]);

//创建
var grid = new Ext.grid.GridPanel({
renderTo:”hello”,
title:”中国Java开源产品及团队”,
height:200,
width:600,
cm:colM,
store:store,
autoExpandColumn:2
});
});

9,可编辑表格控件EditorGridPanel,可编辑表格是指可以直接在表格的单元格对表格的数据进行编辑,ExtJS 中的可编辑表格由
类Ext.grid.EditorGridPanel 表示,xtype 为editorgrid。使用EditorGridPanel 与使用普通的GridPanel 方式一样,区别只是在定义列信息的时候,可以指定某一列使用的编辑即可。
var colM=new Ext.grid.ColumnModel([{
header:"姓名",
dataIndex:"name",
sortable:true,
editor:new Ext.form.TextField()},
{header:"性别",
dataIndex:"sex"
},
。当对一个单元格进行编辑完之后,就会触发afteredit 事件,可以通过该事件处理函数来处理单元格的信息编辑,把编辑后的数据保存到服务器。

10,数据存储Stroe
1),record ,一个Record 可以理解为关系数据表中的一行,也可以称为记录。Record 对象中即包含了记录(行中各列)的定义信息(也就是该记录包含哪些字段,每一个字段的数据类型等),同时又包含了记录具体的数据信息(也就是各个字段的值)。
Ext.onReady(function(){
var MyRecord = Ext.data.Record.create([?? //指定列
{name: 'title'},
{name: 'username', mapping: 'author'},
{name: 'loginTimes', type: 'int'},
{name: 'lastLoginTime', mapping: 'loginTime', type: 'date'}
]);
var r=new MyRecord({?? //赋值
title:”日志标题”,
username:”easyjf”,
loginTimes:100,
loginTime:new Date()
});
alert(MyRecord.getField(“username”).mapping);
alert(MyRecord.getField(“lastLoginTime”).type);
alert(r.data.username);
alert(r.get(“loginTimes”));
});
2) store:一个Store 包含多个Record,同时Store 又包含了数据来源,数据解析器等相关信息,Store 通过调用具体的数据解析器(DataReader)来解析指定类型或格式的数据(DataProxy),并转换成记录集的形式保存在Store 中,作为其它控件的数据输入。
数据存储器由Ext.data.Store 类定义,一个完整的数据存储器要知道数据源(DataProxy)及数据解析方式(DataReader)才能工作
DataReader:
ArrayReader Ext.data.ArrayReader-数组解析器,用于读取二维数组中的信息,并转换成记录集Record对象
JsonReader? Ext.data.JsonReader-Json 数据解析器,用于读取JSON 格式的数据信息,并转换成记录集Record 对象
XmlReader??? Ext.data.XmlReader-XML 文档数据解析器,用于把XML 文档数据转换成记录集Record对象
DataProxy: DataProxy 字面解释就是数据代理,也可以理解为数据源,也即从哪儿或如何得到需要交给DataReader 解析的数据。

11 、TreePanel
Ext.onReady(function(){
var root=new Ext.tree.TreeNode({
id:”root”,
text:”树的根”});

root.appendChild(new Ext.tree.TreeNode({
id:”c1″,
text:”子节点1″
}));

var tree=new Ext.tree.TreePanel({
renderTo:”hello”,
root:root,
width:100? //可用loader: new Ext.tree.TreeLoader({url:”treedata.js”}), 来动态加载数据,此时root要用AsyncTreeNode类型
});
});

2010十月1

EXTJS简介

ExtJS 评论关闭

1, EXTJS:UI全部帮你搞定,不用费劲去弄样式! 浏览器兼容性好,在各各浏览器下测试都OK! 和后台代码无关,不管后面用C#也好 JAVA也好 还是PHP 都和它没关系。 动画效果,EXTJS的动画效果做得很不错,提高了用户的感知度。
缺点: 开发周期延长(要先学习才能灵活使用)
2,ExtJS是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面。

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();
    }
2010九月30

png图片在IE6下的显示

css 评论关闭

利用过滤器解决:
<pre lang=”css”>#png
{background-image: url(images/logo.png)!important;
background-repeat: no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’http://enjoyasp.net/logo.png’);
_background-image: none;
}</pre>