AJAX 基础，简单的实例：计算器

AJAX 组成
1.表示　　　　　　XHTML+CSS
2.动态显示和交互　DOM
3.数据交互和操作　XML、XSLT
4.异步数据获取　　XMLHttpRequest
5.绑定和处理数据　JavaScript

----------------------------------------
XMLHttpRequest 对象

     Number readyState 4
 属  Function onreadystatechange
     string responseText
     XMLDocument responseXML
 性  Number status 200
     string statusText OK

     void open(string,string,boolean)
               1.GET,POST,HEAD,PUT,DELETE
                 OPTIONS,TRACE
               2.url
               3.true
 方  void send(string)
     void setHeader(string,string)
 　  string getResponseHeader(string)
 法  string getAllResponseHeaders()
     void abort()

----------------------------------------
AJAX 应用

　　　　　　　　　　   提交
1.　　 XMLHttpRequest————>请求

　　　　　　   返回          分析
2、3.　服务器————>数据<————JavaScript



Default.aspx页面

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

<! 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 > AJAX之加法运算示例 </ title >
     < script type = " text/javascript " >
        var xmlHttp;
        function createXMLHttpRequest()
         {//创建XMLHttpRequest对象
            if(window.ActiveXObject)
            {//判断浏览器，是否是IE浏览器
                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;//传值到Handler.ashx处理
            xmlHttp.open("GET",url,true);//将url以GET方式提交打开，并使用异步方式，false是同步
            xmlHttp.onreadystatechange=showResult;//将onreadystatechange方法赋值
            xmlHttp.send(null);
        }
        function showResult()
         {
            if(xmlHttp.readyState==4)
            {//判断是否完成
                if(xmlHttp.status==200)
                {//判断是否成功
                    document.getElementById("result").value=xmlHttp.responseText;//将发送回来的值传递到文本框中
                }
            }
        }
     </ script >
</ head >
< body >
     < form id = " form1 "  runat = " server " >
     < div style = " text-align: center " >
         < input id = " num1 "  style = " width: 99px "  type = " text "  value = " 0 "  onkeyup = " addNumber(); "   />+< input id = " num2 "  style = " width: 95px "
            type = " text "  value = " 0 "  onkeyup = " addNumber(); "   />=< input id = " result "  style = " width: 99px "  type = " text "   /></ div >
     </ form >
</ body >
</ html >

小程序Handler.ashx

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

using  System;
using  System.Web;

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;
        }
    }

}

点此下载代码