用JS实现AJAX

准备工作：新建网站，建立两个页面，index.aspx和backstage.aspx，

             在工程目录下新建一个文件夹命名和image，在这里添加一个loading.gif,模拟提交进度

 

一，前台页面代码：在index.aspx中编写

   1，在网页要显示数据的地方，添加一个DIV.源代码如下

< div  id ="showtext" ></ div >

 

 

   2, 添加脚本程序，代码如下。

       

代码

< script language = " javascript "  type = " text/javascript " >

        function GetTextFromBack() {
            document.getElementById( ' showtext ' ).setAttribute( " innerHTML " ,  " <img src=\ " image / loading.gif\ "  />载入中... " );
            var xmlhttp;
             try  {
                xmlhttp  =   new  XMLHttpRequest();
            }  catch  (e) {
                xmlhttp  =   new  ActiveXObject( " Microsoft.XMLHTTP " );
            }

            xmlhttp.onreadystatechange  =  function() {
                 if  ( 4   ==  xmlhttp.readyState) {
                     if  ( 200   ==  xmlhttp.status) {
                        var Bodys  =  xmlhttp.responseText;
                        document.getElementById( ' showtext ' ).setAttribute( " innerHTML " , Bodys);

                        //  parent.document.all.iframemain.style.height = window.document.body.scrollHeight;
                        //  parent.document.all.iframemain.style.width = window.document.body.scrollWidth;
                    }
                }
            }

            xmlhttp.open( " post " ,  " backstage.aspx?name= "   +   " zhangfei " ,  true );
            xmlhttp.setRequestHeader( ' Content-type ' ,  ' application/x-www-form-urlencoded ' );
            xmlhttp.send( "" );
            
        }

     </ script >

 

 

   3，加入一个触发事件的按钮

 

   < input  type ="button"  onclick ="GetTextFromBack()"  style ="width: 77px"   />

 

 

 

 二，后台页面，backstage.aspx

    1，清除backstage.aspx中的html的内容，除一第一行的源代码，如下所示

 

      <% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " backstage.aspx.cs "  Inherits = " backstage "   %>

 

     只保存这一行，不然的话，后面发送的时候，会把其他代码都做为字符串发送回去。

 

    2， 进行C#源程序编辑界面backstage.aspx.cs,添写如下代码

代码

  protected   void  Page_Load( object  sender, EventArgs e)
    {
         string  nameFormat  =  Request.Params[ " name " ];

        nameFormat  =   " 你的名字是： " + nameFormat;

        Response.Write(nameFormat);
    }

 

      

到此就可以模拟出AJAX功能了。

可以以此程序为模板，后台拼写字符串，以实现复杂的操作。

 

注： 以下这条代码的意思是，是重载onreadystatechange方法，

xmlhttp.onreadystatechange  =   function () {
                  ......
             }

 

类似的可以，重写

 

window.onload  =   function ()
{
 parent.document.all.pzright.style.height = window.document.body.scrollHeight;
 parent.document.all.pzright.style.width = window.document.body.scrollWidth;
}

 

可以利用原有的函数，实现在自已特定的功能。

转载于:https://www.cnblogs.com/batv2009/archive/2010/07/16/1778910.html