AJAX技术_XMLHttpRequest
AJAX技术核心:
XMLHttpRequest方法：
abort()停止当前请求
getAllResponseHeaders()返回包含HTTP请求的所有相应头信息，
其中响应头包括Content-Length,Date,URI等内容，
返回值是一个字符串，其中每个键名和键值用冒号分开，
每一组键之间用CR和LF(回车加换行符)来分割
getResonseHeader(String header)返回HTTP请求相应头中指定的键名header对应的值
open(String method,String url,Boolean asynch,String username,String password)：
建立对服务器的调用
send(content)：向服务器发出请求
setRequestHeader(String header,String value)
XMLHttpRequest属性：
onreadystatechange:请求状态改变时的事件触发器(readyState变化时会调用此方法).
通常是一个javascript函数
readyState:请求状态(每次readyState变化都会触发onreadystatechange注册的回调函数)
0=未初始化
1=open方法成功调用以后
2=服务器已经应答客户端的请求
3=交互中，HTTP头相信已经接收，相应数据尚未接收
4=和服务器交互完成。数据接收完成
responseText:服务器返回的文本内容
responsXML:服务器返回的兼容DOM的XML内容
status服务器返回的状态码。200成功，404未找到
statusText返回状态码的文本信息
1.使用XHTML和CSS的基于标准的表示技术
2.使用DOM进行动态现实和交互
3.使用XML和XSLT进行后台服务器的数据交换和处理
4.使用XMLHttpRequest异步数据检索
5.使用Javascript将以上的技术融合在一起
1. 在DOM眼中，HTML是有很多不同类型的节点组成的，这些节点属于NODE对象
2. NODE对象有一个nodeType的属性可以判断节点类型
3. 节点：元素节点、属性节点、文本节点
DocumentElement：表示问低昂的根元素节点
在HTML文档中，他表示<html>代表的元素节点
方法：createAttribute()：指定名字创建新的Attr节点对象，
方法参数为属性的名字。
CreateComment()：指定的字符串创建新的Commet节点对象，
方法参数是注释信息。
createElement()：指定的标签名创建新的Commet节点对象，
方法参数为节点的名字。
使用jquery：
Function verify(){
$.get(“AJAXServer?name=” + $(“#username”).val(), null, function(data){
$(“#result”).html(data);
});
}
使用XHR对象发送和接受数据
Web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">
<servlet>
<servlet-name>ClassicServer</servlet-name>
<servlet-class>ClassicServer</servlet-class>
</servlet>
<servlet>
<servlet-name>AJAXServer</servlet-name>
<servlet-class>AJAXServer</servlet-class>
</servlet>
<servlet>
<servlet-name>AJAXXMLServer</servlet-name>
<servlet-class>AJAXXMLServer</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ClassicServer</servlet-name>
<url-pattern>/ClassicServer</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>AJAXServer</servlet-name>
<url-pattern>/AJAXServer</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>AJAXXMLServer</servlet-name>
<url-pattern>/AJAXXMLServer</url-pattern>
</servlet-mapping>
</web-app>
Verifyown.js
//用户名校验的方法
//这个方法使用XMLHTTPRequest对象进行AJAX的异步数据交互
var xmlhttp;
function verify(){
//0.获取文本框的值
//document是在javascript内置对象，对应于当前页面的根节点
//一个元素节点对应html页面中的一个标签
var userName = document.getElementById("userName").value;
//1.创建XMLHttpRequest对象
//需要通过IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
if(window.XMLHttpRequest){
//针对FireFox, Mozillar, Opera, Safari, IE7, IE8
xmlhttp = new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的BUG进行修正
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
//针对IE6, IE5, IE5.5
//两个可以用于创建XMLHttpRequest对象的控件名称，保存在js的数组中
//排在前面的版本较新
var activexName = ["MSXMLL2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i = 0; i < activexName.length; i++){
try {
//取出一个控件名进行创建，如果创建成功就终止循环
//如果创建失败，会抛出异常，捕捉异常后，可以继续循环，继续尝试创建
xmlhttp = new ActiveXObject(activexName[i]);
break;
} catch(e) {
}
}
}
//确认XMLHttpRequest对象创建成功
if(!xmlhttp){
alert("XMLHttpRequest对象创建失败");
return;
}else{
alert(xmlhttp.readyState);
}
//2.注册回调函数
//注册回调函数时，只需要函数名，不要加括号
//我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上
xmlhttp.onreadystatechange = callback;
//3.设置连接信息
//第一个参数表示请求方式，支持所有http的请求方式，
//第二个参数表示请求的url地址，get方式请求的参数也在url中
//第三个参数表示采用异步还是同步方式交互，true表示异步
//xmlhttp.open("GET","AJAXServer?name=" + userName, true);
//POST方式请求的代码
xmlhttp.open("POST","AJAXServer",true);
//POST方式需要自己设置http的请求头,
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST方式发送数据
xmlhttp.send("name=" + userName);
//4.发送数据，开始和服务器进行交互
//xmlhttp.send(null);
}
//回调函数
function callback(){
alert(xmlhttp.readyState);
//5.接受响应信息
//检查XMLHttpRequest是否交互完成 ，判断服务器的响应是否成功，才能进行数据交互
if(xmlhttp.readyState == 4){
//判断 http的交互是否成功
if(xmlhttp.status == 200){
//获取服务器端返回的数据
//获取服务器端输出的纯文本的数据
var responseText = xmlhttp.responseText;
//将数据显示在页面上
//通过dom的方式找到div标签所对应的元素节点
var divNode = document.getElementById("result");
//设置元素节点中的html内容
divNode.innerHTML = responseText;
}else{
alert("出错了");
}
}
}
Ajax.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ajax用户验证示例一</title>
<script type="text/javascript" src="jslib/verifyown.js"></script>
</head>
<body>
请输入用户名：<br/>
<!--ajax方式下不需要使用表单来进行数据提交-->
<!--ajax方式不需要name属性，需要id的属性-->
<input type="text" id="userName"/>
<INPUT type="button" value="校验" onclick="verify()"/>
<!-- 预留一个空间用户服务器端的信息返回之后填充里面-->
<!-- 这个div用于存放服务器返回来的信息,id属性定义是为了利用dom的方式找到某个节点-->
<div id="result"></div>
</body>
</html>
AJAXServer.java
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpServlet;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
public class AJAXServer extends HttpServlet{
protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
try {
// httpServletRequest.setCharacterEncoding("gb18030");
// URLDecoder.decode("234", "gb18030");
httpServletResponse.setContentType("text/html;charset=utf-8");
PrintWriter out = httpServletResponse.getWriter();
//1.取参数
String old = httpServletRequest.getParameter("name");
//2.检查参数是否有问题
if (old == null || old.length() == 0) {
out.println("用户名不可以为空");
} else {
//3.校验操作
String name =old;
if (name.equals("songxiaopeng")) {
//4.和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面端而不是将一个新的页面返回给用户
//写法没变，本质发生了变化
out.println("用户名【" + name + "】已经存在，请使用其他用户名");
} else {
out.println("用户名【" + name + "】尚未存在，请使用其他用户名");
}
out.println("<br/><a href=/"ajax.html/">返回校验页面</a>");
}
} catch (Exception e) {
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doGet(httpServletRequest, httpServletResponse);
}
}
利用XHR接受与处理XML数据:
Verifyxml.js
//用户名校验的方法
//这个方法使用XMLHTTPRequest对象进行AJAX的异步数据交互
var xmlhttp;
function verify(){
//0.获取文本框的值
//document是在javascript内置对象，对应于当前页面的根节点
//一个元素节点对应html页面中的一个标签
var userName = document.getElementById("userName").value;
//1.创建XMLHttpRequest对象
//需要通过IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
if(window.XMLHttpRequest){
//针对FireFox, Mozillar, Opera, Safari, IE7, IE8
xmlhttp = new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的BUG进行修正
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
//针对IE6, IE5, IE5.5
//两个可以用于创建XMLHttpRequest对象的控件名称，保存在js的数组中
//排在前面的版本较新
var activexName = ["MSXMLL2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i = 0; i < activexName.length; i++){
try {
//取出一个控件名进行创建，如果创建成功就终止循环
//如果创建失败，会抛出异常，捕捉异常后，可以继续循环，继续尝试创建
xmlhttp = new ActiveXObject(activexName[i]);
break;
} catch(e) {
}
}
}
//确认XMLHttpRequest对象创建成功
if(!xmlhttp){
alert("XMLHttpRequest对象创建失败");
return;
}else{
alert(xmlhttp.readyState);
}
//2.注册回调函数
//注册回调函数时，只需要函数名，不要加括号
//我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上
xmlhttp.onreadystatechange = callback;
//3.设置连接信息
//第一个参数表示请求方式，支持所有http的请求方式，
//第二个参数表示请求的url地址，get方式请求的参数也在url中
//第三个参数表示采用异步还是同步方式交互，true表示异步
//xmlhttp.open("GET","AJAXServer?name=" + userName, true);
//POST方式请求的代码
xmlhttp.open("POST","AJAXXMLServer",true);
//POST方式需要自己设置http的请求头,
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST方式发送数据
xmlhttp.send("name=" + userName);
//4.发送数据，开始和服务器进行交互
//xmlhttp.send(null);
}
//回调函数
function callback(){
alert(xmlhttp.readyState);
//5.接受响应信息
//检查XMLHttpRequest是否交互完成 ，判断服务器的响应是否成功，才能进行数据交互
if(xmlhttp.readyState == 4){
//判断 http的交互是否成功
if(xmlhttp.status == 200){
//使用responseXML的方式来接收XML数据对象的DOM对象
var domObj = xmlhttp.responseXML;
if(domObj){
//得到dom对象后，利用dom的API，取出有用数据
//dom的API对操作HTML跟XML是通用过的
//dom中利用getElementsByTagName可以根据标签名来获取元素节点,返回的是一个数组
var messageNodes = domObj.getElementsByTagName("message");
if(messageNodes.length>0){
//获取message节点中的文本内容
//获取当前节点的子节点
var textNode = messageNodes[0].firstChild;
var responseMessage = textNode.nodeValue;
var divNode = document.getElementById("result");
//设置元素节点中的html内容
divNode.innerHTML = responseMessage;
}else{
alert("XML数据格式错误，原始文本内容为：" + domObj);
}
}else{
alert("XML数据格式错误，原始文本内容为：" + domObj);
}
}else{
alert("出错了");
}
}
}
AJAXXMLServer.java
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
public class AJAXXMLServer extends HttpServlet{
protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
try {
//修改点1----相应的Content-Type必须是text/xml
httpServletResponse.setContentType("text/xml;charset=utf-8");
PrintWriter out = httpServletResponse.getWriter();
//1.取参数
String old = httpServletRequest.getParameter("name");
//修改点2----返回的数据需要拼装成xml格式
StringBuilder bulilder = new StringBuilder();
bulilder.append("<message>");
//2.检查参数是否有问题
if (old == null || old.length() == 0) {
bulilder.append("用户名不可以为空").append("</message>");
} else {
//3.校验操作
String name =old;
if (name.equals("songxiaopeng")) {
//4.和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面端而不是将一个新的页面返回给用户
//写法没变，本质发生了变化
bulilder.append("用户名【" + name + "】已经存在，请使用其他用户名").append("</message>");
} else {
bulilder.append("用户名【" + name + "】尚未存在，请使用其他用户名").append("</message>");
}
out.println(bulilder.toString());
}
} catch (Exception e) {
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doGet(httpServletRequest, httpServletResponse);
}
}