ajax简介与简单用户名是否已存在的验证
(1)AIAX创建对象
XMLHttpRequest 是 AJAX 的基础。
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
(2)AJAX请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
方法 描述
open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
send(string) 将请求发送到服务器。
string：仅用于 POST 请求
注意;如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
setRequestHeader(header,value) 向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值
(3)AJAX响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
(4)
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
属性 描述
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status 200: "OK"
404: 未找 到页面
示例：
<body>
<input type="button" value="进行异步请求" onclick="asncRequest()" />
</body>
<script type="text/javascript">
function asncRequest(){
//第一步：根据浏览器类型创建XMLHttpRequest,下面这个代码是固定的
var xmlhttp=null;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//第二步：设置请求方式和请求参数及路径
//${pageContext.request.contextPath}表示整个项目的路径，然后找到名是AjaxServlet的servlet文件。
//如果想要跟上参数，又因为是get，对于get方式加上参数的形式为?username=zhangsan
xmlhttp.open("get","${pageContext.request.contextPath}/servlet/AjaxServlet?username=zhangsan");
//第三步：编写回调函数，当定义的状态发生改变时调用下面的方法
xmlhttp.onreadystatechange()=function(){
//弹框--接受数据
// readyState为2时表示 请求已接收 ，status为 200表示 "OK"
if(xmlhttp.readyState==4&&xmlhttp.status==200)
{
alert("接收到了"+xmlhttp.responseText);
}
};
//发送请求
xmlhttp.send();//本来send中写数据的，但是在open带了，所以不写了
}
</script>
建立一个AjaxServlet
import java.io.IOException;
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 AjaxServlet
*/
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 获取值
String parameter=request.getParameter("username");
System.out.println(parameter);
response.getWriter().write("hellow");//hellow会在弹出框中得到显示
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
结果如下图：在桌面jsp的word文档中
示例2：判断用户名是否存在，若存在，则提交按钮不可用。
onblur 属性在元素失去焦点时触发。就是在鼠标离开时触发。
onblur="checkUserName(this.value)"中this.value表示username的值，触发时调用checkUserName方法
Ajax_regist.jsp页面中的代码。
<body>
<form name="f1" id="f1" action="" method="post" enctytpe="application/x-www-form-urlencoded">
<table>
<tr>
<td>Username:</td>
<td><input type="text" name="username" id="login" onblur="checkUserName(this.value)" ></td>
<td><span id="span_u"></span></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" id="password" ></td>
</tr>
<tr>
<td colspan="2"><input type="submit" id="sub_regist"></td>
</tr>
</table>
</form>
<script type="text/javascript">
//在这里定义一个span_u变量使得下面的代码得以调用
var span_u=document.getElementById("span_u");//<span>中的ID为span_u
//
var sub_regist=document.getElementById("sub_regist");
//定义一个checkUserName（）方法
function checkUserName(username){
//第一步：根据浏览器类型创建XMLHttpRequest,下面这个代码是固定的
var xmlhttp=null;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//第二步：设置请求方式和请求参数及路径
//${pageContext.request.contextPath}表示整个项目的路径，然后找到名是AjaxRegistServlet的servlet文件。
xmlhttp.open("post","${pageContext.request.contextPath}/servlet/AjaxRegistServlet");
//第三步：编写回调函数，当定义的状态发生改变时调用下面的方法
xmlhttp.onreadystatechange()=function(){
//弹框--接受数据
// readyState为2时表示 请求已接收 ，status为 200表示 "OK"
if(xmlhttp.readyState==4&&xmlhttp.status==200)
{
var text=xmlhttp.responseText;
//yes是已经有了
if("yes"==text){
span_u.innerHTML="用户名已存在";
//禁用提交按钮
sub_regist.disabled=true;
}else{
span_u.innerHTML="用户名可用";
sub_regist.disabled=false;
}
}
}
};
//第四步：发送请求
//如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("username"+username);//username是input标签中的name属性名
</script>
</body>
AjaxRegistServlet中的代码：
import java.io.IOException;
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 AjaxRegistServlet
*/
@WebServlet("/AjaxRegistServlet")
public class AjaxRegistServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public AjaxRegistServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//解决post请求乱码
request.setCharacterEncoding("utf-8");
//获取值
String username=request.getParameter("username");
if(username!=null)
{
response.getWriter().write("yes");
}else
{
response.getWriter().write("no");
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//调用doGet()方法。
doGet(request, response);
}
}
XMLHttpRequest 是 AJAX 的基础。
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
(2)AJAX请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
方法 描述
open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
send(string) 将请求发送到服务器。
string：仅用于 POST 请求
注意;如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
setRequestHeader(header,value) 向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值
(3)AJAX响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
(4)
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
属性 描述
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status 200: "OK"
404: 未找 到页面
示例：
<body>
<input type="button" value="进行异步请求" onclick="asncRequest()" />
</body>
<script type="text/javascript">
function asncRequest(){
//第一步：根据浏览器类型创建XMLHttpRequest,下面这个代码是固定的
var xmlhttp=null;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//第二步：设置请求方式和请求参数及路径
//${pageContext.request.contextPath}表示整个项目的路径，然后找到名是AjaxServlet的servlet文件。
//如果想要跟上参数，又因为是get，对于get方式加上参数的形式为?username=zhangsan
xmlhttp.open("get","${pageContext.request.contextPath}/servlet/AjaxServlet?username=zhangsan");
//第三步：编写回调函数，当定义的状态发生改变时调用下面的方法
xmlhttp.onreadystatechange()=function(){
//弹框--接受数据
// readyState为2时表示 请求已接收 ，status为 200表示 "OK"
if(xmlhttp.readyState==4&&xmlhttp.status==200)
{
alert("接收到了"+xmlhttp.responseText);
}
};
//发送请求
xmlhttp.send();//本来send中写数据的，但是在open带了，所以不写了
}
</script>
建立一个AjaxServlet
import java.io.IOException;
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 AjaxServlet
*/
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 获取值
String parameter=request.getParameter("username");
System.out.println(parameter);
response.getWriter().write("hellow");//hellow会在弹出框中得到显示
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
结果如下图：在桌面jsp的word文档中
示例2：判断用户名是否存在，若存在，则提交按钮不可用。
onblur 属性在元素失去焦点时触发。就是在鼠标离开时触发。
onblur="checkUserName(this.value)"中this.value表示username的值，触发时调用checkUserName方法
Ajax_regist.jsp页面中的代码。
<body>
<form name="f1" id="f1" action="" method="post" enctytpe="application/x-www-form-urlencoded">
<table>
<tr>
<td>Username:</td>
<td><input type="text" name="username" id="login" onblur="checkUserName(this.value)" ></td>
<td><span id="span_u"></span></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" id="password" ></td>
</tr>
<tr>
<td colspan="2"><input type="submit" id="sub_regist"></td>
</tr>
</table>
</form>
<script type="text/javascript">
//在这里定义一个span_u变量使得下面的代码得以调用
var span_u=document.getElementById("span_u");//<span>中的ID为span_u
//
var sub_regist=document.getElementById("sub_regist");
//定义一个checkUserName（）方法
function checkUserName(username){
//第一步：根据浏览器类型创建XMLHttpRequest,下面这个代码是固定的
var xmlhttp=null;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//第二步：设置请求方式和请求参数及路径
//${pageContext.request.contextPath}表示整个项目的路径，然后找到名是AjaxRegistServlet的servlet文件。
xmlhttp.open("post","${pageContext.request.contextPath}/servlet/AjaxRegistServlet");
//第三步：编写回调函数，当定义的状态发生改变时调用下面的方法
xmlhttp.onreadystatechange()=function(){
//弹框--接受数据
// readyState为2时表示 请求已接收 ，status为 200表示 "OK"
if(xmlhttp.readyState==4&&xmlhttp.status==200)
{
var text=xmlhttp.responseText;
//yes是已经有了
if("yes"==text){
span_u.innerHTML="用户名已存在";
//禁用提交按钮
sub_regist.disabled=true;
}else{
span_u.innerHTML="用户名可用";
sub_regist.disabled=false;
}
}
}
};
//第四步：发送请求
//如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("username"+username);//username是input标签中的name属性名
</script>
</body>
AjaxRegistServlet中的代码：
import java.io.IOException;
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 AjaxRegistServlet
*/
@WebServlet("/AjaxRegistServlet")
public class AjaxRegistServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public AjaxRegistServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//解决post请求乱码
request.setCharacterEncoding("utf-8");
//获取值
String username=request.getParameter("username");
if(username!=null)
{
response.getWriter().write("yes");
}else
{
response.getWriter().write("no");
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//调用doGet()方法。
doGet(request, response);
}
}
结果如下图：在桌面jsp的word文档中