zoukankan      html  css  js  c++  java
  • 解读现时Web应用中流行的网页无刷新B/S交互技术

      随着所谓无刷新网页交互技术的流行,Ajax做为一个代表在网页无刷新中可谓是无人不晓,是不?
      我认为Ajax只是将下面类似的这些功能都封装起来,利用Ajax.Utility.RegisterTypeForAjax(server_Class)来注册服务器端方法,并实现IHttpHander接口来实现脚本的插入(当然不是插入到页面中,而是输出到<Script>的Src中),办法是很好哦,实现了源JavaScript的隐藏。
      其实无刷新网页交互也并不是很复杂,我们也可以自己写代码做到,它(基于Microsoft的)主要用到Microsoft.XMLHTTP和Microsoft.XMLDOM或者System.Xml.XmlDocument来实现大部分的功能(至少我认为是这样)。
      为了让大家更明白这个技术,
      现在来看一段代码(JavaScript):

      var obj = document.forms(0);var valueObj;var valuesObj;var tmpVal = "";
      var UpdateStr = "<ROOT>";
      for(var i = 0; i < document.forms(0).elements.length; i ++)
      {
       valueObj = obj.elements[i];
       if(valueObj.type=="text"||valueObj.type=="textarea"||valueObj.type=="hidden")
       {
        if(UpdateStr.indexOf("<" + valueObj.name + ">") > 0)
         continue;

        UpdateStr += "<" + valueObj.name + ">" + valueObj.value + "</" + valueObj.name + ">";
       }
       else if(valueObj.type=="checkbox")
       {
        UpdateStr += "<" + valueObj.name + ">";
        valuesObj = document.getElementsByName(valueObj.name);
        for(e=0;e<valuesObj.length;e++)
        {
         if(valuesObj[e].checked)
         {
          tmpVal += (tmpVal.length > 0 ? "," : "") + valuesObj[e].value;
         }
        
         i ++;
        }
        UpdateStr += tmpVal;
        UpdateStr += "</" + valueObj.name + ">";
       
        i--;
       }
       else if(valueObj.type=="radio" && valueObj.checked)
       {
        UpdateStr += "<" + valueObj.name + ">" + valueObj.value + "</" + valueObj.name + ">";
       }
            
       tmpVal = "";
      }
      UpdateStr += "</ROOT>";

      var xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP");
      xmlHTTP.open("POST","HandleProcess.asp",false);//或者  xmlHTTP.open("POST","HandleProcess.aspx",false);
      xmlHTTP.send(UpdateStr);
      
      var ret = xmlHTTP.responseText;

     alert(ret);

    这段代码的功能就是将表单里面的数据组合成一个XML字符串并发送到服务器端处理程序,


    现在再来看一下服务器端的接收处理部分代码:
                'ASP(VB)
                Response.CharSet = "GB2312"
                set xmlrec=server.CreateObject("microsoft.xmldom")
                xmlrec.async=false
                xmlrec.load(Request)

                struserid=xmlrec.documentelement.selectSingleNode("uid").Text
                struname=trim(xmlrec.documentelement.selectSingleNode("uname").Text)
                ...
                Response.Write("执行成功!")

                =====================================
                'VB.NET
                Dim xmlrec As New System.Xml.XmlDocument
                xmlrec.Load(Request.InputStream)

                Dim Exampaperno As String, state As String, strchild As String
                Exampaperno = xmlrec.DocumentElement.SelectSingleNode("Exampaperno").InnerText
                strchild = xmlrec.DocumentElement.SelectSingleNode("strchild").InnerText
                ....
                Response.Write("执行成功!")

                =====================================
                //C#
                System.Xml.XmlDocument xmlrec = New System.Xml.XmlDocument;
                xmlrec.Load(Request.InputStream);

                string Exampaperno, state, strchild;
                Exampaperno = xmlrec.DocumentElement.SelectSingleNode("Exampaperno").InnerText;
                strchild = xmlrec.DocumentElement.SelectSingleNode("strchild").InnerText;
                ....
                Response.Write("执行成功!");
               
    看一下就明白了吧,xmlrec.documentelement.selectSingleNode和Request或者Request.Params的功能相差无几,几乎是一样的。


    厉害吧??很相似的操作,很简单的操作就将客户端与服务器端程序连接起来了,而且是几种语言的程序都操作方法简单且相似。

    再稍加修改变化,我们就可以做出一个很成功的无刷新基于浏览器的聊天室,或者其它业务处理程序!!

    欢迎访问我的网站( Ajax + .NET + Rss/Xml + Access ) : WWW.Neaboo.com

  • 相关阅读:
    微信小程序promise解决onload异步
    小程序中使用 Less (VScode)
    Vue中使用less
    小程序获取 图片宽高
    ssh 登录出现Are you sure you want to continue connecting (yes/no)?解决方法
    SQL SERVER 收缩日志
    SQL SERVER-日期时间
    oracle判断查询结果是否为空
    修改Tomcat默认JDK版本
    Microsoft SQL Server Management Studio ------- 附加数据库 对于 服务器“xxx&amp;amp;quot;失败(错误码5120)
  • 原文地址:https://www.cnblogs.com/llbofchina/p/316150.html
Copyright © 2011-2022 走看看