arg*_*rge 5 javascript ajax dojo
这是我简单的dojo示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/dijit.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/claro/claro.css">
<title>ShowMovies </title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true" src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo.js"></script>
<script type="text/javascript">
require(
[ "dojo", "dojo/parser", "dijit/layout/BorderContainer",
"dijit/layout/ContentPane", "dojox/grid/DataGrid",
"dojo/data/ItemFileReadStore" ],
function(dojo) {
dojo.ready(function() {
dojo.xhrGet( {
url : "MovieList.json",
handleAs : "json",
load : function(response, ioArgs) {
var newData = {
identifier: "title",
items: response.result
};
var dataStore = new dojo.data.ItemFileReadStore({data: newData, id:"dataStoreId"});
var grid = dijit.byId("gridId");
grid.setStore(dataStore);
},
error : function(response, ioArgs) {
alert(response);
}
});
});
});
</script>
<link rel="stylesheet" type="text/css" title="Style" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" title="Style" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojox/grid/resources/claroGrid.css">
</head>
<body class="claro">
<div id="BorderContainer" style="height: 100%; width: 100%"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline'">
<div data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'top'" style="text-align: center">My Movie Web Application!</div>
<div data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'center'">
<table id="gridId" autowidth="true"
data-dojo-type="dojox.grid.DataGrid"
data-dojo-props="rowSelector:'20px'">
<thead>
<tr>
<th field="title">Title</th>
<th field="director">Director</th>
<th field="actor">Actor</th>
<th field="description">Description</th>
</tr>
</thead>
</table>
</div>
<div data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'right'"></div>
</div>
</body>
</html>
为什么我收到xhrGet请求的错误？响应是:dijit.byid不是函数
谢谢
Fro*_*ode 10
快速回答是:当您async:true在Dojo配置中时,您的Javascript代码中可能没有任何以dojo.或开头的内容dijit..
在过去,在Dojo 1.5及更早版本中,Dojo及其模块的工作方式与今天的方式略有不同.
在那个时候,你可能包括的dojo.js,立即有一系列的方便功能可用,例如dojo.create,dojo.connect,dojo.xhrGet,dijit.byId和许多许多.如果你想要包含一些额外的模块或小部件,你可以使用dojo.require然后用dojo.some.thing或引用模块dijit.other.thing.
在较新版本的Dojo中,当您在页面上包含dojo.js时,实际上只能获得两个函数:require和define.您可以使用这些功能"导入"您需要的所有内容.即使是小dojo.create到的东西,你也必须导入一个模块.
一开始,你可能会发现这非常不方便.如果你对Dojo为什么采取这个方向及其好处感兴趣,你可以查看这个幻灯片.
回到你的代码.你有async:true很多dojo.和一些dijit.陈述.以下是3种解决方法:
更改async:true为false.这使得道场处理代码中的"老"的风格,也就是你的dojo.和dijit.应该仍然工作.
保留async:true,但导入特殊dijit/dijit模块,这使旧dijit.功能可用.所以你的第一行是这样的:(
require(["dojo","dijit/dijit",....], function(dojo, dijit, ...) {
"dojo"模块也是一个允许"旧"风格的特殊模块.)
将您的代码重写为全新的AMD风格.这意味着每一个dojo.和dijit.,你需要找出你需要导入哪些模块.如果你已经有很多Dojo代码,那将会有点工作.你问题中的代码看起来像这样:http://fiddle.jshell.net/8DETs/
您可能会想到自己:为每件小事装载文件/模块必须非常慢!而你是对的.我们的想法是,当您在本地开发时,它将足够快,当您部署Web应用程序时,您将使用Dojo的构建工具在极少数文件中创建精简包.这是Dojo的绝对优势之一,你可以在这里阅读更多相关内容:http://dojotoolkit.org/documentation/tutorials/1.9/build/