ajax的入门

最新推荐文章于 2025-08-12 15:10:50 发布

sendling

最新推荐文章于 2025-08-12 15:10:50 发布

阅读量813

点赞数

CC 4.0 BY-SA版权

分类专栏： Ajax学习历程文章标签： ajax xmlhttprequest xhtml javascript xslt server

本文链接：https://blog.youkuaiyun.com/sendling/article/details/3085794

Ajax学习历程专栏收录该内容

3 篇文章

订阅专栏

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

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

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

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

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

一个简单的例子

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

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

<%@ 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()
        {
            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>
    <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>

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