Ajax核心XMLHttpRequest简析

来源：互联网发布：城门失火殃及池鱼知乎编辑：程序博客网时间：2024/05/21 11:08

Ajax介绍

AJAX: Asynchronous Javascript And Xml.所谓的异步Javascripy和XML.
它可以异步发送请求，可以动态装载服务器的数据。
Ajax通过XMLHttpReqeust对象发送请求，利用Javascript通过DOM动态更新HTML页面；相比较与java传统jsp页面响应，可以减轻客户端的内存消耗，无需刷新页面，更加轻便迅捷。
也就是说在对于一个交互性较多的Web应用，Ajax发挥着不可比拟的作用；但是由于它开发的代码量（javascript）较多，对于小型的项目，可能比较繁琐。

XMLHttpRequest—Ajax的灵魂

XMLHttpRequest的方法

abort():停止发送当前请求。

getAllResponseHeaders():获取服务器返回的全部响应头。

getResponseHeader(“headerLabel”):根据响应头的名字，获取对应的响应头。

open(“method”, “URL”, “false or true”)

send(content):发送请求，content可以是null

setRequestHeader(“label”, “value”):发送请求前设置的请求头；一般对于POST请求需要设置请求头:例：设置请求头-发送POST请求时：XMLHttpReq.setRequestHeader(“Content-Type”,
“application/x-www-form-urlencoded”);**

XMLHttpRequest属性

onreadystatechange:用于XMLHttpRequest对象状态改变时的时间处理函数；

readyState:获取XMLHttpRequest对象的处理状态；
有以下四种状态：
0：XMLHttpRequest对象还没有完成初始化;
1：XMLHttpRequest对象开始发送请求;
2：XMLHttpRequest对象的请求发送完成；
3：XMLHttpRequest对象开始读取服务器的响应；
4：XMLHttpRequest对象读取服务器响应结束；

responseText:获取服务器响应的文本

status:当服务器响应完成时的状态码:
有以下几种:
200：服务器响应正常；
304：该资源在上次请求之后没有任何修改(多见与Get请求)
400：无法找到请求的资源；
401：访问资源的权限不够；
403：没有权限访问资源
404：需要访问的资源不存在；
405：需要访问的资源被禁止；
407：访问的资源需要代理身份验证；
414：请求的URL太长；
500：服务器内部错误；

statusText:服务器响应完成时返回的文本信息.

POST请求为例:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>聊天页面</title></head><body onload="sendEmptyRequest();"><div style="width:780px;border:1px solid black;text-align:center">    <h3>聊天页面</h3>    <p><textarea id="chatArea" name="chatArea" cols="90"          rows="30" readonly="readonly"></textarea>    </p>    <div align="center">        <input id="chatMsg" name="chatMsg" type="text"               size="90" onkeypress="enterHandler(event);"/>        <input type="button" name="button" value="提交"               onclick="sendRequest();"/>    </div></div><script type="text/javascript">    var input = document.getElementById("chatMsg");    input.focus();    var XMLHttpReq;    //创建XMLHttpRequest对象    function createXMLHttpRequest() {        if (window.XMLHttpRequest) {            //DOM浏览器            XMLHttpReq = new XMLHttpRequest();        } else if (window.ActiveXObject) {            //IE浏览器            try {                XMLHttpReq = new ActiveXObject("Msxm12.XMLHTTP");            } catch (e) {                try {                    XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP")                } catch (e) {                }            }        }    }    //发送请求函数    function sendRequest() {        //input是一个全局变量,就是用户输入聊天信息的单行文本框        var chatMsg = input.value;        //完成XMLHttpRequest对象的初始化        createXMLHttpRequest();        //定义发送请求的目标URL;        var url = "char.do";//通过注解的方式        //通过open方法取得与服务器的连接        //发送POST请求        XMLHttpReq.open("POST", url, true);        //设置请求头-发送POST请求需要请求头，GET请求不需要        XMLHttpReq.setRequestHeader("Content-Type",            "application/x-www-form-urlencoded");        //指定XMLHttpRequest状态改变时的处理函数        XMLHttpReq.onreadystatechange = processResponse;       //清空输入框的内容        input.value = "";        //发送请求，send的参数包含许多的key-value键值对        //以:请求参数名=请求参数值的形式发送请求参数        XMLHttpReq.send("chatMsg="+chatMsg);    }    function sendEmptyRequest() {        //完成XMLHttpRequest对象的初始化        createXMLHttpRequest();        //定义发送请求的目标URL;        var url = "char.do";        //发送POST请求        XMLHttpReq.open("POST", url, true);        //设置请求头-发送POST请求时需要的请求头        XMLHttpReq.setRequestHeader("Content-Type",            "application/x-www-form-urlencoded");        //指定XMLHttpRequest状态改变时的处理函数        XMLHttpReq.onreadystatechange = processResponse;        //发送请求，不发送任何参数        XMLHttpReq.send(null);        //指定0,8s之后再次发送请求        setTimeout("sendEmptyRequest()", 800);    }    //处理返回信息函数    function  processResponse() {        //当XMLHttpRequest读取服务器响应完成        if (XMLHttpReq.readyState == 4) {            //服务器响应正确()            if (XMLHttpReq.status == 200) {                //使用chatArea多行文本域显示服务器响应的文本                document.getElementById("chatArea").value                    = XMLHttpReq.responseText;            } else {                window.alert("请求页面异常");            }        }    }    //处理文本发送事件    function  enterHandler(event) {        //获取用户单击键盘的“键值”；        var keyCode = event.keyCode?event.keyCode:event.which?event.which:event.charCode;        //如果是回车键        if (keyCode == 13) {            sendRequest();        }    }</script></body></html>

阅读全文

0 0