dojo入门4_ajax

yuzihan607

浏览: 21502 次
性别:
来自: 雅安

最近访客更多访客>>

liduke1020

gmxy

wensten

freedgree

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

dojo

dojo

上一篇文章，我们介绍了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入门5_iframe | dojo入门3_XHR对象

2011-09-27 11:13
浏览 1353
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论