在使用过JQuery之后，再来看JavaScript的Ajax实现就会觉得很麻烦，不过，最近使用到了，就记录一下吧

在JavaScript中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 ActvieXObject("Msxml2.XMLHTTP");//IE6.0

            } catch (e) {

                try {

                    return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本

                } catch (e) {

                    alert("浏览器不支持");

                    throw e;

                }

            }

        }

    };

第二步打开与服务器的链接

xmlHttp.open()：用来打开与服务器的连接，它需要三个参数：

请求方式：可以是GET或POST
请求的URL：指定服务器端资源，例如一个Servlet
请求是否为异步：如果为true表示发送异步请求，否则同步请求

 xmlHttp.open("GET", "/AServlet", true);

第三步发送请求(分为GET和POST方式)

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

第四步给XMLHttpRequest对象的onreadystatechange事件注册监听器，以监听服务器响应

在xmlHttp对象的一个事件上注册监听器：onreadystatechange
xmlHttp对象一共有5个状态：

0状态：刚创建，还没有调用open()方法;
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;

      }

  };

示例代码

准备工作：在页面（jsp）中写两句HTML，一个按钮，一个段落

    <input type="button" value="点击" id="btn"/>

    <h1 id="h1"></h1>

先来看看GET方式的Ajax：

<script type="text/javascript">

    function createXMLHttpRequest() {

        try {

            return new XMLHttpRequest();

        } catch (e) {

            try {

                return ActvieXObject("Msxml2.XMLHTTP");//IE6.0

            } catch (e) {

                try {

                    return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本

                } catch (e) {

                    alert("浏览器不支持");

                    throw e;

                }

            }

        }

    };

    window.onload = function() {

        var btn=document.getElementById("btn");

        btn.onclick=function(){

            //第一步:得到XMLHttpRequest对象

            var xmlHttp = createXMLHttpRequest();

            //第二步:打开与服务器的连接

            xmlHttp.open("GET", "${pageContext.request.contextPath}/AServlet",true);

            //第三步:发送请求(GET方式必须指定null)

            xmlHttp.send(null);

            //第四步:给异步对象的onreadystatechange事件注册监听器

            xmlHttp.onreadystatechange = function() {

                //双重判断：状态4 响应码200

                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

                    //获得服务器的响应

                    var text = xmlHttp.responseText;

                    //处理h1元素

                    var h1 = document.getElementById("h1");

                    h1.innerHTML = text;

                }

            };

        };

    };

</script>

获得XMLHttpRequest对象方式会有浏览器差异，所以createXMLHttpRequest()方法处理一下，在这里我使用的是Servlet

AServlet如下：

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class AServlet extends HttpServlet {

    public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        System.out.println("Hello Ajax");

        resp.setContentType("text/html;charset=utf-8");

        resp.getWriter().print("Hello Ajax");

    }

    public void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        req.setCharacterEncoding("utf-8");

        System.out.println("POST(:)Hello Ajax");

        resp.setContentType("text/html;charset=utf-8");

        resp.getWriter().print("POST(:)Hello Ajax"+req.getParameter("userName"));

    }

}

Servlet完成的工作还算简单，值得说的是必须给response指定请求头 setContentType()

POST方式的Ajax提交方式：

<script type="text/javascript">

    function createXMLHttpRequest() {

        try {

            return new XMLHttpRequest();

        } catch (e) {

            try {

                return ActvieXObject("Msxml2.XMLHTTP");//IE6.0

            } catch (e) {

                try {

                    return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本

                } catch (e) {

                    alert("浏览器不支持");

                    throw e;

                }

            }

        }

    };

    window.onload = function() {

        var btn=document.getElementById("btn");

        btn.onclick=function(){

            //第一步:得到XMLHttpRequest对象

            var xmlHttp = createXMLHttpRequest();

            //第二步:打开与服务器的连接

            xmlHttp.open("POST", "${pageContext.request.contextPath}/AServlet",true);

            //POST方式需要处理请求头

            xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");

            //第三步:发送请求

            xmlHttp.send("userName=lz");

            //第四步:给异步对象的onreadystatechange事件注册监听器

            xmlHttp.onreadystatechange = function() {

                //双重判断：状态4 响应码200

                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

                    //获得服务器的响应

                    var text = xmlHttp.responseText;

                    //处理h1元素

                    var h1 = document.getElementById("h1");

                    h1.innerHTML = text;

                }

            };

        };

    };

</script>

与GET方式不同的之处在于POST需要处理请求头，使用send()方法时需要给出需要的参数，就是这两点不同吧

封装Ajax

因为JavaScript的Ajax处理较为麻烦且固定，在这里完成一个简单封装，类似于JQuery中的$.ajax()方法的实现

ajaxUtils.js :

//处理浏览器差异，获得XMLHttpRequest

function createXMLHttpRequest(){

    try{

        return new XMLHttpRequest();     //大多数浏览器

    }catch (e) {

        try {

            return ActvieXObject("Msxml2.XMLHTTP");//IE6.0

        } catch (e) {

            try {

                return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本

            } catch (e) {

                alert("浏览器不支持");

                throw e;

            }

        }

    }

}

/*

 * option对象有如下属性

 */

         /*请求方式method,*/

        /*请求的url url,*/

        /*是否异步 asyn,*/

        /*请求体 params, */

        /*回调方法 callback,*/

        /*服务器响应数据转换成什么类型 type*/

        /*url和callback没有默认值,必须指定*/

function ajax(option){

    /**

     * 1.得到XMLHttpRequest

     */

     var xmlHttp=createXMLHttpRequest();

     /**

      * 2.打开连接

      */

      if(!option.method){   //默认为GET请求

          option.method="GET";

      }

      if(option.asyn==undefined){  //默认为异步

          option.asyn=true;

      }

      xmlHttp.open(option.method, option.url, option.asyn);

      /**

       * 3.判断是否为POST

       */

       if("POST" == option.method) {

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

    }

    /**

     * 4.发送请求

     */

     xmlHttp.send(option.params);

     /**

      * 5.注册监听

      */

      xmlHttp.onreadystatechange=function(){

          if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//双重判断

            var data;

            // 获取服务器的响应数据，进行转换！

            if(!option.type) {//如果type没有赋值，那么默认为文本

                data = xmlHttp.responseText;

            } else if(option.type == "xml") {

                data = xmlHttp.responseXML;

            } else if(option.type == "text") {

                data = xmlHttp.responseText;

            } else if(option.type == "json") {

                var text = xmlHttp.responseText;

                data = eval("(" + text + ")");

            }

            // 调用回调方法

            option.callback(data);

        }

      };

};

我们直接在页面中使用ajax()方法即可，注意 url和callback没有默认值,必须指定

页面中使用：

<script type="text/javascript" src="${pageContext.request.contextPath}/js/ajaxUtils.js"></script>

<script type="text/javascript">

  window.onload=function(){

      var btn=document.getElementById("btn");

      btn.onclick=function(){

          ajax({

              url:"${pageContext.request.contextPath}/AServlet",

              callback:function(data){

                  document.getElementById("h1").innerHTML=data;

              }

          });

      };

  };

</script>

data就是服务器返回的数据

巴特西

JavaScript笔记——使用AJax

示例代码

封装Ajax

最新文章

热门文章