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

最新推荐文章于 2023-02-22 10:03:52 发布

爸爸去哪了2之熊猫三胞胎

最新推荐文章于 2023-02-22 10:03:52 发布

阅读量690

点赞数 1

本文链接：https://blog.csdn.net/u014785563/article/details/53435905

版权

web前端同时被 3 个专栏收录

99 篇文章 1 订阅

订阅专栏

JavaScript

86 篇文章 0 订阅

订阅专栏

dojo

15 篇文章 0 订阅

订阅专栏

本文介绍了dojo的xhr*方法，用于增强Ajax操作，包括xhrGet, xhrPost, xhrPut, xhrDelete。通过设置不同选项如url、handleAs、form和content等，实现与服务器的交互。示例代码展示了如何使用xhrGet来查看数据，为构建RESTful API提供了便利。" 134758226,15115704,特权信息引导的缺失数据分类与特征重要性识别,"['数据挖掘', '人工智能', '机器学习', '缺失数据处理', 'LSSVM']

摘要由CSDN通过智能技术生成

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>