上一篇文章,我们介绍了dojo的XHR框架,正是因为有了XHR框架,才使得异步交互成为了现实,极大的提高了用户体验,并且减少了网络负载,下面来介绍一些XHR中的重要方法
使用xhrGet方法来获取资源
function helloWorld(){
dojo.xhrGet({
url: "helloworld.txt" ,
handleAs: "txt",
load: function(response, ioArgs){alert(response);},
error: function(error, ioArgs){alert(error.message);}
});
}
函数 helloWorld 调用 dojo.xhrGet 获取服务器上与引用此 Javascript 脚本的页面同一目录下的 helloworld.txt 文件。服务器成功返回之后,使用 alert 显示文件的内容。如果出错了则使用 alert 显示错误信息。
dojo.xhrGet 的参数是一个 JSON 对象,JSON 对象由很多的属性 / 值对组成,其中的值可以是任意类型的数据: 整形、字符串、函数……甚至是 JSON 对象,这一点使得 JSON 对象的数据描述能力可以与 XML 匹敌,而且 JSON 对象可以使用“ . ”操作符来直接访问它的属性,没有任何解析的开销,非常方便。在 Javascript 领域,JSON 大有超越 XML 成为事实上的数据交换标准的趋势。使用 JSON 对象作为函数参数的情形在 Javascript 中非常普遍,可以看成 Javascript 开发中的一个模式,开发人员应该熟悉它。再回到作为 xhrGet 参数的 JSON 对象,在上面例子中的,这一对象有四个属性:
url:请求的服务器资源 url,url 标识的只能是文本文件,而不能是二进制文件。
handleAs:返回的数据类型,可以是 text(默认)、json、json-comment-optional, json-comment-filtered、javascript、xml 。 Dojo 将根据 handleAs 设置的数据类型对从服务器返回的数据进行预处理,再传给 load 属性指向的回调函数。
load:它的值是一个函数,这个函数在请求的资源成功返回之后被调用,实际上就是一回调函数。
error:它的值也是一个回调函数,但是只在 http 请求出错之后(比如,404 错误:请求的资源找不到)才被调用。
load与error的属性也可以不是一个无名函数,而是一个已经定义好的函数,如
function display(data,ioArgs){
alert(data);
}
function helloWorld(){
dojo.xhrGet({
url: "helloworld.txt" ,
handleAs: "txt",
load:display,
error:display
});
}
注意load与error的属性就是一个方法,而不是字符串,而且就是方法名,而没有参数,所以js中也就没有方法重载这一说法了
display的两个参数,第一个data,对于load则是服务器返回的消息,并且已经经过HandleAs设置的数据类型进行了预处理,对于error则是发生的错误对象。
第二个参数ioArgs,ioArgs: 这是一个对象,包含调用 xhrGet 时使用的一些参数。之所以把这些信息放在一个对象中并传递给回调函数是为了给回调函数一个执行“上下文”,让回调函数知道自己属于哪个 HTTP 请求,请求有哪些参数,返回的数据是什么类型等。这些信息在调试程序时特别有用。
ioArgs.url:请求的 URL,与调用 xhrGet 时设置的值一样。
ioArgs.query:请求中包含的参数, URL 中“ ? ”后面的内容。
ioArgs.handAs:如何对返回的数据进行预处理,与调用 xhrGet 时设置的值一样。
ioArgs.xhr: xhrGet 函数使用的 XHR 对象。
这就是一个普通的异步交互了
使用xhrGet进行表单提交
表单的提交在 Web 应用中必不可少,以前 javascript 应用最广的地方是做表单的验证,今天我们知道 javascript 能做的比这远远要多。使用 xhrGet 提交表单与请求资源类似,只需要在 xhrGet 的参数对象中增加一个属性,关联需要提交的 form 。使用 xhrGet 异步提交 form 意义重大,在传统的 B/S 交互模式中,提交 form 则意味着页面的跳转,但很多情况下页面不用跳转,比如用户登录时,用户名或密码错误,这时不跳转页面而是直接给出错误提示信息用户体验明显要好得多, 上面例子是使用 xhrGet 提交表单的例子。
<html>
<body>
<script src="../dojo/dojo.js"
djConfig="parseOnLoad: true"></script>
<script>
function handler(response)
{ document.write(response); }
function submitForm(){
dojo.xhrGet({
form: "loginForm" ,
handleAs: "text" ,
handle: handler,
content: { pwd: "modified" },
sync: false
});
return false;
}
</script>
<form id="loginForm" onsubmit="return submitForm();" action="data.jsp">
<input type="textfield" name="id" />
<input type="password" name="pwd" />
<input type="submit" name="sub" value="submit" />
</form>
</body>
</html>
在这个例子中我们看到 xhrGet 的一些新的参数。这些参数不是仅针对提交表单的,请求资源时也可以使用。之所以在这里介绍,是为了达到循序渐进学习的目的。例子中的 data.jsp 是服务器端的程序,比较简单,只包含一行代码 ${param.pwd},用来输出表单中的密码字段。
form:需要异步提交的表单的 id 。只有把它设置成想要异步提交的表单的 id,并在这个表单的 onsubmit 事件中调用自定义的 submitForm() 函数,才能真正做到异步提交。注意在 submitForm 函数中最后返回了 false,这是为了阻止系统默认的表单提交事件,让表单提交异步进行,如果不返回 false,会引起页面跳转。
handle:handle 也是一个回调函数,在 xhrGet 返回时被调用,正常和错误返回的情况都能处理,可以说是 load 和 error 的混合体,但优先级比 load 低,只有在没有设置 load 时才起作用。
content:在这里可以修改来自表单的信息,上面所示的例子中,就使用这一属性修改了用户登录时输入的密码。
sync:设置同步还是异步提交,默认是异步提交
需要注意的是:虽然表单提交的默认方法是 POST,但当使用 xhrGet 提交时,表单提交方式就自动改为 GET,所有表单的数据都会变成查询字符串出现在 URL 中。所以在服务器端只能从查询字符串中取得这些提交的信息。在 jsp 中是:request.getParameter(“PWD”)获取提交的数据
分享到:
相关推荐
《Dojo入门》这本书主要介绍了Dojo JavaScript库的使用,帮助初学者快速掌握这个强大的前端开发工具。Dojo是一个开源的JavaScript框架,旨在提供一站式的解决方案,包括UI组件、数据管理、动画效果、Ajax交互等功能...
在入门Dojo时,首先需要了解如何安装和引入Dojo到项目中。这通常涉及到在HTML文件中添加Dojo的CDN链接或者下载Dojo库并本地引用。同时,设置Dojo的配置选项,如dojoConfig,用于定义模块加载的路径、调试模式等。 ...
dojo入门系列教程,包含入门简介,在javascript基础上介绍dojo的语法特色,ajax的dojo包装---xhr框架的编程要点, Dojo 事件机制.以及对dojo最具特色的web UI设计的全面介绍.
在《Dojo入门指南-中文版》中,读者将深入理解Dojo的核心概念,学习如何有效地使用这个框架来提升Web应用的性能和可维护性。 首先,Dojo的模块化系统是其独特之处,它基于AMD(Asynchronous Module Definition)...
### Dojo 快速入门知识点详解 #### 一、Dojo 概览 Dojo 是一个功能强大且灵活的开源 JavaScript 库,主要用于构建高性能的富客户端 Web 应用程序。Dojo 提供了一系列工具和组件,使得开发者能够轻松创建交互式 Web...
《精通Dojo》系列书籍分为三部,每部都针对不同层次的学习者设计,从入门到精通,帮助读者逐步掌握Dojo框架的核心技术和高级特性。本文将重点介绍该系列中的第二部,即《精通Dojo 3.2》部分。 #### 第二部主要内容...
Dojo还包含了一套强大的Ajax和IO工具,如`dojo.xhr`,用于进行后台数据通信。这些工具支持异步请求,并且可以处理各种HTTP方法和响应格式。在教程中,你将学会如何利用这些工具实现页面与服务器的交互,提高应用的...
《dojo快速入门(中文版)》 dojo Toolkit是一个开源的JavaScript工具包,旨在简化Web应用的构建过程,提供高效且设计精良的API。它的轻量级特性(约26kb)和强大的功能集使得dojo在各种项目中都能灵活运用。核心功能...
《Mastering Dojo – JavaScript and AJAX Tools for Great Web Experiences》是一本非常有价值的参考书籍,不仅适合初学者入门学习Dojo框架,也适合有经验的开发者深入了解Dojo的高级功能。通过本书的学习,读者...
Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,包括AJAX、DOM操作、动画效果、事件处理、数据存储等。标题提到的"dojo1.8.chm"是Dojo 1.8版本的离线帮助文档,通常包含API参考、教程和...
6 使用dojo.io.bind()的Ajax远程调用...................8 6.1.1 淡出和移除......9 6.1.2 使用XMLHttpRequest来告诉服务器发生了什么................... 9 7 拖放操作...................... 10 7.1.1 连接...
### Dojo控件的使用和入门心得 #### Dojo简介及其优势 Dojo是一个功能强大的JavaScript框架,专门设计用于简化富互联网应用(RIA)的开发。作为一种DHTML Toolkit,Dojo封装了大量的常用功能,旨在提高前端开发...
### Dojo技术入门知识点概述 #### 一、Dojo简介 Dojo是一个开源的JavaScript工具包,主要用于构建富互联网应用(Rich Internet Applications, RIA)。它具有轻量级且易于安装的特点,在Web 2.0时代,随着Ajax技术...
1. **入门**:熟悉Grails的基本操作和Dojo的核心概念。 2. **实践**:通过创建简单的Ajax功能,比如异步表单提交、动态数据加载等,来加深理解。 3. **进阶**:探索Dojo的Widget和扩展功能,如动画效果、图表绘制等...
### Dojo 快速入门详解 #### 一、Dojo Toolkit 概览 Dojo Toolkit 是一款开源的 JavaScript 工具包,专为构建现代化 Web 应用而设计。其核心价值在于通过提供一系列高质量的 API 和工具集,极大地简化了 Web 开发...
在这个"dojo例子 各方法的用法"的压缩包中,我们很可能会找到关于如何使用Dojo库的各种示例,包括"HelloWorld"这样的基础入门教程以及其他复杂功能的演示。 首先,让我们了解一下Dojo的核心概念。Dojo的基础模块`...