用JS实现AJAX

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

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

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

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

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

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

代码

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;

}

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

秒客网

用JS实现AJAX

用JS实现AJAX

相关文章