AJAX初探,XMLHttpRequest介绍
AJAX
AJAX = Asynchronous JavaScript and XML. 异步的JavaScript和XML.
AJAX是一种在不需要重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术.
之前传统的网页如果需要更新内容,必须重新加载整个页面.
AJAX基于已有标准,已被使用多年. 2005年的Google Suggest使其流行起来,当你输入关键字时,会返回搜索建议的列表.
优点:更快,给用户的体验更好,减少了传输的流量.
举例:
在百度,Google的搜索框输入文字时,可以看到已经发送出请求,所以有搜索建议列表;
百度地图,在拖动地图的时候,也可以看到它在不断地发出请求,页面内容在发生改变,但是整个页面并没有被刷新.
AJAX中的重要对象:XMLHttpRequest
这个对象是微软最先在ie里面提供的,使用的是ActiveX对象(IE5和IE6):
variable=new ActiveXObject("Microsoft.XMLHTTP");
现在,所有的现代浏览器(IE7+,Firefox,Chrome,Safari 以及 Opera)均内建XMLHttpRequest对象:
variable=new XMLHttpRequest();
为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象.
如果支持,则创建 XMLHttpRequest 对象.如果不支持,则创建 ActiveXObject:
var xmlHttpRequest; if (window.XMLHttpRequest) {//in JavaScript, if it exists(not null and undifine), it is true. // code for IE7+, Firefox, Chrome, Opera, Safari xmlHttpRequest = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }
也可以先判断IE6,5的情况:
if (window.ActiveXObject) { //code for IE6, IE5 } else { //code for others }
使用AJAX跟服务器端通信
1.准备阶段:
xmlHttpRequest.open("GET", "AjaxServlet", true);
open方法的原型是:XMLHttpRequest.prototype.open = function(method,url,async,user,password) {};
我们这里只指定了三个参数:方法,路径和发送异步请求为true.
2.关联好回调函数:
当状态改变的时候,进入处理器,这里是一个回调方法:
xmlHttpRequest.onreadystatechange = ajaxCallback;
状态分为多种,被数字标识.参见: http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp
readyState存有 XMLHttpRequest 的状态,从 0 到 4 发生变化:
0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
3.真正地向服务器端发送数据:
xmlHttpRequest.send();
这里使用GET方法,可以不传入参数,或者写send(null),发送POST请求时,需要在这里传入参数.
4.处理回调:
function ajaxCallback() { //alert("test");//this alert will show several times when click the button. if (4 == xmlHttpRequest.readyState && 200 == xmlHttpRequest.status) { var responseText = xmlHttpRequest.responseText; document.getElementById("div1").innerHTML = responseText; } }
先判断readyState再判断响应的返回值为4,表示请求已完成,status返回200表示响应的返回值为200,即HTTP请求成功.
这里将服务器返回的内容设置入div节点,显示出来.
完整代码
服务器端程序:
package com.mengdd.servlets; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; public class HelloAjaxServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("doGet invoked!"); PrintWriter out = response.getWriter(); out.println("Hello World"); out.flush(); } }
index.jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Hello Ajax</title>
<script type="text/javascript">
var xmlHttpRequest;
function ajaxSubmit() {
if (window.XMLHttpRequest) {//in JavaScript, if it exists(not null and undifine), it is true.
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlHttpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// code for IE6, IE5
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} else {
//very rare browsers, can be ignored.
}
//also, we can handle IE5,6 first using:
/*
if (window.ActiveXObject) {
//code for IE6, IE5
}
else {
//code for others
}
*/
//send request
if (null != xmlHttpRequest) {
//1. prepare request
xmlHttpRequest.open("GET", "AjaxServlet", true);
// XMLHttpRequest.prototype.open = function(method,url,async,user,password) {};
//2. set callback function to handle events
xmlHttpRequest.onreadystatechange = ajaxCallback;
//3. do sending request action
xmlHttpRequest.send();//POST requset needs params here, for GET, just leave params empty or set it to null.
}
}
function ajaxCallback() {
//alert("test");//this alert will show several times when click the button.
if (4 == xmlHttpRequest.readyState && 200 == xmlHttpRequest.status) {
var responseText = xmlHttpRequest.responseText;
document.getElementById("div1").innerHTML = responseText;
}
}
</script>
</head>
<body>
<input type="button" value="get content from server" onclick="ajaxSubmit();">
<div id="div1"></div>
</body>
</html>
web.xml:
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1"> <servlet> <servlet-name>HelloAjaxServlet</servlet-name> <servlet-class>com.mengdd.servlets.HelloAjaxServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>HelloAjaxServlet</servlet-name> <url-pattern>/AjaxServlet</url-pattern> </servlet-mapping> </web-app>
参考资料:
w3school AJAX: http://www.w3school.com.cn/ajax/index.asp
圣思园张龙老师JavaWeb视频教程63: AJAX深度剖析,XMLHttpRequest对象大揭秘.