loading ...

Q网志

my web and me.
显示标签为“Ajax”的博文。显示所有博文
简  介:
DOJO提供完整的轻量级窗口组件和浏览器-服务器消息映射支持,开源许可(Academic Free License 2.1),由JotSpot的Alex Russell所领导。

官方站点:http://dojotoolkit.org/
下载地址:http://download.dojotoolkit.org/
最新版本3.0:http://download.dojotoolkit.org/release-0.3.1/dojo-0.3.1-ajax.zip

文档汇总:
1.实战Dojo工具包
原文链接:http://ajaxian.com/articles/dojo-in-practice/DojoToolkitInPractice.pdf
源代码下载:http://ajaxian.com/articles/dojo-in-practice/dojo-itinerary.tgz
译文链接:http://ajaxcn.org/upload/DojoInPractice.rar
作者:Dion Almaer(Ajaxian.com)
译者:李锟(ajaxcn.org)
版本号:1.0
版权声明:
本文是有版权的著作,原文的版权属于原作者所有,译文的版权属于译者所有。译者在得到
了原作者的许可后翻译了这篇文章。译文允许在不做任何改动(包括原文/译文链接、作者/
译者信息、版权声明、文章的全部内容)的情况下自由转载。

2.Ajaxcn.org的李锟组织了一个对DOJO文档的中文翻译
主要针对以下英文文档进行翻译,感谢李锟为AJAX在中国的普及所做的工作
A. Dojo的打包系统
http://dojo.jot.com/DojoPackageSystem

B. Dojo的代码压缩系统
http://dojotoolkit.org/docs/compressor_system.html

D. Dojo的核心Ajax组件io.bind介绍
http://dojotoolkit.org/docs/intro_to_dojo_io.html

D. Dojo的事件系统介绍
http://dojotoolkit.org/docs/dojo_event_system.html

E. 利用Dojo的Widget框架快速开发Widget
http://dojotoolkit.org/docs/fast_widget_authoring.html

F. Dojo的富文本编辑器
http://dojotoolkit.org/docs/rich_text.html

G. Dojo的设计哲学
http://dojotoolkit.org/docs/the_dojo_way.html

H. Dojo的JavaScript编程规范
http://dojotoolkit.org/docs/js_style_guide.html

...... [阅读全文]

jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。

废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到).

1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中。

url(String) : 请求的HTML页的URL地址。
data(Map) : (可选参数) 发送至服务器的 key/value 数据。
callback(Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。

这个方法默认使用 GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。

这个方法可以很方便的动态加载一些HTML文件,例如表单。

示例代码:

$(".ajax.load").load("http://www.cnblogs.com/QLeelulu/archive/2008/03/30/1130270.html .post",
function(responseText, textStatus, XMLHttpRequest){
this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0]
//alert(responseText);//请求返回的内容
//alert(textStatus);//请求状态:success,error
//alert(XMLHttpRequest);//XMLHttpRequest对象
});

这里将显示结果。
注:不知道为什么URL写绝对路径在FF下会出错,知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径,所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的,发现传上来后没办法获取结果,所以把运行按钮去掉了。

2. jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求

参数:
url(String) : 发送请求的URL地址.
data(Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示,会做为QueryString附加到请求URL中。
callback(Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。示例代码:

$.get("./Ajax.aspx", {Action:"get",Name:"lulu"},function(data, textStatus){
//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.
this;// 在这里this指向的是Ajax请求的选项配置信息,请参考下图alert(data);
//alert(textStatus);//请求状态:success,error等等。当然这里捕捉不到error,因为error的时候根本不会运行该回调函数
//alert(this);
});

点击发送请求:

jQuery.get()回调函数里面的 this ,指向的是Ajax请求的选项配置信息:


3. jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求

参数:
url(String) : 发送请求的URL地址.
data(Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。
callback(Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
type(String) : (可选)官方的说明是:Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。示例代码:

Ajax.aspx:

Response.ContentType = "application/json";
Response.Write("{result: '" + Request["Name"] + ",你好!(这消息来自服务器)'}");

jQuery 代码:

$.post("Ajax.aspx", { Action: "post", Name: "lulu" },
function(data, textStatus){
// data 可以是 xmlDoc, jsonObj, html, text, 等等.
//this; // 这个Ajax请求的选项配置信息,请参考jQuery.get()说到的this
alert(data.result);
}, "json");

点击提交:

这里设置了请求的格式为"json":


如果你设置了请求的格式为"json",此时你没有设置Response回来的ContentType 为:Response.ContentType = "application/json"; 那么你将无法捕捉到返回的数据。

注意一下,alert(data.result); 由于设置了Accept报头为“json”,这里返回的data就是一个对象,并不需要用eval()来转换为对象。


4. jQuery.getScript( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript. 文件。

参数
url(String) : 待载入 JS 文件地址。
callback(Function) : (可选) 成功载入后回调函数。

jQuery 1.2 版本之前,getScript. 只能调用同域 JS 文件。 1.2中,您可以跨域调用 JavaScript. 文件。注意:Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript. 加入脚本,请加入延时函数。

这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件.下面看一些示例代码:

加载并执行 test.js。
jQuery 代码:
$.getScript("test.js");


加载并执行 AjaxEvent.js ,成功后显示信息。

jQuery 代码:

$.getScript("AjaxEvent.js",function(){
alert("AjaxEvent.js 加载完成并执行完成.你再点击上面的Get或Post按钮看看有什么不同?");
});

加载完后请重新点击一下上面的 Load 请求看看有什么不同。

jQuery Ajax 事件

Ajax请求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery这里有两种Ajax事件:局部事件 和 全局事件。

局部事件就是在每次的Ajax请求时在方法内定义的,例如:

$.ajax({beforeSend:function(){
// Handle the beforeSend event
},
complete:function(){
// Handle the complete event
}// ...
});

全局事件是每次的Ajax请求都会触发的,它会向DOM中的所有元素广播,在上面 getScript() 示例中加载的脚本就是全局Ajax事件。全局事件可以如下定义:

$("#loading").bind("ajaxSend",function(){
$(this).show();
}).bind("ajaxComplete",function(){
$(this).hide();
});

或者:

$("#loading").ajaxStart(function(){
$(this).show();
});

我们可以在特定的请求将全局事件禁用,只要设置下 global 选项就可以了:

$.ajax({
url: "test.html",
global:false,// 禁用全局Ajax事件.
// ...
});

下面是jQuery官方给出的完整的Ajax事件列表:
  • ajaxStart(Global Event)
    This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.
  • beforeSend(Local Event)
    This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)
  • ajaxSend(Global Event)
    This global event is also triggered before the request is run.
  • success(Local Event)
    This event is only called if the request was successful (no errors from the server, no errors with the data).
  • ajaxSuccess(Global Event)
    This event is also only called if the request was successful.
  • error(Local Event)
    This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).
  • ajaxError(Global Event)
    This global event behaves the same as the local error event.
  • complete(Local Event)
    This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.
  • ajaxComplete(Global Event)
    This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.
  • ajaxStop(Global Event)
    This global event is triggered if there are no more Ajax requests being processed.

具体的全局事件请参考API文档。
好了,下面开始说jQuery里面功能最强的Ajax请求方法 $.ajax();

jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据

这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。

$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。

注意:如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见Specifying the Data Type for AJAX Requests。
当设置 datatype 类型为 'script' 的时候,所有的远程(不在同一个域中)POST请求都回转换为GET方式。

$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。

jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为JSONP。使用JSONP形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时,jQuery 将自动调用回调函数。(这个我不是很懂)

参数列表:

参数名类型描述
urlString(默认: 当前页地址) 发送请求的地址。
typeString(默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为"GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
timeoutNumber设置请求超时时间(毫秒)。此设置将覆盖全局设置。
asyncBoolean(默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
beforeSendFunction发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP头。XMLHttpRequest 对象是唯一的参数。
function(XMLHttpRequest) {
this;// the options for this ajax request
}
cacheBoolean(默认: true) jQuery 1.2 新功能,设置为 false将不会从浏览器缓存中加载请求信息。
completeFunction请求完成后回调函数 (请求成功或失败时均调用)。参数: XMLHttpRequest 对象,成功信息字符串。
function(XMLHttpRequest, textStatus) {
this;// the options for this ajax request
}
contentTypeString(默认: "application/x-www-form-urlencoded")发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
dataObject,
String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如{foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
dataTypeString

预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值:

"xml": 返回 XML 文档,可用 jQuery 处理。

"html": 返回纯文本 HTML 信息;包含 script. 元素。

"script": 返回纯文本 JavaScript. 代码。不会自动缓存结果。

"json": 返回 JSON 数据 。

"jsonp":JSONP格式。使用JSONP形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

errorFunction(默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。
function(XMLHttpRequest, textStatus, errorThrown) {
// 通常情况下textStatus和errorThown只有其中一个有值
this;// the options for this ajax request
}
globalBoolean(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModifiedBoolean(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
processDataBoolean(默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。
successFunction请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态
function(data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc...
this;// the options for this ajax request
}


这里有几个Ajax事件参数:beforeSend,success,complete ,error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下,这些Ajax事件里面的this都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。
请认真阅读上面的参数列表,如果你要用jQuery来进行Ajax开发,那么这些参数你都必需熟知的。

示例代码,获取博客园首页的文章题目:

$.ajax({
type: "get",
url: "http://www.cnblogs.com/rss",
beforeSend:function(XMLHttpRequest){
//ShowLoading();
},
success:function(data, textStatus){
$(".ajax.ajaxResult").html("");
$("item",data).each(function(i, domEle){
$(".ajax.ajaxResult").append("<li>"+$(domEle).children("title").text()+"</li>");
});
},
complete:function(XMLHttpRequest, textStatus){
//HideLoading();
},
error:function(){
//请求出错处理
}
});

这里将显示首页文章列表。

其他

jQuery.ajaxSetup( options ) : 设置全局 AJAX 默认选项。

设置 AJAX 请求默认地址为 "/xmlhttp/",禁止触发全局 AJAX 事件,用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。

jQuery 代码:

$.ajaxSetup({url: "/xmlhttp/",global:false,type: "POST"});$.ajax({ data: myData });


serialize() 与 serializeArray()

serialize() : 序列表表格内容为字符串。

serializeArray() : 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。

示例:
HTML代码:

<pid="results"><b>Results:</b></p>
<form>
<selectname="single">
<option>Single</option>
<option>Single2</option>
</select>
<selectname="multiple"multiple="multiple">
<optionselected="selected">Multiple</option>
<option>Multiple2</option>
<optionselected="selected">Multiple3</option>
</select><br/>
<inputtype="checkbox"name="check"value="check1"/>check1
<inputtype="checkbox"name="check"value="check2"checked="checked"/>check2
<inputtype="radio"name="radio"value="radio1"checked="checked"/>radio1
<inputtype="radio"name="radio"value="radio2"/>radio2
</form>


serializeArray() 结果为:



一些资源

一个jQuery的Ajax Form表单插件:http://www.malsup.com/jquery/form/

一个专门生成Loading图片的站点:http://ajaxload.info/大家觉得那些Loading比较炫的可以在这里跟帖晒一下,方便大家取用,嘎嘎

...... [阅读全文]

  JSON插件提供了一种名为json的ResultType,一旦为某个Action指定了一个类型为json的Result,则该Result无需映射到任何视图资源。因为JSON插件会负责将Action里的状态信息序列化成JSON格式的数据,并将该数据返回给客户端页面的JavaScript。

  简单地说,JSON插件允许我们在JavaScript中异步调用Action,而且Action不再需要使用视图资源来显示该Action里的状态信息,而是由JSON插件负责将Action里的状态信息返回给调用页面——通过这种方式,就可以完成Ajax交互。

  Struts2提供了一种可插拔方式来管理插件,安装Struts2的JSON插件与安装普通插件并没有太大的区别,一样只需要将Struts2插件的JAR文件复制到Web应用的WEB-INF/lib路径下即可。

  安装JSON插件按如下步骤进行:

  (1)登陆http://code.google.com/p/jsonplugin/downloads/list站点,下载Struts2的JSON插件的最新版本,当前最新版本是0.7,我们可以下载该版本的JSON插件。

  (2)将下载到的jsonplugin-0.7.jar文件复制到Web应用的WEB-INF路径下,即可完成JSON插件的安装。

  实现Actio逻辑

  假设wo,en输入页面中包含了三个表单域,这三个表单域对于三个请求参数,因此应该使用Action来封装这三个请求参数。三个表单域的name分别为field1、field2和field3。

  处理该请求的Action类代码如下:

public class JSONExample
{
 //封装请求参数的三个属性
 private String field1;
 private transient String field2;
 private String field3;
 //封装处理结果的属性
 private int[] ints = {10, 20};
 private Map map = new HashMap();
 private String customName = "custom";
 //三个请求参数对应的setter和getter方法
 public String getField1()
 {
  return field1;
 }
 public void setField1(String field1)
 {
  this.field1 = field1;
 }
 //此处省略了field1和field2两个字段的setter和getter方法
 ...
 //封装处理结果的属性的setter和getter方法
 public int[] getInts()
 {
  return ints;
 }
 public void setInts(int[] ints)
 {
  this.ints = ints;
 }
 public Map getMap()
 {
  return map;
 }
 public void setMap(Map map)
 {
  this.map = map;
 }
 //使用注释语法来改变该属性序列化后的属性名
 @JSON(name="newName")
 public String getCustomName()
 {
  return this.customName;
 }
 public String execute()
 {
  map.put("name", "yeeku");
  return Action.SUCCESS;
 }
}

  在上面代码中,使用了JSON注释,注释时指定了name域,name域指定Action属性被序列化成JSON对象的属性名。除此之外,JSON注释还支持如下几个域:
  serialize:设置是否序列化该属性
  deserialize:设置是否反序列化该属性。
  format:设置用于格式化输出、解析日期表单域的格式。例如"yyyy-MM-dd'T'HH:mm:ss"。

  配置该Action与配置普通Action存在小小的区别,应该为该Action配置类型为json的Result。而这个Result无需配置任何视图资源。

  配置该Action的struts.xml文件代码如下:

<?xml version="1.0" encoding="GBK"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<constant name="struts.i18n.encoding" value="UTF-8"/>
<package name="example" extends="json-default">
<action name="JSONExample" class="lee.JSONExample">
<result type="json"/>
</action>
</package>
</struts>

  在上面配置文件中有两个值得注意的地方:

  第一个地方是配置struts.i18n.encoding常量时,不再是使用GBK编码,而是UTF-8编码,这是因为Ajax的POST请求都是以UTF-8的方式进行编码的。

  第二个地方是配置包时,自己的包继承了json-default包,而不再继承默认的default包,这是因为只有在该包下才有json类型的Result。

...... [阅读全文]

出处:Adobe CS4 中文站

shiny是 两年前开始接触Ajax的,那时候的Ajax支持还不是很好,都要涉及底层,没有现成的框架给你调用。现在把常见的问题列举如下。

1、编码问题

注意AJAX要取的文件是UTF-8编码的。GB2312编码传回BROWSE后中文会乱码。如果用VBScript的话还可以转化,但是VBScript只有IE支持。

所以,选择UTF-8编码是一劳永逸的办法。

2、清除服务器端文件的缓存。

当用XMLHTTP取回一个服务器端的文件,文件会缓存在浏览器端。下次再取文件时,不会再去服务器取文件。所以,对于刷新频繁的文件,一定要指定文件的过期时间。

3、什么时候使用XML

Ajax里的X指的就是XML,可是真的XML就是最好的解决方案吗?XML和JSON相比,在传递同等量的信息时,XML文件更大。所以往往JSON是更好的选择。不过,你还可以直接输出Javascript执行,这样的效率往往更高:不需要写复杂的回调函数。不过安全问题也要更加注意。

4、两种Ajax的方式

一些人的基础可能还不是很扎实,并不非常了解Ajax的原理,那你知道Ajax由哪两种方式来实现吗?

最古老的一种是iframe来加载一个包含js的网页,这个网页里的脚本用 top.function来调用parent页面里的函数。但是,你可以指定a的target和form的target,这样就不用序列化表单,实际上能很方便地发送表单。当然后期就稍微有点麻烦,出现问题也不容易解决。

后来就是xmlhttp组件的方式。什么时候挑选什么方式,这也是一种技巧。

5、跨域问题

如果一个脚本不在同一个域,两者就不能相互调用。如果iframe里是其他域的网页,就不能访问parent页的具体内容。如果需要访问远程的XML,比如RSS FEED,建议可以用服务器端脚本来中转。在访问量不是非常大的情况下还是很很好的一个解决办法。不过,翻阅JQuery手册发现它能调用(执行)跨域的脚本,具体怎么做的还不是很清楚。大家可以下载JQUERY未加密的版本来研究下。

6、安全问题

在服务器端,虽然客户端能预处理很多东西,你仍要注意一句话:一切来自客户端的变量都是有害的。不在Ajax的情况下很多程序员往往会放松警惕。这使得安全问题更隐蔽。如果是开源程序的话那么问题就会在网友面前马上暴露出来;黑盒的情况下,往往被入侵了还是找不出原因。

结语:实际上在这个框架横行的年代直接编写Ajax实现代码的机会并不多,很多JS框架都集成了AJAX调用函数,一些服务器端的框架,例如THINKPHP也集成了AJAX。但是,理解一些底层的东西,还是有利于排除BUG,提高AJAX应用的性能的。

...... [阅读全文]

出处:雨里の夜

  AJAX,一个异步JavaScript和XML的缩略词,是当今快速发展的Web开发界十分热门的技术。在这项新技术提供巨大能力的同时,它也燃发了在"Back"按钮问题上的不容置疑的争论。本文作者将向你解释怎样在真实世界中使用AJAX以及怎样在一个工程中评估它的价值。在你读完本文后,你就会明白什么是AJAX,在什么情况下,为什么以及怎样使用这项技术。

  一、 简介

  AJAX,一个异步JavaScript和XML的缩略词,是最近出来的技术词语。异步意味着你可以经由超文本传输协议(HTTP)向一个服务器发出请求并且在等待该响应时继续处理另外的数据。这就意味着,例如,你可以调用一个服务器端脚本来从一个数据库中以XML方式检索数据,把数据发送到存储在一个数据库的服务器脚本,或者简单地装载一个XML文件以填充你的Web站点而不需刷新该页面。然而,在这项新技术提供巨大能力的同时,它也引起了在"Back"按钮问题上的很多争论。本文将帮助你确定在真实世界中何时使用AJAX是最佳选择。

  首先,我假定你对缩略词JavaScript和XML部分有一个基本了解。尽管你能通过AJAX请求任何类型的文本文件,但是我在此主要集中讨论XML。我将解释怎样在真实世界中使用AJAX以及怎样在一个工程中评估它的价值。在你读完本文后,你将会明白什么是AJAX,在什么情况下,为什么以及怎样使用这项技术。你将要学习,在保持给用户提供直观体验的同时怎样创建对象,发出请求以及定制响应。

  我已创建了一个适合于本文的示例工程(你可以下载源代码)。这个示例实现了一个简单的请求-它装载一个包含页面内容的XML文件并且分析数据以把它显示在一个HTML页面中。

  二、 常规属性和方法

  表1和2提供了一个属性和方法的概述-它们为Windows Internet Explorer 5,Mozilla,Netscape 7,Safari 1.2,和Opera等浏览器所支持。

  表1 属性

属性
描述
onreadystatechange
当请求对象变化时该事件处理器激活。
readyState
返回指示对象的当前状态的值。
responseText
来自服务器的响应串的版本。
responseXML
来自服务器的响应的DOM兼容的文档对象。
status
来自服务器的响应的状态码。
statusText
以一个字符串形式返回的状态消息。

  表2 方法

方法
描述
Abort()
取消当前HTTP请求。
getAllResponseHeaders()
检索所有的HTTP头值。
getResponseHeader("headerLabel")
从响应体中检索一个HTTP头部的值。
open("method","URL"[,asyncFlag[,"userName"[,"password"]]])
初始化一个MSXML2.XMLHTTP请求,并从该请求指定方法,URL和认证信息。
send(content)
发送一个HTTP请求到服务器并接收响应。
setRequestHeader("label", "value")
指定一个HTTP头的名字。
  
  三、 从哪里开始

  首先,你需要创建XML文件-后面我们对之进行请求并作为页面内容进行分析。你正在请求的文件必须与目标工程驻留在相同的服务器上。

  下一步,创建发出请求的HTML文件。当页面通过使用页面主体中的onload方法进行加载时,该请求发生。接着,该文件需要一个有ID的div标签,这样当我们准备好要显示内容时就可以对之进行定位。当你做完所有这些,你的页面的主体看上去如下:

< body onload="makeRequest('xml/content.xml');">
  < div id="copy">< /div>
< /body>

  四、 创建请求对象

  为了创建请求对象,你必须检查是否浏览器使用XMLHttpRequest或ActiveXObject。这两个对象之间的主要区别在于使用它们的浏览器。Windows IE 5 及以上版本使用ActiveX对象;而Mozilla,Netscape 7,Opera和Safari 1.2及以上版本使用XMLHttpRequest对象。另外一个区别是你创建对象的方式:Opera,Mozilla,Netscape和Safari允许你简单地调用该对象的构造器,但是Windows IE需要把对象的名字传递到ActiveX构造器中。下面是怎样创建代码来决定要使用哪个对象和怎样创建它的示例:

if(window.XMLHttpRequest)
  { request = new XMLHttpRequest();}
else if(window.ActiveXObject)
  { request = new ActiveXObject("MSXML2.XMLHTTP");}

  五、 发出请求

  现在既然你已经创建了你的请求对象,那么你已经为向服务器发出请求作了准备。创建一个到事件处理器的参考以听取onreadystatechange事件。然后,该事件处理器方法将在状态发生变化时作出响应。一旦我们完成请求,我们就开始创建这个方法。打开连接以GET或POST一个定制的URL-在此是一个content.xml,并且设置一个布尔定义-是否你想要进行异步调用。

  现在到了发出请求的时间了。在这个示例中,我使用了null,因为我们使用的是GET;为了使用POST,你需要使用下面这个方法发出一个查询串:

request.onreadystatechange = onResponse;
request.open("GET". url, true);
request.send(null);

  六、 定制加载和错误处理消息

  你为onreadystatechange方法创建的事件处理器正是集中进行加载和处理错误的场所。现在到了考虑用户并针对他们与之交互的内容的状态提供反馈的时候了。在这个实例中,我针对所有的装载状态代码提供反馈,并且也对最经常发生的错误处理状态代码提供一些基本的反馈。为了显示请求对象的当前状态,readyState属性包括显示在下表中的一些值。

值
描述
0
未初始化,对象没有用数据进行初始化。
1
装载中,对象正在装载它的数据。
2
装载结束,对象完成了它的数据的装载。
3
可交互,用户能与对象交互了,尽管它还没有装载结束。
4
完成,对象已经完全被初始化。

  W3C中有很长的一串有关HTTP状态代码的定义。我选择了两个状态代码:

  ?200:请求成功了。
  ?404:服务器没有找到与所请求的文件相匹配的任何东西。


  最后,我检查任何另外的状况代码-它们将生成一个错误并提供一个一般错误信息。下面是一个代码示例-你可以用之来处理这些情况。注意,我在定位我们前面在HTML文件的主体中创建的div ID并且对它应用装载和/或错误信息-通过innerHTML方法-这个方法用于设置在div对象的开始和结束标签之间的HTML:

if(obj.readyState == 0)
  { document.getElementById('copy').innerHTML = "Sending Request...";}
if(obj.readyState == 1)
  { document.getElementById('copy').innerHTML = "Loading Response...";}
if(obj.readyState == 2)
  { document.getElementById('copy').innerHTML = "Response Loaded...";}
if(obj.readyState == 3)
  { document.getElementById('copy').innerHTML = "Response Ready...";}
if(obj.readyState == 4){
  if(obj.status == 200)
    { return true; }
  else if(obj.status == 404)
  {
  // 添加一个定制消息或把用户重定向到另外一个页面
    document.getElementById('copy').innerHTML = "File not found";
  }
  else
  {document.getElementById('copy').innerHTML = "There was a problem retrieving the XML."; }
}

当状况代码为200时,这意味着请求成功。下面开始进行响应了。

  七、分析响应

  当你准备好分析来自请求对象的响应时,真正的工作开始了。现在你可以用你请求的数据开始工作。仅为测试目的,在开发期间,可以使用responseText和responseXML属性来显示来自响应的原始数据。为了存取XML响应中的结点,首先使用你创建的请求对象,定位到responseXML属性以检索(你可能已经猜测出来)来自响应的XML。定位到documentElement-它检索一个到XML响应的根结点的参考。
  
var response = request.responseXML.documentElement;

  现在既然你有了到响应的根结点的参考,那么你可以使用getElementsByTagName()以结点名字来检索childNodes。下面一行用一个头部的nodeName来定位一个childNode:
  
response.getElementsByTagName('header')[0].firstChild.data;

  使用firstChild.data可以允许你存取该元素中的文本:
  
response.getElementsByTagName('header')[0].firstChild.data;

  下面是怎样创建这些代码的完整的例子:

var response = request.responseXML.documentElement;
var header = response.getElementsByTagName('header')[0].firstChild.data;
document.getElementById('copy').innerHTML = header;

  八、需求分析

  现在既然你知道怎样使用AJAX的基础知识,那么下一步就是决定是否在一工程使用它。须记住的最重要的事情是,在你还没有刷新页面时你无法使用"Back"按钮。为此,可以先专注于你的工程中的一小部分-它能够从使用这种类型的交互中受益。例如,你可以创建一个表单-它在用户每次输入一个输入字段或一个字母时查询一个脚本以便进行实时校验。你可以创建一个拖放页面-在释放一项时,它能够把数据发送到一个脚本中并把该页面的状态保存到一个数据库中。使用AJAX的理由毫无疑问是存在的;并且这种使用无论对开发者还是用户都会带来益处;这全依赖于具体的条件和执行情况。

  还有其它方法可用来解决"Back"按钮的问题,例如使用Google Gmail-它现在能够为你的操作提供一种撤消功能而不刷新该页面。以后还会出现许多更具创造性的例子-它们将通过提供给开发者创建独特实时的体验的手段给用户带来更大的好处。

  九、结论

  尽管AJAX允许我们构建新的和改进的方式来与一个WEB页面进行交互;但是作为开发者,我们需要牢记产品是不考虑技术的;它关心的是用户以及其如何与用户进行交互。没有了用户群,我们构建的工程毫无用处。基于这个标准,我们就能评估应该使用什么技术以及何时使用它们来创建对相应用户有用的应用。

...... [阅读全文]

博客订阅

feedsky Technorati Join My Community at MyBloglog!
抓虾 pageflakes
Rojo google reader
netvibes my yahoo
newsgator bloglines
鲜果 哪吒
有道 分享到饭否

标签云集

Heartnn@饭否

日志归档

最新日志

最新评论

我的收藏夹

门户
技术
游戏

关注者