ajax之发送异步请求(四步)

 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!!");

<script type="text/javascript">
function createXMLHttpRequest() {
    try{
    return new XMLHttpRequest();
    }catch(e){
        try{
        return new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            try{
            return new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e){
                alter("请更换浏览器！")
                throw e;
            }
        }
    }
}

window.onload = function() {//文档加载完成后
    var btn = document.getElementById("btn");
    btn.onclick = function() {//给按钮的点击事件注册监听
    /*
            ajax四步操作
            得到服务器的响应
            把响应结果显示到h1中
    */
    //1.得到异步对象
    var xmlHttp = createXMLHttpRequest();
    /*2.打开与服务器的连接:
        *指定请求的方式
        *指定请求的url
        *指定是否为异步请求
    */
    xmlHttp.open("GET", "/Web/ASer", true);
    //3.发送请求
    xmlHttp.send(null);    //GET请求没有请求体，但也要给出null，否则浏览器可能不会发送
    //4.给异步对象的 onreadystatechange事件注册监听器
    xmlHttp.onreadystatechange = function() {//当XMLHttp的状态发送变化是执行
        // 双重判断：状态4表示服务器的响应结束，状态码200表示响应成功
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            // 获取服务器的响应结束
            var text = xmlHttp.responseText;
            //获取h1元素
            var h1 = document.getElementById("h1");
            h1.innerHTML = text; 
            }
        }
    }
}
</script>

<button id="btn">点击这里</button>
    <h1 id="h1">1</h1>

 

部署后

 

 

 

 

 

 

 

 

 

 

经供参考