AJAX初步学习
2015-07-07 19:14
381 查看
AJAX(Asynchronous Javascript and Xml)异步javascript和Xml
一、Asynchronous异步的意思是,浏览器向服务器发送一个请求,不是傻傻等服务器返回请求后再执行别的操作,而是去做别的操作,当服务器返回请求回来时自动调用一个js函数,由这个函数执行一系列操作。因此,异步的好处是,提高了工作效率。
此外,AJAX还有一个作用。B/S以往都是由浏览器向服务器发送一个请求,当返回来一个页面就会在浏览器上刷新一下。而有些时候,在一个页面中进行操作的时候需要向服务器发送请求,但是,返回请求时不想让页面有这样的刷新效果。比如,在用户注册页面输入用户名时,需要与服务器交互,查询输入的用户名是否已被注册。利用AJAX就能解决这个问题。
二、AJAX的典型流程:
1、客户端触发异步操作 <input id="username" type="text" name="username" size="30" maxlength="10" onblur="validate()"/> onblur会触发js函数validate();
2、创建新的XMLHttpRequest对象(XMLHttpRequest是浏览器中的一个内置对象)
var req;
3、与Servlet进行连接
var username = document.getElementById("username").value;
var url = "validate.jsp?username=" + escape(username);
open表示打开连接。
4、服务器端进行连接处理
req.onreadystatechange = callback; 这行代码意思是,当req的状态改变时,就调用一次callback函数。
解释一下服务器返回结果的状态:浏览器内置对象readyState有四个取值1,2,3,4分别表示XMLHttpRequest对象req的四种状态
0----uninitialize表示req还没有初始化
1----loadingd表示浏览器已经跟服务器建立好连接
2----loaded表示浏览器的请求已经发送到了服务器,并且服务器返回给浏览器Http头信息,但内容还没返回来
3----interactive表示浏览器正在取得服务器返回内容中...
4----completed表示浏览器已经接收到服务器返回的整个Http请求
req.send(null); 把url请求发送到服务器。
send表示发送数据。
5、返回包含处理结果的XML文档
function callback() {
if(req.readyState == 4) {
if(req.status == 200) {
var msg = req.responseXML.getElementsByTagName("msg")[0];
//alert(msg.childNodes[0].nodeValue);
//alert(req.responseText);
setMsg(msg.childNodes[0].nodeValue);
}
}
}
var msg = req.responseXML.getElementsByTagName("msg")[0]; 用req接收返回结果,并把返回结果当作XML文件来解析,然后把标签<msg></msg>中的元素全部取出来放入一个数组中。下表为0的元素赋值给 var msg。
6、XMLHttpRequest对象接收处理结果并分析
7、更新页面
三、典型示例:
register.jsp
<%@ page language="java" contentType="text/html; charset=GBK"
pageEncoding="GBK" import="com.bjsxt.shopping.* , java.sql.*" %> <!-- 说明本页的编码方式GBK -->
<!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=GBK"> <!-- 当本文件被其他程序调用时,向其他程序声明本文件的文件类型和编码方式 -->
<title>用户注册</title>
<script type="text/javascript">
var req;
function validate() {
var username = document.getElementById("username").value;
var url = "validate.jsp?username=" + escape(username);
if(window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if(window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("GET", url, true);
req.onreadystatechange = callback;
req.send(null);
}
function callback() {
if(req.readyState == 4) {
if(req.status == 200) {
var msg = req.responseXML.getElementsByTagName("msg")[0];
//alert(msg.childNodes[0].nodeValue);
//alert(req.responseText);
setMsg(msg.childNodes[0].nodeValue);
}
}
}
function setMsg(msg) { //alert(msg); if(msg == "invalid") { document.getElementById("usermsg").innerHTML = "<font color='red'>用户名已被注册</font>"; } else { document.getElementById("usermsg").innerHTML = "<font color='blue'>用户名可用</font>"; } }
</script>
</head>
<body>
<form action="register.jsp" method="post" name="form" onsubmit="return checkData()">
<input type="hidden" name="action" value="register" />
<table align="center" border="2">
<tr>
<td colspan="2" align="center">用户注册</td>
</tr>
<tr>
<td>用户名:</td>
<td>
<input id="username" type="text" name="username" size="30" maxlength="10" onblur="validate()"/>
<div id="usermsg"> </div>
</td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password" size="15" maxlength="12" />
</td>
</tr>
<tr>
<td>密码确认:</td>
<td><input type="password" name="password2" size="15" maxlength="12" />
</td>
</tr>
<tr>
<td>电话:</td>
<td><input type="text" name="phone" size="20" maxlength="20" />
</td>
</tr>
<tr>
<td>地址:</td>
<td><textarea name="addr" cols="50" rows="12"></textarea></td>
</tr>
<tr>
<td><input type="submit" value="提交" />
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>
validate.jsp
<%
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-store"); //HTTP1.1
response.setHeader("Pragma", "no-cache"); //HTTP1.0
response.setDateHeader("Expires", 0); //prevent caching at the proxy server
response.getWriter().write("<msg>invalid</msg>");
%>
一、Asynchronous异步的意思是,浏览器向服务器发送一个请求,不是傻傻等服务器返回请求后再执行别的操作,而是去做别的操作,当服务器返回请求回来时自动调用一个js函数,由这个函数执行一系列操作。因此,异步的好处是,提高了工作效率。
此外,AJAX还有一个作用。B/S以往都是由浏览器向服务器发送一个请求,当返回来一个页面就会在浏览器上刷新一下。而有些时候,在一个页面中进行操作的时候需要向服务器发送请求,但是,返回请求时不想让页面有这样的刷新效果。比如,在用户注册页面输入用户名时,需要与服务器交互,查询输入的用户名是否已被注册。利用AJAX就能解决这个问题。
二、AJAX的典型流程:
1、客户端触发异步操作 <input id="username" type="text" name="username" size="30" maxlength="10" onblur="validate()"/> onblur会触发js函数validate();
2、创建新的XMLHttpRequest对象(XMLHttpRequest是浏览器中的一个内置对象)
var req;
if(window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if(window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); }这段代码的意思就是把浏览器中的XMLHttpRequest对象new出来,但IE浏览器中的内置对象是ActiveXObject,其实这两个对象的的作用是一样的。
3、与Servlet进行连接
var username = document.getElementById("username").value;
var url = "validate.jsp?username=" + escape(username);
req.open("GET", url, true);浏览器页面通过XMLHttpRequest对象req调用open方法 ,用get方式访问url,true表示采用异步方式。
open表示打开连接。
4、服务器端进行连接处理
req.onreadystatechange = callback; 这行代码意思是,当req的状态改变时,就调用一次callback函数。
解释一下服务器返回结果的状态:浏览器内置对象readyState有四个取值1,2,3,4分别表示XMLHttpRequest对象req的四种状态
0----uninitialize表示req还没有初始化
1----loadingd表示浏览器已经跟服务器建立好连接
2----loaded表示浏览器的请求已经发送到了服务器,并且服务器返回给浏览器Http头信息,但内容还没返回来
3----interactive表示浏览器正在取得服务器返回内容中...
4----completed表示浏览器已经接收到服务器返回的整个Http请求
req.send(null); 把url请求发送到服务器。
send表示发送数据。
5、返回包含处理结果的XML文档
function callback() {
if(req.readyState == 4) {
if(req.status == 200) {
var msg = req.responseXML.getElementsByTagName("msg")[0];
//alert(msg.childNodes[0].nodeValue);
//alert(req.responseText);
setMsg(msg.childNodes[0].nodeValue);
}
}
}
var msg = req.responseXML.getElementsByTagName("msg")[0]; 用req接收返回结果,并把返回结果当作XML文件来解析,然后把标签<msg></msg>中的元素全部取出来放入一个数组中。下表为0的元素赋值给 var msg。
6、XMLHttpRequest对象接收处理结果并分析
function setMsg(msg) { //alert(msg); if(msg == "invalid") { document.getElementById("usermsg").innerHTML = "<font color='red'>用户名已被注册</font>"; } else { document.getElementById("usermsg").innerHTML = "<font color='blue'>用户名可用</font>"; } }
7、更新页面
三、典型示例:
register.jsp
<%@ page language="java" contentType="text/html; charset=GBK"
pageEncoding="GBK" import="com.bjsxt.shopping.* , java.sql.*" %> <!-- 说明本页的编码方式GBK -->
<!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=GBK"> <!-- 当本文件被其他程序调用时,向其他程序声明本文件的文件类型和编码方式 -->
<title>用户注册</title>
<script type="text/javascript">
var req;
function validate() {
var username = document.getElementById("username").value;
var url = "validate.jsp?username=" + escape(username);
if(window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if(window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("GET", url, true);
req.onreadystatechange = callback;
req.send(null);
}
function callback() {
if(req.readyState == 4) {
if(req.status == 200) {
var msg = req.responseXML.getElementsByTagName("msg")[0];
//alert(msg.childNodes[0].nodeValue);
//alert(req.responseText);
setMsg(msg.childNodes[0].nodeValue);
}
}
}
function setMsg(msg) { //alert(msg); if(msg == "invalid") { document.getElementById("usermsg").innerHTML = "<font color='red'>用户名已被注册</font>"; } else { document.getElementById("usermsg").innerHTML = "<font color='blue'>用户名可用</font>"; } }
</script>
</head>
<body>
<form action="register.jsp" method="post" name="form" onsubmit="return checkData()">
<input type="hidden" name="action" value="register" />
<table align="center" border="2">
<tr>
<td colspan="2" align="center">用户注册</td>
</tr>
<tr>
<td>用户名:</td>
<td>
<input id="username" type="text" name="username" size="30" maxlength="10" onblur="validate()"/>
<div id="usermsg"> </div>
</td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password" size="15" maxlength="12" />
</td>
</tr>
<tr>
<td>密码确认:</td>
<td><input type="password" name="password2" size="15" maxlength="12" />
</td>
</tr>
<tr>
<td>电话:</td>
<td><input type="text" name="phone" size="20" maxlength="20" />
</td>
</tr>
<tr>
<td>地址:</td>
<td><textarea name="addr" cols="50" rows="12"></textarea></td>
</tr>
<tr>
<td><input type="submit" value="提交" />
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>
validate.jsp
<%
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-store"); //HTTP1.1
response.setHeader("Pragma", "no-cache"); //HTTP1.0
response.setDateHeader("Expires", 0); //prevent caching at the proxy server
response.getWriter().write("<msg>invalid</msg>");
%>
相关文章推荐
- STL之迭代器
- Android入门(32)——第九章 Fragment与Activity通信
- 神州数码802.1x认证协议简析
- Docker学习资料
- hello, world
- 【Mark】如何阅读一本好书:APUE
- 1024Studio官网
- android中HorizontalScrollView实现viewpager的效果
- 枚举做JSP下拉选框的数据源
- JAVA UUID 生成
- 欢迎使用CSDN-markdown编辑器
- 两段用来启动/重启Linux下Tomcat的Perl脚本
- redis命令参考(四) set集合
- 黑马程序员-C语言学习笔记(一)
- c++ primer读书笔记-第十章 关联容器
- @property参数类型和代表意义
- java enum(枚举)使用详解 + 总结
- 三角架选择
- MySql远程访问无法连接的问题!
- 思科Cisco 交换机 VTP负载均衡的配置