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. 基于STM32之UART串口通信协议(一)详解

    一.前言 1.简介 写的这篇博客,是为了简单讲解一下UART通信协议,以及UART能够实现的一些功能,还有有关使用STM32CubeMX来配置芯片的一些操作,在后面我会以我使用的STM32F429开发 ...

  2. WebGL 着色器偏导数dFdx和dFdy介绍

    本文适合对webgl.计算机图形学.前端可视化感兴趣的读者. 偏导数函数(HLSL中的ddx和ddy,GLSL中的dFdx和dFdy)是片元着色器中的一个用于计算任何变量基于屏幕空间坐标的变化率的指令 ...

  3. CSS3之响应式布局及其应用

    使用 Media 属性前需添加兼容移动设备优先代码 <meta name=”viewport”content=”width=device-width,initial-scale=1.0,maxi ...

  4. 将GMap封装为Activex供QT使用(工具:VS2017,QT5.12) 更新部署到其它电脑

    由于一开始定的开发平台在QT下,到后面要加入地图控件.qt里本身带有地图qmap(在qt的官方案例中可以找到,用qml做的),但只有固定的几个地图源,要做google或者bing地图,时间和人力不允许 ...

  5. DFS(一):深度优先搜索的基本思想

    采用搜索算法解决问题时,需要构造一个表明状态特征和不同状态之间关系的数据结构,这种数据结构称为结点.不同的问题需要用不同的数据结构描述. 根据搜索问题所给定的条件,从一个结点出发,可以生成一个或多个新 ...

  6. Linux搭建DHCP服务器

    Linux搭建DHCP服务器   实验目标: 通过本实验掌握基于Linux的DHCP服务器搭建技能. 本实验包含内容为yum的认识与使用,磁盘挂载的概念与使用,DHCP原理及配置,systemctl服 ...

  7. 分布式全局ID生成方案

    传统的单体架构的时候,我们基本是单库然后业务单表的结构.每个业务表的ID一般我们都是从1增,通过AUTO_INCREMENT=1设置自增起始值,但是在分布式服务架构模式下分库分表的设计,使得多个库或多 ...

  8. throw 与 throws的比较

    说实话,今天在公司的实习,确确实实编号被严重打脸了,说真的,自己的基础功不扎实,希望慢慢弥补吧! 抛出异常有三种形式,一是throw,一个throws,还有一种系统自动抛异常,下面它们之间的异同. 一 ...

  9. MySQL sys Schema 简单介绍-1

    参考文档: MySQL- 5.7 sys schema笔记 MySQL 5.7新特性:SYS库详解 MySQL Performance Schema&sys Schema介绍 内存分配统计视图 ...

  10. springboot不加载mapper文件问题解析

    1. 场景描述 启动的时候报"springboot available: expected at least 1 bean which qualifies as autowire candi ...