Dojo-ajax framework

October 19, 2021By Simo Dojo

xhrGet is the most important function in the XHR framework and is used the most frequently. Use it to request static text resources on the server, such as txt, xml, etc., and to obtain dynamic pages such as php, jsp, asp, etc., as long as the character data stream is returned from the server.

In addition to xhrGet, Dojo’s XHR framework also includes xhrPost, rawXhrPost, xhrPut, rawXhrPut, xhrDelete. These functions are similar to xhrGet, and you can refer to xhrGet for the usage and parameters. The difference lies in their HTTP request type. xhrPost sends a Post request, xhrPut sends a Put request, and xhrDelete sends a Delete request.

Let’s look at a few examples:< /p>

< span style="line-height:1.8">1,Use xhrGet request text resource

Client——

 <%@ PageLanguage =“C#”AutoEventWireup< span style="margin:0px; padding:0px; border:none; background-color:inherit">=“true”CodeBehind=“HelloDojoAjax.aspx.cs”< span style="margin:0px; padding:0px; border:none; background-color:inherit"> 
 Inherits=“DojoTest.HelloDojoAjax”%>
 
 >< /span>
 <htmlxmlns=“http://www.w3.org/1999/xhtml”>
 <headrunat =“server”> li>
  <title>title> span>
 <scriptsrc=“http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js” type=“text/javascript”> script>
 < scripttype=“text/javascript”> li>
  
 function　helloWorld(){
  Dojo.xhrGet({
 　　　　 url:”HelloDojo.txt”,//Requested server resource url
 　　　　 HandleAs:”text”,//Returned data Type
 　　　　 load:function(response,ioArgs){alert(response);},//Callback function after success 
 　　　　 error:function(error,ioArgs){alert(error.message);}//Callback function when an error occurs
 　　});
 } 
 
 //Initialization function after binding page loading
  dojo.ready(helloWorld);
 script> 
 head>
 <body> li>
 
 body>
 html span>>

Server-side resources——

 hello world!!Dojo!

2, use xhrGet to obtainJson Data

Client——

< div class="dp-highlighter bg_html" style="font-family:Consolas,'Courier New',Courier,mono,serif; overflow:auto; word-break:break-word; color:rgb(51,51,51 ); margin:18px 0px!important">

<%@ PageLanguage=“C#”< span style="margin:0px; padding:0px; border:none; background-color:inherit">AutoEventWireup=“true”CodeBehind=“DojoAjaxJson.aspx.cs”Inherits= “DojoTest.DojoAjaxJson”%>
>
<htmlxmlns =“http://www.w3.org/1999/xhtml”>
< headrunat=“server”>

< li style="padding:0px; border-style:none none none solid; border-left-width:3px; border-left-color:rgb(108,226,108); list-style:decimal outside; background-color:rgb(248,248,248 ); line-height:1.6; margin:0px!important"> <title> title>

<%– Introduce Dojo–%>
<script src=” http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js” type=“text/javascript”>script>
<script type=“text/javascript”>
function GetJsonData() {
dojo.xhrGet({
url: “GetCity.aspx”, //请求的服务器资源url
handleAs: “json”, //返回的数据类型
handle: PrintResult//回调函数
});
return false;
}
//对返回的json数据进行处理，放入表格
function PrintResult(data){
var table = “<table border=\”1\”>“;
table += “<tr><th>ProvinceIdth><th>CityNameth>tr>“;
dojo.forEach(data, function(city) {
table += “<tr><td>“;
table += city.ProvinceId;
table += “td><td>“;
table += city.CityName;
table += “td>tr>“;
});
table += “table>“;
dojo.place(table, dojo.body());
}
function init() {
//helloworld 函数到按钮的点击事件
dojo.connect(dojo.byId(“mybutton”), “onclick”, “GetJsonData”);
}
//绑定页面加载完成后的初始化函数
dojo.ready(init);
script>

head>

<body>

      <input type=“button” id=“mybutton” value=“获取json数据” />

body>

html>

服务端——

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;



namespace JqueryAjaxTest.Data

{

    public partial class GetCity : System.Web.UI.Page

    {



        protected void Page_Load(object sender, EventArgs e)

        {

            string r esult = @”

[{“”ProvinceId””:””BJ””,””CityName””:””北京””},

{“”ProvinceId””:””TJ””,””CityName””:””天津””}]”;



           //清空缓冲区

           Response.Clear();

           //将字符串写入响应输出流

           Response.Write(result);

           //将当前所有缓冲的输出发送的客户端，并停止该页执行

           Response.End();

        }



    }

}

3、使用xhrGet提交表单

客户端——

<%@ Page Language=“C#” AutoEventWireup= “true” CodeBehind=“DojoAjaxText.aspx.cs” Inherits=“DojoTest.DojoAjaxText” %>



>

<html xmlns=“http://www.w3.org/1999/xhtml”>

<head runat=“server”>

    <title>title>

    <%– 引入 Dojo–%>

    <script src=“http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js” type=“text/javascript”>script>

    <script type=“text/javascript”>



        function SubmitForm() {

            dojo.xhrGet({

                url:”GetService.aspx”,

                form: “myform”, //需要异步提交的表单的 id

                handleAs: “text”, //默认值，不对返回的数据做任何处理

                handle: PrintResult, //正常和错误返回的情况都能处理，可以说是 load 和 error 的混合体，但优先级比 load 低，只有在没有设置 load 时才起作用。

                content:{Password:”123456″},//这里可以修改表单中的内容，如果起始表单都为空，则修改无效

                sync:false //默认为异步，所设不设false意义不大



            });

            return false; //为了阻止系统默认的表单提交事件，让表单提交异步进行，如果不返回 false，会引起页面跳转。

        }



        function PrintResult(response){

            dojo.create(

                “div”,

                {

                    “innerHTML”: response

                },

                dojo.body()

              );

        }

    script>

head>

<body>

    <form id=“myform” < span class="attribute" style="margin:0px; padding:0px; border:none; background-color:inherit">onsubmit=“return SubmitForm();”>

        用户名：<input type=“text” name=“UserID” />

        密码：<input type=“password” name=“Password” />

        <input type=“submit” name=“sub” value=“提交” />

    form>

body>

html>

服务端——

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;



namespace DojoTest

{

    public partial class GetService : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            string id = “”;

            string pwd = “”;

            //获取参数

            if (!String.IsNullOrEmpty(HttpContext.Current.Request[“UserID”]) && !String.IsNullOrEmpty(HttpContext.Current.Request[“Password”]))

            {

                id = HttpContext.Current.Request[“UserID”];

                pwd=HttpContext.Current.Request[“Password”];

            }



            //清空缓冲区

            Response.Clear();

            //将字符串写入响应输出流

            Response.Write(“用户输入id为：”+id+”,输入密码为：”+pwd);

            //将当前所有缓冲的输出发送的客户端，并停止该页执行

            Response.End();



        }

    }

}

注意：

1、

回调函数PrintResult包含两个参数：response 和 ioArgs。

response：表示从服务器端返回的数据，Dojo 已经根据 handleAs 设置的数据类型进行了预处理。

ioArgs: 这是一个对象，包含调用 xhrGet 时使用的一些参数。之所以把这些信息放在一个对象中并传递给回调函数是为了给回调函数一个执行“上下文”，让回调函数知道自己属于哪个 HTTP 请求，请求有哪些参数，返回的数据是什么类型等。这些信息在调试程序时特别有用。

ioArgs.url：请求的 URL，与调用 xhrGet 时设置的值一样。

ioArgs.query：请求中包含的参数， URL 中“ ? ”后面的内容。

ioArgs.handAs：如何对返回的数据进行预处理，与调用 xhrGet 时设置的值一样。

ioArgs.xhr： xhrGet 函数使用的 XHR 对象。

2、handleAs（预处理方式）

text：默认值，不对返回的数据做任何处理

xml：返回 XHR 对象的 responseXML

javascript：使用 dojo.eval 处理返回的数据，返回处理结果

json：使用 dojo.fromJSon 来处理返回的数据，返回生成的 Json 对象

json-comment-optional：如果有数据包含在注释符中，则只使用 dojo.fromJSon 处理这部分数据，如果没有数据包含在注释符中，则使用 dojo.fromJSon 处理全部数据。

json-comment-filtered：数据应该包含在 /* … */ 中，返回使用 dojo.fromJSon 生成的 Json 对象，如果数据不是包含在注释符中则不处理。

3、代码中的注释，也说明了一些值得注意的地方。

<%@ Page Language=“C#” AutoEventWireup=“true” CodeBehind=“HelloDojoAjax.aspx.cs”

    Inherits=“DojoTest.HelloDojoAjax” %>



>

<html xmlns=“http://www.w3.org/1999/xhtml”>

<head runat=“server”>

    <title>title>

    <script src=“http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js” type=“text/javascript”>script>

    <script type=“text/javascript”>



      function　helloWorld(){

          dojo.xhrGet({

　　　　        url:”HelloDojo.txt”,//请求的服务器资源url

　　　　        handleAs:”text”,//返回的数据类型

　　　　        load:function(response,ioArgs){alert(response);},//成功后回调函数

　　　　        error:function(error,ioArgs){alert(error.message);}//出错时回调函数

　　        });

       }



       //绑定页面加载完成后的初始化函数

       dojo.ready(helloWorld);

    script>

head>

<body>



body>

html>

hello world!!Dojo!

<%@ Page Language=“C#”< /span> AutoEventWireup=“true” CodeBehind=“DojoAjaxJson.aspx.cs” I nherits=“DojoTest.DojoAjaxJson” %>



>

<html xmlns=“http://www.w3.org/1999/xhtml”>

<head runat=“server”>

    <title>title>

    <%– 引入 Dojo–%>

    <script src=“http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js” type=“text/javascript”>script>



    <script type=“text/javascript”>

        function GetJsonData() {

            dojo.xhrGet({

                url: “GetCity.aspx”, //请求的服务器资源url

                handleAs: “json”, //返回的数据类型

                handle: PrintResult//回调函数

            });

            return false;

        }





        //对返回的json数据进行处理，放入表格

        function PrintResult(data){



            var table = “<table border=\”1\”>“;

            table += “<tr><th>ProvinceIdth><th>CityNameth>tr>“;

            dojo.forEach(data, function(city) {

                table += “<tr><td>“;

                table += city.ProvinceId;

                table += “td><td>“;

                table += city.CityName;

                table += “td>tr>“;

            });

            table += “table>“;

            dojo.place(table, dojo.body());

       }



       function init() {

           //helloworld 函数到按钮的点击事件

           dojo.connect(dojo.byId(“mybutton”), “onclick”, “GetJsonData”);

       }



       //绑定页面加载完成后的初始化函数

       dojo.ready(init);

    script>

head>

<body>

      <input type=“button” id=“mybutton” value=“获取json数据” />

body>

< span class="tag-name" style="margin:0px; padding:0px; border:none; background-color:inherit">html>

using System;

using System.Collections.Generic;

using System.Linq;

usi ng System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;



namespace JqueryAjaxTest.Data

{

    public partial class GetCity : System.Web.UI.Page

    {



        protected void Page_Load(object sender, EventArgs e)

        {

            string result = @”

[{“”ProvinceId””:””BJ””,””CityName””:””北京””},

{“”ProvinceId””:””TJ””,””CityName””:””天津””}]”;



           //清空缓冲区

           Response.Clear();

           //将字符串写入响应输出流

           Response.Write(result);

           //将当前所有缓冲的输出发送的客户端，并停止该页执行

           Response.End();

        }



    }

}

<%@ Page Language=“C#” AutoEventWireup=“true” CodeBehind=“DojoAjaxText.aspx.cs” Inherits=“DojoTest.DojoAjaxText” %>



>

<html xmlns=“http://www.w3.org/1999/xhtml”>

<head runat=“server”>

    <title>title>

    <%– 引入 Dojo–%>

    <script src=“http://ajax.googl eapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js” type=“text/javascript”>script>

    <script type=“text/javascript”>



        function SubmitForm() {

            dojo.xhrGet({

                url:”GetService.aspx”,

                form: “myform”, //需要异步提交的表单的 id

                handleAs: “text”, //默认值，不对返回的数据做任何处理

                handle: PrintResult, //正常和错误返回的情况都能处理，可以说是 load 和 error 的混合体，但优先级比 load 低，只有在没有设置 load 时才起作用。

                content:{Password:”123456″},//这里可以修改表单中的内容，如果起始表单都为空，则修改无效

                sync:false //默认为异步，所设不设false意义不大



            });

            return false; //为了阻止系统默认的表单提交事件，让表单提交异步进行，如果不返回 false，会引起页面跳转。

        }



        function PrintResult(response){

            dojo.create(

                “div”,

                {

                    “innerHTML”: response

                },

                dojo.body()

              );

        }

    script>

head>

<body>

    <form id=“myform” onsubmit=“return SubmitForm();”>

        用户名：<input type=“text” name=“UserID” />

        密码：<input type=“password” name=“Password” />

        <input type=“submit” name=“sub” value=“提交” />

    form>

body>

html>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;



namespace DojoTest

{

    public partial class GetService : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            string id = “”;

            string pwd = “”;

            //获取参数

            if (!String.IsNullOrEmpty(HttpContext.Current.Request[“UserID”]) && !String.IsNullOrEmpty(HttpContext.Current.Request[“Password”]))

            {

                id = HttpContext.Current.Request[“UserID”];

                pwd=HttpContext.Current.Request[“Password”];

            }



            //清空缓冲区

            Response.Clear();

            //将字符串写入响应输出流

            Response.Write(“用户输入id为：”+id+”,输入密码为：”+pwd);

            //将当前所有缓冲的输出发送的客户端，并停止该页执行

            Response.End();


        }

    }

}

Leave a Comment Cancel reply