JS中xmlhttp异步传送的应用

来源：互联网发布：手写数字识别软件编辑：程序博客网时间：2024/04/28 11:54

先创建一个HTML/HTM页面,我这里用的是VS2005(C#),创建成功后,命名为:HTMLPage.HTM
再创建一个ASPX动态页面,命名为:AJAX.ASPX.这个页面的作用是处理传送过来的请求。
   注:AJAX.ASPX的源中,要把所有的HTML标签删除,只留下一行必须的代码,处理后的界面如下:
      <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AJAX.aspx.cs" Inherits="AJAX" %>
      好,第一步就这样完成了.现在我们回到HTMLPage.HTM页面中.
      对HTM页面的操作如下:
      1.在BODY区内创建一个按钮,id为botton,显示的名称为:"演示",
      然后,再创建一个id为show的DIV,作为接收后台服务器的消息回传处理区.代码如下:
<body>
    <input type="button" id="button"   value="演示" />
    <div id="show" style="width:300px; height:200px; border-style:solid;  border-width:1px; border-color:BlueViolet;"></div>
</body>
      2.在<HEAD>内,写入对应的JS,注意.这里我的解释比较详细,自己看JS代码,应该不难.代码如下:

<script type="text/javascript"  language="javascript">
        function getXML(fragment_url,divid,errorMessage,loadingMessage)
        {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                 xmlhttp= new XMLHttpRequest(); //FF
            } else if (window.ActiveXObject) {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//IE
            }
          //有两种方式:get POST
          //fragment_url 表示URL.,记住:由于是JavaScript代码,所有的浏览器都不允许访问域外,也就是只能够访问本站内的后台.这是处于安全问题考虑
          //false表示异步,true表示同步
          xmlhttp.open("GET", fragment_url,false);
          xmlhttp.onreadystatechange = function(){
            //判断连接成功,成功获取到数据
             if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                        //alert(xmlhttp.responseXML.documentElement);
                        //这里的xmlhttp.responseText就是获取到的数据,当然,还有responseBody之类
                        DoOk(xmlhttp.responseText,divid);
             }else{
                //表示连接失败
                 DoNo(errorMessage,divid);
             }
          }
          xmlhttp.send();
        }
        function Doing(msg,divid)
        {//数据处理中的信息.当然,这里你也可以对当前容器添加一个你所谓的圆圈图片 ^_^
            document.getElementById(""+divid+"").innerHTML=msg;
        }
        function DoOk(msg,divid)
        {//对返回数据的操作:将数据填充到指定容器
         //当然,你这里也可以提供其他操作
           document.getElementById(""+divid+"").innerHTML=msg;
        }
        function DoNo(msg,divid)
        {//返回异常的处理
            document.getElementById(""+divid+"").innerHTML=msg;
        }
        function theclick()
        {
            //加载数据ing...
            Doing("稍等哈,数据正在加载中...","show");
            alert("由于服务器处于本机上,所以在这里做一个提示来隔开,要不然,时间会很短暂,您根本不可能看到数据的显示!");
            getXML('AJAX.ASPX','show','错误啦!!!!!','稍等哈,数据正在加载中....');
        }
    </script>
注意:上面的theclick()中,我们用到了
getXML('AJAX.ASPX','show','错误啦!!!!!','稍等哈,数据正在加载中....');
所以ajax.aspx页面一定要与本HTM页面处于同一目录.如果是上一目录,就可以这样
getXML('../AJAX.ASPX','show','错误啦!!!!!','稍等哈,数据正在加载中....');
明白吧?
好啦,现在回到AJAX.ASPX.CS页中,在对应的Page_Load事件中写入返回的值.我随便的写了些东西.相关代码如下:
protected void Page_Load(object sender, EventArgs e)
    {
        //为了演示会显示,所以我们让线程等待一段时间后显示,方便前台演示
        //不过如果是上传到服务器后,不要这个东西哟.要不然,就麻烦了^_^
        System.Threading.Thread.Sleep(3000);//等待3秒,便于前台看效果
        //注意,这里就可以根据前台传递过来的东西:Request.QueryString[""]进行判断返回值.当然,我这里没有,哈哈
        Response.Write("当前数据显示成功~```````HOHO~~~!
我也来一个:
  Hello,Word!");
    }
此时来运行HTMLPage.HTM,就OK啦,明白了吗?

0 0