Ajax 的核心是 JavaScript 对象 XMLHttpRequest。

一：得到XMLHttpRequest

同步请求，一请求一响应。

异步请求，多请求多响应。局部刷新。

ajax只需要学习一个对象：XMLHttpRequest

得到XMLHttpRequest

　　·大多数浏览器都支持： var xmlHttp = new XMLHttpRequest();

　　`IE6.0 : var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

　　`IE5.5及更早版本的IE: var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

编写创建XMLHttpRequest对象的函数：

function createXMLHttpRequest() {
    try {
        return new XMLHttpRequest();
    } catch (e) {　　// 上面创建失败执行下面的代码
        try {
            return  new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {　　// 上面创建失败执行下面的代码
            try{
                return new ActiveXObject("Microsoft.XMLHTTP")
            }catch (e) {　　// 所有浏览器格式的浏览器都创建失败。
                alert("无法识别该浏览器，请更换！")
                throw e;
            }
        }
    }
}

二：打开与服务器的连接

XMLHttp.open();　　用来打开与服务器的连接，需要三个参数。

　　·请求方式：GET或者POST

　　·请求的URL：指定服务器端资源，例如：/108920_1/day1

　　`请求是否为异步：如果为true表示发送异步请求，否则同步请求！

xmlHttp.open("GET", "/108920_1/day1", true);

三：发送请求

xmlHttp.send(null): 如果不给参数可能会造成部分浏览器无法发送！
　　·参数就是请求体内容！如果是GET请求，必须给出null。(GET没有请求体)

四：状态解析

在XMLHttp对象的一个事件上注册监听器：onreadystatechange

xmlHttp对象一共有五个状态：

　　·0状态：刚创建，还没有调用！

　　·1状态：请求开始，调用了open方法，还没有调用send()方法！

　　·2状态：调用完了send()方法！

　　·3状态：服务器已经开始响应，但不表示响应结束！

　　·4状态：服务器响应结束！（通常只关心此状态）

得到XMLHttp对象的状态：

　　·var state = xmlHttp.readyState; 　　//可能是0、1、2、3、4

得到服务器的状态码：

　　·var status = xmlHttp.status;　　　　//可能是200、404、500

得到服务器响应的内容：

　　·var content = xmlHttp.responseText;　　//得到服务器的响应的文本格式的内容

　　·var content = xmlHttp.responseXML;　　//得到服务器的响应的xml格式的内容，是Document对象

xmlHttp.onreadystatechange = function (){//XMLHttp的5种状态都会调用此方法
    if (xmlHttp.readyState == 4 && xmlHttp.status ==200) {//双重判断：判断是否为4状态，且判断是否为200
        //获取服务器的响应内容
        var text = xmlHttp.responseText;
    }
}

在MyEclipse中创建WebProject

并通过servlet创建后端文件

通过jsp创建前端

代码

throws ServletException, IOException {
        System.out.println("Hello AJAX!");
        response.getWriter().print("Hello AJAX!!");

点击这里
    
1

部署后

经供参考