dojo入门4_ajax
moxiaoxi 2011-09-27
上一篇文章，我们介绍了dojo的XHR框架，正是因为有了XHR框架，才使得异步交互成为了现实，极大的提高了用户体验，并且减少了网络负载，下面来介绍一些XHR中的重要方法
使用xhrGet方法来获取资源
functionhelloWorld(){
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的属性也可以不是一个无名函数，而是一个已经定义好的函数，如
functiondisplay(data,ioArgs){
alert(data);
}
functionhelloWorld(){
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>
<scriptsrc="../dojo/dojo.js"
djConfig="parseOnLoad:true"></script>
<script>
functionhandler(response)
{document.write(response);}
functionsubmitForm(){
dojo.xhrGet({
form:"loginForm",
handleAs:"text",
handle:handler,
content:{pwd:"modified"},
sync:false
});
returnfalse;
}
</script>
<formid="loginForm"onsubmit="returnsubmitForm();"action="data.jsp">
<inputtype="textfield"name="id"/>
<inputtype="password"name="pwd"/>
<inputtype="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”)获取提交的数据
