Ajax
Posted 夏小弥
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax相关的知识，希望对你有一定的参考价值。
Ajax技术介绍:
全称: Asynchronized(异步) javascript And Xml
技术组成: Javascript、DOM、CSS 和 XMLHttpRequest (ActiveXObject)
0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
代码演示(我通过写代码来介绍这种技术，然后再对其中的一些知识进行解释)：
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax技术学习</title>
<script type="text/javascript">
function check1(obj)//演示GET方式
//先进行数据格式检验--这里省了
var name=obj.value;
//1创建一个ajax对象
var xhr=null;
if (window.XMLHttpRequest)//IE7之后、火狐、谷歌
xhr=new XMLHttpRequest();
else //IE6以下，其他大部分旧版本浏览器
xhr=new ActiveXObject("Microsoft.XMLHttp");
var url="<c:url value='/OneServlet?name="+name+"'/>";
//2 设置通讯方式和地址
xhr.open("GET", url, true);//异步--多线程
//xhr.open("GET",url,false);//同步--单线程
//3 设置访问成功后的 js对象(回调函数)
xhr.onreadystatechange=function()
if (xhr.readyState==4)//服务器的响应消息接收完毕
if (xhr.status==200)//服务器正常响应
var txt=xhr.responseText;//后台的响应信息
success1(txt);
alert("后台响应消息："+txt);
else
alert("服务器响应出错信息,错误代码："+xhr.status);//如404、500等
;
//4发送---Get方式，没有参数(请求体) ---数据在请求地址中
xhr.send(null);
alert("OKOK");//同步时，必须等到ajax回来之后才会执行。异步时不用等
function check2(obj)//演示POST方式
//先进行数据格式检验--这里省了
var name=obj.value;
//1创建一个ajax对象
var xhr=null;
if (window.XMLHttpRequest)
xhr=new XMLHttpRequest();
else
xhr=new ActiveXObject("Microsoft.XMLHttp");
var url="<c:url value='/OneServlet'/>";
//2 设置通讯方式和地址
xhr.open("POST", url, true);//异步--多线程
//xhr.open("POST",url,false);//同步--单线程
//3 设置访问成功后的 js对象(回调函数)
xhr.onreadystatechange=function()
if (xhr.readyState==4)//服务器的响应消息接收完毕
if (xhr.status==200)//服务器正常响应
var txt=xhr.responseText;//后台的响应信息
alert("后台响应消息："+txt);
success(txt);
else
alert("服务器响应出错信息,错误代码："+xhr.status);//如404、500等
;
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//POST方式这一步是必要的，否则参数会空
//4发送---POST方式，有参数(请求体)
xhr.send("name="+name);
alert("OKOK");//同步时，必须等到ajax回来之后才会执行。异步时不用等
function success1(obj)
div1.innerHTML=obj;
function success2(obj)
div2.innerHTML=obj;
</script>
</head>
<body>
<a href="<c:url value='/ajaxDemo.jsp'/>">封装后的Ajax技术演示</a>//这个在本文后续的代码中讲到
<form action="">
<h3>GET方式的ajax演示</h3>
Name: <input type="text" name="name" onblur="check1(this)"/><div id="div1"></div>
<br/><br/><br/>
<h3>POST方式的ajax演示</h3>
Name2: <input type="text" name="name" onblur="check2(this)"/><div id="div2"></div>
Pwd: <input type="password" name="pwd"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
代码中提到的步骤二处的同步和异步，这里讲一下：
这里的true为异步，false为同步，即：若在步骤4发送那里xhr.send()之后还有代码要执行，他不受Ajax的影响会继续执行，不用等待Ajax回来，即多线程，另一个线程去进行发送操作，这一个线程执行发送的下面的代码；而同步为单线程，Ajax没执行完返回来之前，send()下面的代码是不会执行的。
我在下面的OneServlet中加入的一个Thread.sleep(3000);就是为了体现同步和异步的区别。
OneServlet.java
package cn.hncu.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class OneServlet extends HttpServlet
private SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
System.out.println("GET--Ajax来了...");
String name=request.getParameter("name");
// try
// Thread.sleep(3000);
// catch (InterruptedException e)
// e.printStackTrace();
//
out.println(name+",你好,来访时间是:"+sdf.format(new Date()));
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
System.out.println("post-ajax来了....");
String name=request.getParameter("name");
//int i=100/0;//故意让后台响应500的错误信息
out.println(name+",你好,来访时间是:"+sdf.format(new Date()));
下面我们来对相面的例子进行一点改进：
上面例子中的index.jsp中有一个超链接发到了封装后的ajaxDemo.jsp的，下面演示这个封装后的Ajax
ajaxDemo.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax技术学习</title>
<script type="text/javascript" src="<c:url value='/js/ajax.js'/>"></script>
<script type="text/javascript">
function check1(obj)
//先进行数据格式检验--这里省了
var name=obj.value;
var xhr=null;
if (window.XMLHttpRequest)
xhr=new XMLHttpRequest();
else
xhr=new ActiveXObject("Microsoft.XMLHttp");
var url="<c:url value='/OneServlet?name="+name+"'/>";
var ajax=new Ajax();
ajax.get(xhr, url, success1, failure);
function check2(obj)
//先进行数据格式检验--这里省了
var data="name="+obj.value;
var xhr=null;
if (window.XMLHttpRequest)
xhr=new XMLHttpRequest();
else
xhr=new ActiveXObject("Microsoft.XMLHttp");
var url="<c:url value='/OneServlet'/>";
var ajax=new Ajax();
ajax.post(xhr, url, data, success2, failure);
function success1(obj)
div1.innerHTML=obj;
function success2(obj)
div2.innerHTML=obj;
function failure(obj)
alert("服务器响应错误信息:"+obj);
</script>
</head>
<body>
<h3>封装后的ajax技术演示</h3>
<pre>
封装需求，封装后的调用方式：
var ajax = new Ajax();
//ajax.get(xhr,url,function succ(obj)...,function failure(obj)... )
ajax.get(xhr,url,succ(obj),failure(obj));
//ajax.post(xhr,url,data,function(data)...,function failure(obj)... );
ajax.post(xhr,url,data,succ(data), failure(obj));
</pre>
<form action="">
<h3>GET方式的ajax演示</h3>
Name: <input type="text" name="name" onblur="check1(this)"/><div id="div1"></div>
<br/><br/><br/>
<h3>POST方式的ajax演示</h3>
Name2: <input type="text" name="name" onblur="check2(this)"/><div id="div2"></div>
Pwd: <input type="password" name="pwd"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
ajax.js
function Ajax()
this.get=function(obj, url, success, failure)
//1创建一个ajax对象
var xhr=obj;
//2 设置通讯方式和地址
xhr.open("GET", url, true);//异步--多线程
//xhr.open("GET",url,false);//同步--单线程
//3 设置访问成功后的 js对象(回调函数)
xhr.onreadystatechange=function()
if (xhr.readyState==4)//服务器的响应消息接收完毕
if (xhr.status==200)//服务器正常响应
var txt=xhr.responseText;//后台的响应信息
success(txt);
alert("后台响应消息："+txt);
else
if (failure)
failure(xhr.status);//如404、500等
;
//4发送---Get方式，没有参数(请求体) ---数据在请求地址中
xhr.send(null);
;
this.post=function(obj, url, data, success, failure)
//1创建一个ajax对象
var xhr=obj;
//2 设置通讯方式和地址
xhr.open("POST", url, true);//异步--多线程
//xhr.open("POST",url,false);//同步--单线程
//3 设置访问成功后的 js对象(回调函数)
xhr.onreadystatechange=function()
if (xhr.readyState==4)//服务器的响应消息接收完毕
if (xhr.status==200)//服务器正常响应
var txt=xhr.responseText;//后台的响应信息
success(txt);
alert("后台响应消息："+txt);
else
if (failure)
failure(xhr.status);//如404、500等
;
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4发送---POST方式，没有参数(请求体) ---数据在请求地址中
xhr.send(data);
;
然后仍然使用到了上面说到的OneServlet.java
以上是关于Ajax的主要内容，如果未能解决你的问题，请参考以下文章