Ajax-javascript
一、Web 2.0的特点
提到Ajax不得不提到WEB2.0
1、用户贡献内容
2、内容聚合RSS
3、更丰富的“用户体验”
二、Ajax的作用
无刷新：不刷新整个页面，只刷新局部
无刷新的好处
只更新部分页面，有效利用带宽
提供连续的用户体验
提供类似C/S的交互效果，操作更方
三、传统Web与Ajax的差异
四、Ajax简介
1、Ajax：异步刷新技术
2、Ajax工作流程
3、Ajax技术的核心-XMLHttpRequest提供异步发送请求的能力
3.1常用方法
3.2常用属性
readystate：XMLHttpRequest的状态信息
onreadystatechange：指定回调函数
status：HTTP的状态码
statusText ：返回当前请求的响应状态
responseText：获得响应的文本内容
responseXML：获得响应的XML文档对象
五、功能实现
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册</title>
</head>
<script type="text/javascript">
var xmlHttpRequest;
function validate(){
var uname = document.getElementById("uname").value;
if(uname==null || uname==""){
document.getElementById("unameDiv").innerText = "用户名不能为空！";
}else{
//1.创建XMLHttpRequest对象
xmlHttpRequest = createXmlHttpRequest();
//2.设置回调函数
xmlHttpRequest.onreadystatechange = callBack;
//3.初始化XMLHttpRequest组件
var url = "CheckNameServlet";
xmlHttpRequest.open("post",url,true);//get方式
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.发送请求
var data="uname="+uname;//需要发送的数据信息，name为用户名输入框获取的值
xmlHttpRequest.send(data);
}
} /*
*创建XMLHttpRequest对象
*/
function createXmlHttpRequest(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else{//返回值为false时说明是老版本IE浏览器（IE5和IE6）
return new ActiveXObject("Microsoft.XMLHTTP");
}
} //Ajax 回调函数
function callBack(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
var data = xmlHttpRequest.responseText;
if(data == "true"){
document.getElementById("unameDiv").innerText = "用户名已被使用！";
}else{
document.getElementById("unameDiv").innerText = "用户名可以使用！";
}
}
}
</script>
<body>
<form action="" id="form1" >
<table>
<tr>
<td>用 户 名：</td>
<td>
<input type="text" name="uname" id="uname" onblur="validate();" /> <font color="#c00fff">*</font>
</td>
<td>
<div id="unameDiv" style="display: inline"></div>
</td>
</tr>
</table>
</form>
</body>
</html>
CheckNameServlet
package com.qj.servlet; import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; /**
* Servlet implementation class CheckNameServlet
*/
@WebServlet("/CheckNameServlet")
public class CheckNameServlet extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public CheckNameServlet() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String uname = request.getParameter("uname");
System.out.println(uname);
PrintWriter out = response.getWriter();
if("admin".equals(uname)){
out.print("true");
}else{
out.print("false");
}
} /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
} }
Ajax-javascript的更多相关文章
- Ajax(javascript)案例
一.注册案例(Get方式) 1.前台 <%@ page language="java" import="java.util.*" pageEncoding ...
- 自己封装的Ajax - JavaScript
1. [代码][JavaScript]代码 //javascript Object: ajax Object//Created By RexLeefunction Ajax(url,data ...
- 《ajax学习》之ajax+JavaScript事件验证用户名是否可注册
当用户注册时,服务器数据库需要对用户输入的用户信息(以用户名为例子)进行验证,在不刷新页面的情况下又需要页面和服务器进行数据请求,最好的方法是用ajax异步请求. 一.实现思路: 1.用户输入信息 2 ...
- 初见Ajax——javascript访问DOM的三种访问方式
最近好啰嗦 最近在一间小公司实习,写一些小东西.小公司嘛,人们都说在小公司要什么都写的.果真是. 前端,后台,无论是HTML,CSS,JavaScript还是XML,Java,都要自己全包了.还好前台 ...
- html --- ajax --- javascript --- 简单的封装
Ajax的简单封装 Ajax的全称是AsynchronousJavaScriptAndXML 如有疑问请参考:http://zh.wikipedia.org/zh-cn/AJAX 以及传智播客的视频教 ...
- PHP Ajax JavaScript Json 实现天气信息获取
使用第三方服务 间接方式 思路 使用到的服务 实现代码 前端完整代码 总结 要在自己的网站上添加一个天气预报功能,是一个很普通的需求,实现起来也不是很难.今天来介绍几个简单的方法. 使用第三方服务 有 ...
- PHP Ajax JavaScript 实现 无刷新附件上传
普通表单 前端页面 后台处理 带有文件的表单 刷新方式 前端界面 后台页面 无刷新方式 大文件上传 POST极值 upload极值 上传细节 前端页面 后台处理 总结 对一个网站而言,有一个基本的不可 ...
- jquery ajax post, get, javascript ajax post, get 处理
ajax 创建 XMLHttp 对象IE7 以上的版本都支持 XMLHttpRequestIE7 以下的用 ActiveXObject async:true, // 当false 时,当执行完这个才 ...
- AJAX简介
基本介绍 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML). 国内翻译常为“阿贾克斯”和阿贾克斯足球队同音.Web应用的交互如Fli ...
- 「2014-3-13」Javascript Engine, Java VM, Python interpreter, PyPy – a glance
提要: url anchor (ajax) => javascript engine (1~4 articles) => java VM vs. python interpreter =& ...
随机推荐
- C#仪器数据文件解析-Word文件（doc、docx）
不少仪器数据报告输出为Word格式文件,同Excel文件,Word文件doc和docx的存储格式是不同的,相应的解析Word文件的方式也类似,主要有以下方式: 1.通过MS Word应用程序的DCOM ...
- MVC.NET 发布后，部署到iis ，网站中的Bootstrap的字体图标不能正常显示
时隔多日没有在博客中记录自己遇到的问题及解决方案了 ,今天给大家分享一个可能会遇到的一个鸡肋bug ! 如果你的项目是MVC并且在项目中引用了 Boostrap 框架,你在编辑发布后部署到iis的时候 ...
- .net Mvc框架原理
.net Mvc框架原理 本文只是简要说明原理,学习后的总结. 1.当一个Http请求发送后会被URLRoutingModule拦截(这时候也就是正式进入管道,下章会讲管道事件) 2.这时根据Isap ...
- linux系统下Python虚拟环境的安装和使用
前言:进行python项目开发的时候,由于不同的项目需要使用不同的资源包和相关的配置,因此创建多个python虚拟环境,在虚拟环境下开发就显得很有必要. 安装虚拟环境 步骤: 打开Linux终端(快捷 ...
- Python学习笔记（四）
Python学习笔记(四) 作业讲解 编码和解码 1. 作业讲解 重复代码瘦身 # 定义地图 nav = {'省略'} # 现在所处的层 current_layer = nav # 记录你去过的地方 ...
- Locust性能测试框架，从入门到精通
1. Locust简介 Locust是使用Python语言编写实现的开源性能测试工具,简洁.轻量.高效,并发机制基于gevent协程,可以实现单机模拟生成较高的并发压力. 主要特点如下: 使用普通的P ...
- SpringMVC 配置
1.在WEB-INF\web.xml中定义前端控制器 <servlet> <servlet-name>springmvc</servlet-name> <se ...
- LINUX 笔记-cal 命令
显示当前月份日历 命令:cal 显示指定月份的日历 命令:cal 9 2012 显示2016年日历 命令:cal 2016
- Java多线程编程核心技术
Java多线程编程核心技术 这本书有利于对Java多线程API的理解,但不容易从中总结规律. JDK文档 1. Thread类 部分源码: public class Thread implements ...
- 详解Java中的clone方法
详解Java中的clone方法 参考:http://blog.csdn.net/zhangjg_blog/article/details/18369201/ 所谓的复制对象,首先要分配一个和源对象同样 ...