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 =& ...
随机推荐
- windows下Maven的安装与配置
1 安装maven前首先确认计算机已正确安装JDK2 下载maven 地址:http://maven.apache.org/download.html安装文件格式如下:apache-maven-3.0 ...
- php中各种定义变量的方法
1.定义常量define("CONSTANT", "Hello world."); 常量只能包含标量数据(boolean,integer,float 和 s ...
- JAVA基础-反射
一.反射的介绍 JAVA反射机制是在运行状态中,能够获取任意一个类的所有属性和方法,对于任意一个对象,都能够调用它的任意一个方法.这种动态获取的以及动态调用对象的方法的功能称为java语言的反射机制. ...
- 慢SQL汇总
select count(*) as aggregate from `yqz_feed_praise` where `uid` = '580242' and `praise_uid` <> ...
- vim中SnipMate 和 YouCompleteMe 插件触发键 tab 冲突
花了好几天废了九牛二虎之力终于在win下把ycm插件装上了 然而在配置插件的时候发现snipmate插件与youcompleteme插件会发生tab键冲突 而ycm比较调,直接使snipmate插件完 ...
- 使用Xmanager通过XDMCP连接远程Centos 7 (摘自xmanager官方博客)
Using Xmanager to connect to remote CentOS 7 via XDMCP Gnome in CentOS 7 tries to use local hardware ...
- VPS搭建离线下载服务器——后网盘时代
动机 由于学习的需要,在国外某服务器厂商购买了vps服务(至于是哪个厂商就不说啦).但是呢,就算用作梯子,一个月1T的流量总是用不完.最经觉得自己营养充足,想找点电影看看. 无奈现在百度网盘的速度真的 ...
- Linux 源码编译Python 3.6
Linux 源码编译Python 3.6 1.操作系统以及版本显示 # uname -sr Linux 3.10.0-514.el7.x86_64 # uname -sr Linux 3.10.0-5 ...
- 伤不起的微信小程序
前段时间不是很忙,刚好公司需要开发一个微信小程序,于是我就入坑了(此坑还是有点深滴,请备好干粮). 我是一名iOS开发工程师,个人觉得入门开发小程序的话,需要基本的web前端知识,比如说:代码的书写格 ...
- 0_Simple__simpleAssert + 0_Simple__simpleAssert_nvrtc
在核函数中使用强制终止函数 assert().并且在静态代码和运行时编译两种条件下使用. ▶ 源代码:静态使用 #include <windows.h> #include <stdi ...