[Ajax]AJAX的简单应用(加法运算示例)

简介:

1.首先创建Web空文件

2.在页面中添加三个按钮,并命名为num1,num2,result

3.添加script脚本:

<head runat="server">     <title>AJAX之加法运算示例</title>     <style type="text/css">         #Text1         {             width: 66px;         }         #Text2         {             width: 66px;         }         #Text3         {             width: 66px;         }         #num1         {             width: 70px;         }         #num2         {             width: 70px;         }         #result         {             width: 70px;         }     </style>     <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>         <input id="num1" type="text" value="0" onkeyup="addNumber();"/>+<input id="num2" type="text"              value="0" onkeyup="addNumber();"/>=<input id="result" type="text" /></div>     </form> </body> </html>


4.在文本框的属性中添加 onkeyup属性,添加addNumber()函数

5.添加一般事件处理程序

并修改函数

 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);
        }
6.运行

在文本框中输入一个数,相应的结果就会显示出来





















本文转自蓬莱仙羽51CTO博客,原文链接:http://blog.51cto.com/dingxiaowei/1366625,如需转载请自行联系原作者


相关文章
|
4月前
|
前端开发 JavaScript Java
使用Ajax进行异步交互:提升Java Web应用的用户体验
【4月更文挑战第3天】Ajax技术在Web开发中提升UX,通过与服务器异步交互实现页面局部更新,无需完整刷新。核心组件包括XMLHttpRequest、JavaScript、HTML/CSS及服务器端脚本。在Java Web应用中,可使用原生JavaScript或框架如jQuery、AngularJS实现Ajax请求。Ajax减少页面刷新,实现实时数据更新,即时表单验证和动态UI,显著改善用户体验,是现代Web开发不可或缺的一部分。
68 0
|
20天前
|
前端开发 Java UED
瞬间变身高手!JSF 与 Ajax 强强联手,打造极致用户体验的富客户端应用,让你的应用焕然一新!
【8月更文挑战第31天】JavaServer Faces (JSF) 是 Java EE 标准的一部分,常用于构建企业级 Web 应用。传统 JSF 应用采用全页面刷新方式,可能影响用户体验。通过集成 Ajax 技术,可以显著提升应用的响应速度和交互性。本文详细介绍如何在 JSF 应用中使用 Ajax 构建富客户端应用,并通过具体示例展示 Ajax 在 JSF 中的应用。首先,确保安装 JDK 和支持 Java EE 的应用服务器(如 Apache Tomcat 或 WildFly)。
27 0
|
2月前
|
XML 前端开发 API
惊艳全场的秘诀!AJAX、Fetch API与Python后端,打造令人惊叹的Web应用!
【7月更文挑战第13天】构建现代Web应用的关键在于提供无缝用户体验,这涉及AJAX和Fetch API的异步数据交换以及Python(如Flask)的后端支持。Fetch API以其基于Promise的简洁接口,改进了AJAX的复杂性。例如,一个Flask应用可提供用户数据,前端利用Fetch API在不刷新页面的情况下显示信息。这种结合提升了效率,减少了服务器负载,是现代Web开发的趋势。随着技术发展,预期将有更多工具优化这一过程。
52 3
|
3月前
|
前端开发 Python
Django框架中Ajax GET与POST请求的实战应用
Django框架中Ajax GET与POST请求的实战应用
|
3月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
4月前
|
JavaScript 前端开发
node.js第四天--ajax在项目中的应用
node.js第四天--ajax在项目中的应用
46 0
|
4月前
|
设计模式 开发框架 前端开发
ajax应用设计模式,Ajax设计模式下Web开发的研究与应用
ajax应用设计模式,Ajax设计模式下Web开发的研究与应用
|
4月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
68 0
|
前端开发 UED
Ajax有哪些应用场景?
Ajax 技术是 Web 开发中非常重要的一种技术,能够提高网站性能、减轻服务器压力、优化用户体验
157 0
|
前端开发
Ajax&Fetch学习笔记 06、ajax实际应用(三种)
Ajax&Fetch学习笔记 06、ajax实际应用(三种)
Ajax&Fetch学习笔记 06、ajax实际应用(三种)