01.创建jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<!--
传统的web和ajax的区别：
01.发送方式不同：
传统的web同步发送！
ajax异步发送！
02.服务器响应不同：
传统的web响应的是一整个页面！
ajax响应的只是用户需要的数据！
03. 客户端处理的方式不同
传统的web必须等待整个网页加载完毕，才能继续操作！
ajax可以动态的刷新局部内容，不影响用户的其他操作！
Ajax (Asynchronous javaScript and xml) 一种局部刷新的技术！
包含了 js xml json...等技术！
核心对象：XMLHttpRequest
常用的方法：
01.open(method,url,async)
method:请求的方式
url:请求的地址，get请求时可以拼接参数
async:是否异步交互
02.send(data)
data:get请求时！可以是null ，也可以不写 ！
03.setRequestHeader(String header,String value):设置http请求信息
04.getResponseHeader(String header):获取指定响应的信息
事件：回调函数 onreadystatechange
常用的属性：
readyState: XMLHttpRequest的状态码
0：没有完成初始化
1：请求准备好了，可以开始发送
2：请求发送完成
3：开始读取相应
4: 响应完成
status:http的状态码
200：服务器正确返回响应
403：没有访问权限
404：请求的资源不存在
500：服务器内部错误！
......
responseText:以文本的形式获取响应的内容！
responseXML：将xml格式的响应内容转换成dom对象返回！
-->
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
//输入框失去焦点时 触发的事件
function validate(){
var name= $("[name='userName']").val(); //js中是.value;
if(name==null||name==""){
$("div").html("<span style='color:red'>用户名不能为空</span>");
}else{
//01.创建XMLHttpRequest核心对象
var xhr=createXhr();
//02.设置回调函数
xhr.onreadystatechange=callBack;
//03.初始化xhr的组件
var url="ValidateServlet?name="+name;
xhr.open("GET",url,true);
//04.发送请求 get请求的时候 可以是null 也可以不写参数
xhr.send(null);
//回调函数
function callBack(){
if(xhr.readyState==4&&xhr.status==200){ //代表响应正确返回
var data= xhr.responseText; //文本的方式获取后台响应的数据
if (data.match("true")) {//data=="true"
$("div").html("<span style='color:red'>用户名已经被占用！！！</span>");
}else{
$("div").html("<span style='color:red'>用户名可以正常使用！！！</span>");
}
}
}
}
}
//创建XMLHttpRequest核心对象
function createXhr(){
if(window.XMLHttpRequest){ //高版本的浏览器
return new XMLHttpRequest();
}else{ //低版本
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
</script>
</head>
<body>
<input type="text" name="userName" onblur="validate();">
<div></div>
<img alt="小猫咪" src="images/cat.jpg">
</body>
</html>
02.创建对应的servlet
public class ValidateServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response); // 执行post请求
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("servlet begin");
// 获取前台name
String name = request.getParameter("name");
boolean flag = false;
if ("admin".equals(name)) {
flag = true; // 默认已经存在
}
// 把信息给前台
PrintWriter pw = response.getWriter();
pw.print(flag);
pw.flush();
pw.close();
System.out.println("servlet over");
}
}
/**
get方式配置组件
xhr.open("GET","ValidateServlet?name="+name,true);
xhr.send(null); 或者 xhr.send();
post方式配置组件
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//04.发送请求
var data="name="+name+"&pwd="+"12354";
xhr.send(data);
*/
03.jquery实现ajax
/**
使用jquery实现ajax!
常用的属性：
url:请求的地址
type:请求的方式 默认是 get
data：发送的数据
dataType:预期服务器返回的类型
beforeSend:发送请求之前调用的函数
success：成功之后调用的函数
error:失败调用的函数
complete：请求完成后调用的函数（无论失败还是成功）
$.ajax({
url:"ValidateServlet",
type:"get",
data:"name="+name,
dataType:"text",
beforeSend:function(){
},
success:function(){
},
error:function(){
}
})
*/
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'jquery.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function() {
$("[name='userName']")
.blur(
function() { //输入框的失去焦点事件
var name = $("[name='userName']").val(); //获取用户的输入内容
if (name == null || name == "") {
$("div")
.html(
"<span style='color:red'>用户名不能为空</span>");
} else {
$.ajax({ //使用jquery实现ajax技术
url : "ValidateServlet", //请求的地址
type : "get", //请求的方式 默认是get
data : "name=" + name, //请求携带的参数
dataType : "text", //预期服务器返回的数据格式
beforeSend : function() { //请求发送之前触发的事件
alert("请求正在发送......");
},
success : callBack, //data后台返回的数据 响应成功之后的事件
error : function() { //响应失败之后的事件
alert("出现错误........");
}
})
//响应成功之后的事件
function callBack(data) {
if (data.match("true")) {//data=="true"
$("div")
.html(
"<span style='color:red'>用户名已经被占用！！！</span>");
} else {
$("div")
.html(
"<span style='color:red'>用户名可以正常使用！！！</span>");
}
}
}
})
})
</script>
</head>
<body>
<input type="text" name="userName">
<div></div>
</body>
</html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'json.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
//01.定义json格式的对象 并在div中输出
var user={
"id":1,
"name":"小白",
"password":"123456"
};
$("#objectDiv").append("ID:"+user.id+"<br/>")
.append("name:"+user.name+"<br/>")
.append("password:"+user.password+"<br/>")
//02.定义json格式的字符串数组 并在ul和select中输出
var array=["小黑","小白","小红"];
var $arr=$(array); //把数组转换成jquery对象
var $arraySelect=$("#arraySelect"); //获取下拉框对象
//循环给下拉列表增加option
$arr.each(function(i){
$arraySelect.append("<option value='"+(i+1)+"'>" +this+"</option>");
})
//获取ul
var $ul=$("#arrayUl");
$arr.each(function(){
$ul.append("<li>" +this+"</li>");
})
//03.定义json格式的对象数组 放入到div中的table表格中
var userArrays=
[
{
"id":1,
"name":"小白",
"password":"123456"
},
{
"id":2,
"name":"小黑",
"password":"123456"
},
{
"id":3,
"name":"小红",
"password":"123456"
}];
//创建一个table表格
var $table=$("<table border='1'></table>")
.append("<tr><td>编号</td><td>用户名</td><td>密码</td></tr>");
//遍历对象数组
$(userArrays).each(function(){
$table.append("<tr><td>"+this.id+"</td><td>"
+this.name+"</td><td>"+this.password+"</td></tr>");
})
//把表格放入到div中
$("#objectArray").append($table);
})
</script>
</head>
<body>
1:json格式的对象
<div id="objectDiv"></div><br/>
2:json格式的字符串数组
<select id="arraySelect"></select>
<ul id="arrayUl"></ul><br/>
3.json格式的对象数组
<div id="objectArray"></div>
</body>
</html>
json格式数据
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'object.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url:"UserServlet",
type:"get",
dataType:"json",
success:function(data){ //就收后台json格式的数据 之后在页面上显示
$("div").append("<span>姓名</span> <span>密码</span></br>");
$(data).each(function(i){
$("div").append("<span>"+data[i].name+"</span> <span>"+data[i].password+"</span></br>");
})
}
})
})
</script>
</head>
<body>
<div></div>
</body>
</html>
public class UserServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setHeader("Content-Type", "text/html;charset=utf-8");
User user1 = new User(1, "小白1", "123");
User user2 = new User(2, "小白2", "1234");
User user3 = new User(3, "小白3", "123456");
List<User> users = new ArrayList<User>();
users.add(user1);
users.add(user2);
users.add(user3);
// 转换成json格式
String json = JSON.toJSONString(users);
System.out.println(json);
PrintWriter pw = response.getWriter();
pw.print(json);
pw.flush();
pw.close();
}
}
/**
*
* Ajax:
* 核心对象 XMLHttpRequest
*
* 属性：
* readyState： 代表服务的响应信息
* 0：请求没有初始化
* 经过XMLHttpRequest.open(method,url,asyns) 状态变成1
* method:请求的方式
* url：服务器的地址
* asyns：是否异步！ true:异步 false:同步
* 1：请求初始化 但是并没有访问服务器
* 通过XMLHttpRequest.send()建立连接
* 2：请求已经发送
* 3：处理请求信息
* 4：请求完成
*
* readyState的变化会触发onreadyStatechange，
* 如果readyState==4，并且status==200代表请求成功！就可以渲染界面！
*
* get方式请求服务器的时候
* send() send(null) send()中不能加别的参数！
*
* post方式请求服务器的时候
* send(数据信息)
* 而且要在open()之后加入
* xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
*
*/
javaScript实现ajax
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
window.onload=function(){
//点击按钮触发的事件
btn.onclick=function(){
//01.创建XMLHttpRequest核心对象 是全局对象
var xhr=null;
//根据不同的版本创建不同的核心对象
if(window.XMLHttpRequest){//高版本
xhr=new XMLHttpRequest;
}else if(window.ActiveXObject){ //低版本
xhr=new ActiveXObject("Microsoft.XMLHttp")
}else{
alert("拜拜！");
}
//02.设置回调函数
xhr.onreadystatechange=function(){
//判断状态码
if(xhr.readyState==4&&xhr.status==200){
//获取响应的数据
myAjax.innerHTML+=xhr.responseText;
}
}
//03.配置核心对象的组件
xhr.open("get", "hello.txt", true);
//04.发送请求
xhr.send();
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="点击加载">
<div id="myAjax"></div>
<img src="images/cat.jpg">
</body>
</html>
大家辛苦了！！！！abc
验证用户名是否存在
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
window.onload=function(){
//文本框失去焦点的事件
userName.onblur=function(){
//01.创建XMLHttpRequest核心对象 是全局对象
var xhr=null;
//根据不同的版本创建不同的核心对象
if(window.XMLHttpRequest){//高版本
xhr=new XMLHttpRequest;
}else if(window.ActiveXObject){ //低版本
xhr=new ActiveXObject("Microsoft.XMLHttp")
}else{
alert("拜拜！");
}
//根据用户的输入增加提示信息
if(userName.value==""){
msg.innerHTML="<div style='color:red'>用户名不能为空</div>";
}else{
//02.设置回调函数
xhr.onreadystatechange=function(){
//判断状态码
if(xhr.readyState==4&&xhr.status==200){
//获取响应的数据 判断是否存在该用户
if(xhr.responseText.match(/ok/)){
msg.innerHTML="<div style='color:green'>可以注册！1秒钟跳转到注册页面</div>";
//设置定时函数
setTimeout(function(){
location.href="success.jsp";
},1000);
}else if(xhr.responseText.match(/error/)){
msg.innerHTML="<div style='color:red'>用户名已经存在！</div>";
}else{
msg.innerHTML="错误信息"+xhr.statusText;
}
}
}
/*get请求
xhr.open("get", "do.jsp?userName="+userName.value, true);
xhr.send();*/
//post请求
xhr.open("post", "do.jsp", true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("userName="+userName.value);
}
}
}
</script>
</head>
<body>
<input type="text" id="userName" name="userName"/>
<div id="msg"></div>
</body>
</html>
<%
//获取login界面的userName的值
String name= request.getParameter("userName");
//定义一个返回给前台的响应信息
String message="";
if(name.equals("admin")){
message="error";
}else{
message="ok";
}
//怎么把响应给前台？？？？
out.print(message);
%>
<body> <h1>注册页面</h1> </body>