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开发的,而且我们研发 ...
随机推荐
- 【codevs1001】[bzoj1050]舒适的路线
给你一个无向图,N(N<=500)个顶点, M(M<=5000)条边,每条边有一个权值Vi(Vi<30000).给你两个顶点S和T,求 一条路径,使得路径上最大边和最小边的比值最小. ...
- 概率图论PGM的D-Separation(D分离)
目录[-] 本文大部分来自:http://www.zhujun.me/d-separation-separation-d.html 一.引言 二.三种情况分析 三.总结 四.应用例子 五.参考资料 其 ...
- 无向图广度优先遍历及其matlab实现
广度优先遍历(breadth-first traverse,bfts),称作广度优先搜索(breath first search)是连通图的一种遍历策略.之所以称作广度优先遍历是因为他的思想是从一个顶 ...
- 一张图理清ASP.NET Core启动流程
1. 引言 对于ASP.NET Core应用程序来说,我们要记住非常重要的一点是:其本质上是一个独立的控制台应用,它并不是必需在IIS内部托管且并不需要IIS来启动运行(而这正是ASP.NET Cor ...
- SQLserver学习(四)——T-SQL编程之事务、索引和视图
今天来分享下T-SQL高级编程中的事务.索引.视图,可以和之前的SQL server系列文章结合起来. 一.事务 事务(TRANSACTION)是作为单个逻辑工作单元执行的一系列操作,这些操作作为一个 ...
- 关于extjs表单布局的几种方式
一.用column布局 layout:'column', defaults:{ style:'float:left;margin:4px;', columnWidth: 0.49, msgTarget ...
- YYHS-NOIP模拟赛-gcd
题解 这道题题解里说用莫比乌斯反演做(我这个蒟蒻怎么会做呢) 但是不会,所以我们另想方法,这里我们用容斥来做 我们先把500000以内的所有质数筛出来 每次读入编号的时候,先把编号对应的这个数分解质因 ...
- TensorFlow问题:The TensorFlow library wasn't compiled to use SSE4.2 instructions, but these are available on your machine and could speed up CPU computations.
1. 问题描述 The TensorFlow library wasn't compiled to use SSE4.2 instructions, but these are available o ...
- uva10003 - Cutting Sticks(简单动规)
/* * Author: Bingo * Created Time: 2015/2/13 18:33:03 * File Name: uva10003.cpp */ #include <iost ...
- 简易RPC框架-客户端限流配置
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...