AJAX初探,XMLHttpRequest介绍

     AJAX = Asynchronous JavaScript and XML. 异步的JavaScript和XML.

     AJAX是一种在不需要重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术.

     之前传统的网页如果需要更新内容,必须重新加载整个页面.

     AJAX基于已有标准,已被使用多年. 2005年的Google Suggest使其流行起来,当你输入关键字时,会返回搜索建议的列表.

     优点:更快,给用户的体验更好,减少了传输的流量.

     举例:

     在百度,Google的搜索框输入文字时,可以看到已经发送出请求,所以有搜索建议列表;

     百度地图,在拖动地图的时候,也可以看到它在不断地发出请求,页面内容在发生改变,但是整个页面并没有被刷新.

     这个对象是微软最先在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
}

     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" %>