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开发的,而且我们研发 ...
随机推荐
- Django的form表单之文件上传
在生成input标签的时候可以指定input标签的类型为file类型 <!DOCTYPE html> <html lang="en"> <head&g ...
- Python多线程练习(threading)
这几天学习python多线程的时候,试了几次thread模块和threading模块,发现thread模块非常的不好用.强烈不建议大家使用thread,建议使用threading模块,此模块对thre ...
- Python操作excel表格
用Python操作Excel在工作中还是挺常用的,因为毕竟不懂Excel是一个用户庞大的数据管理软件 注:本篇代码在Python3环境下运行 首先导入两个模块xlrd和xlwt,xlrd用来读取Exc ...
- asp.net或javascript判断是否手机访问
/// <summary> /// 判断手机用户UserAgent /// </summary> /// <returns></returns> pri ...
- Color Blender---在线渐变色带生成器
Color Blender是一个很有用的在线渐变色带生成器,它可以在两种颜色之间,自动生成过渡色,对网页设计师来说是一个不错的颜色调配工具. Color Blender的使用方法很简单,你只 ...
- Js全选 添加和单独删除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ABAP 选择屏幕创建标签页
*&---------------------------------------------------------------------* *& Report ZTEST_TAB ...
- 如何从MVP模式进阶到Clean模式
从类图上来看,MVP都是一个业务一个Presenter,每个Presenter都是一个接口,它还包含了View的接口,用于定于和View相关的行为,然后Activity等业务类实现View的接口,因为 ...
- OpenSCAD 建模:相框
下载地址:https://github.com/ZhangGaoxing/openscad-models/tree/master/PhotoFrame 代码: module bottom(){ dif ...
- 张高兴的 Windows 10 IoT 开发笔记:ADXL345 加速度传感器
GitHub : https://github.com/ZhangGaoxing/windows-iot-demo/tree/master/ADXL345Demo