dojo入门四_ajax
日期：2014-05-16 浏览次数：20690 次
dojo入门4_ajax
上一篇文章，我们介绍了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}，用来输出表单中的密码字段。
上一篇文章，我们介绍了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}，用来输出表单中的密码字段。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
