ajax无翻页刷新简单实例-优快云博客

本文介绍了一个简单的示例，演示了如何利用Ajax从前端页面调用后台进行两个数相加的操作，并实时显示结果。该示例包括前端HTML页面和后端处理程序两部分。

1，前台页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
<script type="text/javascript">
var xmlHttp;

function createXMLHttpRequest()
{
    if(window.ActiveXObject)
    {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest)
    {
        xmlHttp = new XMLHttpRequest();
    }
}

function addNumber()
{
    createXMLHttpRequest();
    var url= "Handler.ashx?Num1="+document.getElementById("num1").value+"&Num2="+document.getElementById("num2").value;
    xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange=showResult;
    xmlHttp.send(null);
}

function showResult()
{
    if(xmlHttp.readyState==4)
    {
        if(xmlHttp.status==200)
        {
            document.getElementById("result").value=xmlHttp.responseText;
        }
     }
}
</script>
</head>

<body>

</div>
</body>
</html>

2，计算页面：

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using System.Text;

public class Handler : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        int result = Convert.ToInt32(context.Request.QueryString["Num1"]) + Convert.ToInt32(context.Request.QueryString["Num2"]);
        context.Response.Write(result);
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}

转载于:https://www.cnblogs.com/xgcblog/archive/2011/08/19/2145748.html