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"%>
Ajax技术学习
封装后的Ajax技术演示//这个在本文后续的代码中讲到
代码中提到的步骤二处的同步和异步，这里讲一下：
这里的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"%>
Ajax技术学习
封装后的ajax技术演示
封装需求，封装后的调用方式：
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));
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