用JS实现AJAX

用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 ( == xmlhttp.readyState) {
                    if ( == 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;
}

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