ajax定义与开发最简五步骤
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定义与开发最简五步骤的更多相关文章
- 【小程序】小程序开发自定义组件的步骤>>>>>>>>>小程序开发过程中报错：jsEnginScriptError
报错:jsEnginScriptError VM6342: jsEnginScriptError Component is not found in path "component/spac ...
- 深入分析JavaWeb Item23 -- jsp自己定义标签开发入门
一.自己定义标签的作用 自己定义标签主要用于移除Jsp页面中的java代码. 二.自己定义标签开发和使用 2.1.自己定义标签开发步骤 1.编写一个实现Tag接口的Java类(标签处理器类) 要编写一 ...
- C#微信公众号开发系列教程五（接收事件推送与消息排重）
微信公众号开发系列教程一(调试环境部署) 微信公众号开发系列教程一(调试环境部署续:vs远程调试) C#微信公众号开发系列教程二(新手接入指南) C#微信公众号开发系列教程三(消息体签名及加解密) C ...
- 《MFC游戏开发》笔记五 定时器和简单动画
本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/9332377 作者:七十一雾央 新浪微博:http:// ...
- 利用微软Speech SDK 5.1开发语音识别系统主要步骤
利用微软Speech SDK 5.1开发语音识别系统主要步骤 2009-09-17 10:21:09| 分类: 知识点滴|字号 订阅 微软语音识别分两种模式:文本识别模式和命令识别模式.此两种模式的 ...
- Knockout应用开发指南 第五章：创建自定义绑定
原文:Knockout应用开发指南 第五章:创建自定义绑定 创建自定义绑定 你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等).你可以你封装复杂的逻辑或行为,自定 ...
- 使用 CodeIgniter 框架快速开发 PHP 应用(五)
原文:使用 CodeIgniter 框架快速开发 PHP 应用(五) 简化 HTML 页面和表格设计这一章介绍了又一个节约你的时间而且使你的代码更具安全性和逻辑性的领域.第一,我们将会介绍创建视图的各 ...
- 开发指南专题五：JEECG微云高速开发平台代码生成器
开发指南专题五:JEECG微云高速开发平台代码生成器 1.1. Maven开发环境搭建 在搭建jeecg的maven开发环境之前,须要先配置好本机的maven环境,并在eclipse中安装好m2ecl ...
- iOS 11开发教程（五）iOS11模拟器介绍二
iOS 11开发教程(五)iOS11模拟器介绍二 3.iOS11模拟器中设置语言 对于不同国家的人来说,使用到的语言是不一样的.一般情况下iOS11模拟器默认使用的English(英语).对于英文不好 ...
随机推荐
- 【原创】Docker 搭建Maven私服nexus 3.17初始密码登录不上问题/admin登陆不上问题
[原创-转载请说明出处] 博主最近在虚拟机中搭建Maven私服,遇到了一个关键问题就是nexus 3.17版本后初始密码不是admin/admin123. 对于nexus不熟悉的我弄了很长时间!!!心 ...
- 微服务-springboot+websocket在线聊天室
一.引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
- Modbus RTU 通信应用案例
如何打开项目归档文件 例程中的TIA博途项目文件与STEP 7项目文件均为归档文件,需要按如下方式打开: TIA博途项目文件 1. 打开TIA博途软件,通过软件左下方“项目视图”按钮切换至项目视图: ...
- Java_Set用法总结
在java语言中,提供多种不同的结构来组织对象,Set(集合)是其中的一种,本身是一个接口,其迭代时的顺序取决于其具体实现. 典型的实现包括: HashSet:哈希表是通过使用称为散列法的机制来存储信 ...
- 二、JavaScript的语法
目录: 1.变量:存储数据的容器 2.数据类型 3.string数据类型 4.number数据类型 5.boolean数据类型 6.数据类型的隐式转换 6.数据类型转换函数 7.特殊类型 8.算术运算 ...
- Flask-登录练习
基于蓝图CBV模式的登录 使用蓝图并用cbv模式完成登录功能 登录成功后跳转到首页 将session保存在liunx上的redis数据库 使用before_request验证是否是登陆用户 蓝图 fr ...
- Jmeter接口测试实例-牛刀小试
本次测试的是基于HTTP协议的接口,主要是通过Jmeter来完成接口测试,借此熟悉Jmeter的基本操作. 本次实战,我是从网上找的接口测试项目,该项目提供了详细的接口文档,我们可以通过学习接口文档来 ...
- C语言中的函数与数学上的函数很类似
函数,是C语言编程中一个很重要的概念,重要到个人认为可以与指针并驾齐驱.好多教材.老师.学习资源都会专门挑出一章来讲函数.我今天也来说说函数,只不过我是从数学课上的函数来引申到C语言中的函数. 先来说 ...
- WePY的脱胎换骨
对于前端来说,尤其是开发小程序的前端来说,WePY框架一定不陌生,他是一种小程序开发框架.而且是属于类Vue风格,掌握Vue再来学习WePY学习成本极低. 今天为啥要写这篇文章呢,因为在复习WePY时 ...
- vijos p1449 字符串还原
学习<algorithm>下的reverse函数 #include<iostream> #include<string> #include<algorithm ...