14.javaweb AJAX技术详解
一、简介
1, ajax:在不重新加载网页的前提下,与服务器交换数据并更新部分网页的技巧,但其本身并不是一种新技术
2, 核心:XMLHttpRequest对象。AJAX技术主要是通过此对象完成的。
在创建此对象的时候一定要考虑浏览器的问题
XMLHttpRequest对象的创建
XMLHttpRequest对象属性
其中readyState有五种取值
XMLHttpRequest对象方法
3, 简单示例:利用ajax完成局部刷新功能:局部刷新,在<span>中导入content.html内容
content.html内容
Flush.html
xmlHttp.onreadystatechange=showMsgCallback;表示当xmlHttp的请求状态改变时,就会调用showMsgCallback()方法,事实上,当xmlHttp.send()发送请求到响应完成,readyState会经历”2“(请求正在处理)、”3”(请求已经处理)、”4“(响应完成)三次变化,如果回调函数在xmlHttp.send()之前设置,便会调用三次showMsgCallback()方法。我们设置readyState=4时执行操作,因为此时响应完成,服务器会把回应内容填充到xmlHttp.response***属性中
点击“调用ajax显示内容”则会动态的在<span>中生成”取得数据”
二、ajax异步验证:当新用户注册信息时,输入ID后,异步验证ID是否可用
login.html
注意此处用到的地址重写的方式
Checkservlet
package com.chen.ying; import java.io.PrintWriter; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class CheckId extends HttpServlet { final String DBDIVRE="com.mysql.jdbc.Driver"; final String URL="jdbc:mysql://localhost:3306/test"; final String USER="root"; final String PASSWORD="1995228"; Connection conn=null; PreparedStatement pstmt=null; ResultSet rs=null; public void doGet(HttpServletRequest req,HttpServletResponse res){ int userid=Integer.parseInt(req.getParameter("userid")); try{ System.out.println(userid); PrintWriter out=res.getWriter();//得到回应的输出流 Class.forName(DBDIVRE); conn=DriverManager.getConnection(URL,USER,PASSWORD); String sql="select userid from person where userid=?"; pstmt=conn.prepareStatement(sql); pstmt.setInt(1, userid); rs=pstmt.executeQuery(); if(rs.next()){ System.out.println("用户ID重复"); out.print("true"); } else{ System.out.println("ID可用"); out.print("false"); } }catch(Exception e){ System.out.println(e); } } public void doPost(HttpServletRequest req,HttpServletResponse res){ this.doGet(req, res); } }
效果
当用户输入id,光标离开输出框后,利用ajax技术,异步验证输入的id是否重复
三、返回XML数据
1, 要求
14.javaweb AJAX技术详解的更多相关文章
- Ajax技术详解
Ajax技术:Ajax描述了一种主要使用脚本(JS)操纵HTTP的web应用架构,它的主要特点是使用脚本操纵HTTP和web服务器进行数据交换,不会导致页面重载.Ajax的核心是JS的XMLHttpR ...
- $.ajax()常用方法详解(推荐)
AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分.接下来通过本文给大家介绍ajax一些常用方法,大家有需要可以一起学习. 1.url: 要求为String类型的参数 ...
- 触碰jQuery:AJAX异步详解
触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...
- jQuery调用AJAX异步详解[转]
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- 触碰jQuery:AJAX异步详解(转)
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- AJAX请求详解 同步异步 GET和POST
AJAX请求详解 同步异步 GET和POST 上一篇博文(http://www.cnblogs.com/mengdd/p/4191941.html)介绍了AJAX的概念和基本使用,附有一个小例子,下面 ...
- Comet技术详解:基于HTTP长连接的Web端实时通信技术
前言 一般来说,Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Ser ...
- SSE技术详解:一种全新的HTML5服务器推送事件技术
前言 一般来说,Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Ser ...
- Protocol Buffer技术详解(Java实例)
Protocol Buffer技术详解(Java实例) 该篇Blog和上一篇(C++实例)基本相同,只是面向于我们团队中的Java工程师,毕竟我们项目的前端部分是基于Android开发的,而且我们研发 ...
随机推荐
- Dynamic Inversions 50个树状数组
Dynamic Inversions Time Limit: 30000/15000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others ...
- Judge Route Circle
Initially, there is a Robot at position (0, 0). Given a sequence of its moves, judge if this robot m ...
- git仓库管理笔录
Git是目前世界上最先进的分布式版本控制系统(没有之一). 小明做了个个人博客,放到了Git 仓库里面.第二天换了台电脑,只需要 git clone 克隆一下git 远程仓库的代码到本地即可.然后他 ...
- Oracle的常用命令之备份和恢复数据库
1 将数据库TES完全导出,用户名system 密码manager 导出到D:\daochu.dmp中 exp system/manager@TEST file=d:\daochu.dmp 2 将数据 ...
- 初学者易上手的SSH-struts2 02Action获取表单数据-通配符
在上一章中,我们已经搭建好了struts2的一个开发环境,那么这一章就来做一个简单的登录功能,以及介绍和使用struts2里面一个重要的东西-通配符. 第一步,在WebContent下面新建一个log ...
- akka源码导读
akka的actor模型提供了强大的并发,本人就akka源码进行了详细的阅读,下面是一些体会. 1.object SystemMessageList: @tailrec private[sysmsg] ...
- Ubuntu 16.04 LTS 下安装MATLAB2015b 以及Matlab system error解决办法
下载MATLAB2015b破解版 操作系统:Ubuntu 16.o4 LTS 程序文件:Matlab2015b-glnxa64破解版 解压提取文件:在ubuntu系统下可以直接提取压缩文件,得到三个文 ...
- PHP中使用 $_GET 与$_POST 实现简单的前后台数据传输交互功能
在之前的学习过程中我们接触过前后台数据请求交互的方法有表单提交.AJAX请求以及Angularjs中的$http,今天我们尝试在PHP中使用 $_GET 与$_POST 实现简单的前后台数据传输交互功 ...
- win10 uwp 车表盘 径向规
车表盘就是有刻度的圆盘加上针,这个控件可以直观让用户知道当前的速度或其他 看名字不知道是什么,我就放一张图 使用很简单,在Nuget,Radial Gauge 要使用大神做的,简单,在使用我们需要在N ...
- STM32F10XX存储器细节
>> STM32F10XX系统架构 >> 程序存储器.数据存储器.寄存器和输入输出端口被组织在同一个4GB的线性地址空间内. >> 数据字节以小端格式存放在存储 ...