您的位置：首页 > Web前端

web前端之dojo实际应用及开发三：dojo.xhr* 增强 Ajax（附有源码）

2016-12-02 16:12 1021 查看

web前端之dojo实际应用及开发三：dojo.xhr* 增强 Ajax（附有源码）

XHR框架是dojo对ajax支持的一组方法，允许想服务器端发出get、post、put、delete请求，这些方法包括：

xhrGet

xhrPost

xhrPut

xhrDelete

所有这些函数都遵守相同的语法：接受一个属性配置对象作为参数。可以定义想要发出的 Ajax 请求的各个方面。再一次说明，这些选项在所有 XHR 函数中都是一样的。

比较常用的选项：

url：这是 HTTP 请求的 URL。

handleAs：允许您定义响应的处理格式，默认是 text，但是，json、javascript、xml、还有一些其他选项也可用。

form：form元素的一个引用或者字符串 ID 表示。form 中每个字段的值将被同请求一起作为请求体发送。

content：一个对象，包含您想要传递给请求体中资源的参数。如果两者都提供，这个对象将与从 form 属性中获取的值混合在一起。

load：当 Ajax 请求返回一个成功响应消息时，执行此函数。等同于ajax中的success: function(doc){}

error：如果 Ajax 请求出现问题，该函数将被调用。等同于ajax中的error: function(doc){}

handle：该函数允许您将加载和错误回调函数合并到一个函数中（如果确实不关心请求结果是成功或是出现错误，这将非常有用）。等同于ajax中的complete: function(doc){}

这几种类型的请求对于构建一个REST风格的框架很有用，用xhrGet查看数据，xhrPost修改数据，xhrPut创建数据，xhrDelete删除数据，每一种类型的请求对应一种服务器端具体的操作。

查看数据：

dojo.xhrGet({
url: "save_data.php",
content: {
id: "100",
first_name: "Joe",
last_name: "Lennon"
}
});

小例子：

data.json：

{
count: 4,
people: [
{
first_name: "Joe",
last_name: "Lennon",
age: 25
},{
first_name: "Darragh",
last_name: "Duffy",
age: 33
},{
first_name: "Jonathan",
last_name: "Reardon",
age: 30
},{
first_name: "Finian",
last_name: "O'Connor",
age: 23
}
]
}

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>dojo</title>
</head>
<body>
<h1>dojo</h1>
<div id="message">This is a DIV element with id attribute message.</div>
<ul id="list">
<li>This is the first item in a list</li>
<li class="highlight">This is the second item in a list</li>
<li>This is the third item in a list</li>
</ul>
<script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true">
</script>
<script>
dojo.xhrGet({
url:"./data.json"//哪个连接或者文件
,handleAs:"json"//数据格式
,load:function(data){//成功时加载这个
var table="<table border='1'>";
table += "<tr><th>Name</th><th>Age</th></tr>";

dojo.forEach(data.people,function(person){
table += "<tr><td>";
table += person.first_name+" "+person.last_name;
table += "</td><td>";
table += person.age;
table += "</td></tr>";
});

table += "</table>";
dojo.place(table,dojo.body());//dojo.place添加table到body
}
,error:function(data){//失败是传输这个
alert("传输失败");
}
,handle:function(data){//不管这个ajax失败或者成功都运行这个函数
alert("无论怎样都运行");
}
});

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： web前端 dojo JavaScript

相关文章推荐

新的分享

章节导航