ajax的入门

 本文是学习总结,说明这里的来源浪曦下载视频教程
AJAX 组成
1.表示　　　　　　XHTML+CSS
2.动态显示和交互　DOM
3.数据交互和操作　XML、XSLT
4.异步数据获取　　XMLHttpRequest
5.绑定和处理数据　JavaScript

----------------------------------------

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

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

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

 

一个简单的例子

实现功能输入2个数字返回2个数字的和

建一个Default代码如何,在创建一个处理文件Handler.ashx

1. <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5. <html xmlns="http://www.w3.org/1999/xhtml" >
6. <head runat="server">
7.     <title>AJAX之加法运算示例</title>
8.     <script type="text/javascript">
9.         var xmlHttp;
10.         function createXMLHttpRequest()
11.         {
12.             if(window.ActiveXObject)
13.             {
14.                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
15.             }
16.             else if(window.XMLHttpRequest)
17.             {
18.                 xmlHttp = new XMLHttpRequest();
19.             }
20.         }
21.         function addNumber()
22.         {
23.             createXMLHttpRequest();
24.             var url= "Handler.ashx?Num1="+document.getElementById("num1").value+"Num2="+document.getElementById("num2").value;
25.             xmlHttp.open("GET",url,true);
26.             xmlHttp.onreadystatechange=showResult;
27.             xmlHttp.send(null);
28.         }
29.         function showResult()
30.         {
31.             if(xmlHttp.readyState==4)
32.             {
33.                 if(xmlHttp.status==200)
34.                 {
35.                     document.getElementById("result").value=xmlHttp.responseText;
36.                 }
37.             }
38.         }
39.     </script>
40. </head>
41. <body>
42.     <form id="form1" runat="server">
43.     <div style="text-align: center">
44.         <input id="num1" style="width: 99px" type="text" value="0" onkeyup="addNumber();" />+<input id="num2" style="width: 95px"
45.             type="text" value="0" onkeyup="addNumber();" />=<input id="result" style="width: 99px" type="text" /></div>
46.     </form>
47. </body>
48. </html>

1. <%@ WebHandler Language="C#" Class="Handler" %>
3. using System;
4. using System.Web;
6. public class Handler : IHttpHandler {
7.     
8.     public void ProcessRequest (HttpContext context) {
9.         context.Response.ContentType = "text/plain";
10.         int result = Convert.ToInt32(context.Request.QueryString["Num1"]) + Convert.ToInt32(context.Request.QueryString["Num2"]);
11.         context.Response.Write(result);
12.     }
14.     public bool IsReusable {
15.         get {
16.             return false;
17.         }
18.     }
20. }