ajax是什么?

a (async异步)  j (javascript)  a (and)  x (xml)即异步的javascript和xml

ajax特点：异步 不刷新整个页面 (局部刷新)

web1.0 用表单直接提交数据

数据要提交,只能通过表单, 表单提交的时候,页面会刷新

web2.0 用ajax提交数据

ajax提交数据的时候,页面不会刷新

ajax是用js来写的, xml载体,数据交换格式

ajax如何实现

通过XMLHttpRequest类实现

五步骤：

1) 创建对象 XMLHttpRequest
2) 打开连接
3) 注册监听器
4) 发送请求
5) 处理结果

代码实现

index.jsp页面

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 </head>

 <body>

     <input id="a" tyep="text" name="a">+

     <input id="b" tyep="text" name="b">

     <input onclick="method()" type="button" value="=">

     <input id="sum" type="text" name="c">

     <script>

         function method() {

             var a = document.getElementById("a").value;

             var b = document.getElementById("b").value;

             //1创建对象

             var req = new XMLHttpRequest();

             //2打开连接

             req.open("GET", "sum.jsp?a1="+a+"&b1="+b);

             //3注册监听器

             req.onreadystatechange = function() {

                 //5处理返回数据

                 document.getElementById("sum").value = req.responseText;

                 console.log(req.responseText);

             }

             //4发送

             req.send();

         }

     </script>

 </body>

 </html>

sum.jsp页面

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <%

 String a = request.getParameter("a1");

 String b = request.getParameter("b1");

 out.print(Integer.valueOf(a)+Integer.valueOf(b));

 %>

ajax定义与开发最简五步骤的更多相关文章

  1. 【小程序】小程序开发自定义组件的步骤>>>>>>>>>小程序开发过程中报错：jsEnginScriptError

    报错:jsEnginScriptError VM6342: jsEnginScriptError Component is not found in path "component/spac ...

  2. 深入分析JavaWeb Item23 -- jsp自己定义标签开发入门

    一.自己定义标签的作用 自己定义标签主要用于移除Jsp页面中的java代码. 二.自己定义标签开发和使用 2.1.自己定义标签开发步骤 1.编写一个实现Tag接口的Java类(标签处理器类) 要编写一 ...

  3. C#微信公众号开发系列教程五（接收事件推送与消息排重）

    微信公众号开发系列教程一(调试环境部署) 微信公众号开发系列教程一(调试环境部署续:vs远程调试) C#微信公众号开发系列教程二(新手接入指南) C#微信公众号开发系列教程三(消息体签名及加解密) C ...

  4. 《MFC游戏开发》笔记五 定时器和简单动画

    本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/9332377 作者:七十一雾央 新浪微博:http:// ...

  5. 利用微软Speech SDK 5.1开发语音识别系统主要步骤

    利用微软Speech SDK 5.1开发语音识别系统主要步骤 2009-09-17 10:21:09|  分类: 知识点滴|字号 订阅 微软语音识别分两种模式:文本识别模式和命令识别模式.此两种模式的 ...

  6. Knockout应用开发指南 第五章：创建自定义绑定

    原文:Knockout应用开发指南 第五章:创建自定义绑定 创建自定义绑定 你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等).你可以你封装复杂的逻辑或行为,自定 ...

  7. 使用 CodeIgniter 框架快速开发 PHP 应用(五)

    原文:使用 CodeIgniter 框架快速开发 PHP 应用(五) 简化 HTML 页面和表格设计这一章介绍了又一个节约你的时间而且使你的代码更具安全性和逻辑性的领域.第一,我们将会介绍创建视图的各 ...

  8. 开发指南专题五：JEECG微云高速开发平台代码生成器

    开发指南专题五:JEECG微云高速开发平台代码生成器 1.1. Maven开发环境搭建 在搭建jeecg的maven开发环境之前,须要先配置好本机的maven环境,并在eclipse中安装好m2ecl ...

  9. iOS 11开发教程（五）iOS11模拟器介绍二

    iOS 11开发教程(五)iOS11模拟器介绍二 3.iOS11模拟器中设置语言 对于不同国家的人来说,使用到的语言是不一样的.一般情况下iOS11模拟器默认使用的English(英语).对于英文不好 ...

随机推荐

  1. Python开发【第七篇】： 面向对象和模块补充

    内容概要 特殊成员 反射 configparser模块 hashlib模块 logging模块 异常处理 模块 包 1. 特殊成员 什么是特殊成员呢? __init_()就是个特殊的成员. 带双下划线 ...

  2. C++学习笔记 之 运算符

    用来执行特定的数字或逻辑操作,C++主要提供的运算符如下: 算数运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 杂项运算符 算数运算符: 主要运算符:+(加).-(减) .*(乘) ./(除) ...

  3. Java中字符串的一些常用操作方法

      package test; public class  maintest {public static void main(String[] args) {String str = "a ...

  4. white box白盒测试

    逻辑覆盖法:语句覆盖,判定覆盖,条件覆盖,判定/条件覆盖,组合覆盖,路径覆盖 基本路径测试法:Control Flow Graphs, CFG.带箭头的边 条件覆盖:使每个判定中每个条件的可能值至少满 ...

  5. Linux 勿卸载软件，所有命令不能用了咋办

    1. 一次有趣的事 有个做技术的(不说什么岗位,容易被人喷,谁都有失手的时候),在公司的业务测试环境的机器,卸载了一个软件rpm -e --nodeps filesystem* , 导致机器所有的命令 ...

  6. eclipse中一个项目引用另一个项目，运行报：java.lang.NoClassDefFoundError

    项目右击-properties-Java Build Path -Porjects-add.选中了某个项目. 项目用tomcat启动时,报错:java.lang.NoClassDefFoundErro ...

  7. 为什么Java只有值传递？

    形参和实参 形式参数,是在方法定义阶段,是定义某个函数时使用的参数,用于接收实参传入.例f(x,y)中x和y是形参. 实际参数,是在方法调用阶段,是主调函数调用有参函数时,实际传递的内容.例f(3,7 ...

  8. 致远A8任意文件写入漏洞_getshell_exp

    近期爆出致远 OA 系统的一些版本存在任意文件写入漏洞,远程攻击者在无需登录的情况下可通过向 URL /seeyon/htmlofficeservlet POST 精心构造的数据即可向目标服务器写入任 ...

  9. 十代雅阁广东车友群，雅阁广州车友群，深圳雅阁车友群，雅阁微信群、雅阁车友群、十代雅阁交流微信QQ群

    最近一直在关注第十代雅阁,不论是普通汽油版本还是油电混动版本都很不错,在网上看到很多评测文章和视频 后续都会整理发布到微信群中. 由于论坛发帖,博客发文都不是很方便,为了及时沟通,先创建了微信群,方便 ...

  10. Linux日志系统分析：rsyslog、syslog和klog

    参考博客: https://blog.csdn.net/lidonghat/article/details/55004280 https://blog.csdn.net/u012247418/arti ...