Ajax笔记1

Ajax用于与服务器进行异步交互，实现页面的动态局部刷新，Ajax有一个关键对象XMLHttpRequest，学习Ajax关键是掌握XMLHttpRequest的操作方法

Ajax的使用步骤

1.创建XMLHttpRequest对象

Ajax有一个关键的对象XMLHttpRequest，不同浏览器对该对象的创建方式不一样

//一般浏览器支持下面这种方式
var xhr = new XMLHttpRequest();
//IE6,IE5支持下面这种方式
var xhr = new ActiveXObject("Microsoft.XMLHTTP");

在JavaScript中可以对此创建方法进行封装，代码如下：

function getXhr(){
    if(window.XMLHttpRequest){
        return new XMLHttpRequest();
    }else{
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

还有另一种方式

function getXhr(){
    try{
        return new XMLHttpRequest();
    }catch(e){
        try{
            return new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            try{
                return new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e){
            throw e;
            }
        }
    }
}

2.与服务器建立连接

创建对象之后，要使用xhr.open(method, url, asyc)打开与服务器的连接，

open这个方法有三个参数：

1.第一个参数是请求方式：可以是"GET"或"POST"，注意是字符串形式

2.第二个参数是请求的url：可以是servlet的地址

3.第三个参数是是否异步请求：true代表异步请求，false代表非异步请求

注意：当请求方式为为“POST”时，要设置请求头

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

3.向服务器发送请求

建立连接之后，使用xhr.send(context)向服务器发送请求，参数为请求体

不同的请求方式，会send的参数会有所不同。

1.当请求方式是“GET”时，参数应该写“null”，即

xhr.send(null);

2.当请求方式是“POST”时，参数是请求体。当用户登陆时，可以用下面这种方式发送用户信息

xhr.send("username=example&passwd=123456677")

4.获取请求结果

此时要监听XMLHttpRequest的onreadystatechange事件，然后执行一些响应事件

这一步还要知道三个XMLHttpRequest的四个属性：

1.readyState

XMLHttpRequest对象存在五个状态，具体请看http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp

五个状态分别对应数字0，1，2，3，4。具体应用中只需要关心4这个状态，代表着请求已完成，且响应已就绪

2.status

这个属性代表服务器的响应状态码，常见的状态码有200，404，500。

使用给属性时一般使用200这个状态码，代表着服务器响应完成

3.responseText

通过它得到服务器响应的文本内容

4.responseXML

通过它得到服务器响应的xml内容

代码实例：

//得到xmlHttp对象的状态：
var state = xhr.readyState;
//得到服务器响应的状态码：
var status = xhr.status;
//得到服务器响应的内容
var content = xhr.responseText; //得到服务器响应的文本内容
var content = xhr.responseXML; //得到服务器响应的xml内容

Ajax应用实例

首先编写一个AjaxServlet，这里使用doGet方法处理请求，返回“ajax test”文本内容

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.getWriter().print("ajax test");
}

再编写一个ajaxtest.jsp页面

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Insert title here</title>
</head>
<script type="text/javascript">
//创建XMLHttpRequest对象function getXhr(){
        if(window.XMLHttpRequest){
            return new XMLHttpRequest();
        }else{
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
//文档加载完毕时执行以下内容
window.onload = function(){
    var butt = document.getElementById("button");
    butt.onclick = function(){
        var xmlHttp = getXmlHttp();
        xmlHttp.open("GET","<%=request.getContextPath()/AjaxServlet%>",true);
        xmlHttp.send(null);
        xmlHttp.onreadystatechange = function(){
            //readyState==4时，表示服务器响应结束；status==200时，表示服务器响应完成
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                var content = xmlHttp.responseText;
                var elem = document.getElementById("div");
                elem.innerHTML = content;
            }
        };
    };
};
</script>
<body>
    <button id="button">send request</button>
    <div id="div"></div>
</body>
</html>

运行程序

点击按钮之后

下一篇记录对ajax的封装，JQuery的ajax()方法就对Ajax进行了很好的封装