web前端之dojo实际应用及开发三:dojo.xhr* 增强 Ajax(附有源码)

    xiaoxiao2021-12-14  17

    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实际应用及开发六:页面布局(附有源码) web前端之dojo实际应用及开发五:丰富的用户界面(附有源码) web前端之dojo实际应用及开发四:面向对象开发[关键](附有源码) web前端之dojo实际应用及开发三:dojo.xhr* 增强 Ajax(附有源码) web前端之dojo实际应用及开发二:事件处理(附有源码) web前端之dojo实际应用及开发一:开始dojo(附有源码) web前端之Dojo与jQuery综合比较分析 web前端之dojo(用javascript语言实现的开源DHTML工具包)

    转载请注明原文地址: https://ju.6miu.com/read-965352.html

    最新回复(0)