原生Ajax使用教程

转载请注明原文地址：http://www.cnblogs.com/ygj0930/p/6682564.html 

  浏览器端

一：创建XMLHttpRequest对象  

    所有现代浏览器均支持 XMLHttpRequest 对象（旧版IE除外，IE5和IE6使用 ActiveXObject）

由于不同浏览器的控件不同，所以为了兼容性，需要根据当前页面所在浏览器以不同方式获取到XMLHttpRequest对象：先检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject。

var xmlhttp;
if (window.XMLHttpRequest) { //检查浏览器的XMLHttpRequest属性，如果为真则支持XMLHttpRequest
// IE7+, Firefox, Chrome, Opera, Safari 浏览器支持XMLHttpRequest
xmlhttp=new XMLHttpRequest();
} else {
// IE6, IE5 浏览器使用ActiveXObject
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

二：向服务器URL发出请求，传递参数   

    我们使用 XMLHttpRequest对象的open() 方法连接到服务器某url，设置回调函数监听返回结果、最后send() 并发出请求、传参。

方法	描述
open(method,url,async)	请求类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：处理请求的文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。 string：仅用于 POST 请求。如果上面open中设置请求方法为GET,则此处send(null)，若上面 为Post，则send（"para1=val1 & para2=val2..."）传递参数

   GET方式：在open（）方法的url参数后面拼接参数，然后send()发送一个请求过去即可。

     POST方式：open()方法URL不携带参数，在send()中传递参数列表发送请求，并且在发送请求前需要设置请求头的Content-Type属性。

     而设置回调函数是通过

xmlHttp.onreadystatechange = 回调函数；

实现的，这里注意：回调函数赋值给xmlHttp.onreadystatechange时不能带()，只是把函数名赋值。

    

所以Ajax向服务器发出请求的操作步骤为：

1：通过xmlHttp.open()设置发送请求的目标url，并指明发送方式、是否异步处理请求（一般选true）；

2：为xmlHttp.onreadystatechange设置回调函数处理返回结果

3：通过xmlHttp.send()发出请求

GET方式：
xmlHttp.open("GET", "url?参数=val & ...", true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);

POST方式：
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//用post方法的话，一定要加这句设置请求头的contentType属性
xmlHttp.onreadystatechange = callback;
xmlHttp.send("参数=val &...");    //在send方法中传递参数。

     三：定义回调函数callback，监听onreadystatechange事件，处理返回结果

    XMLHttpRequest 对象有三个重要的属性：

属性	描述
onreadystatechange	值是一个函数，每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: 请求处理成功 404: 未找到页面

onreadystatechange 事件   

     当请求被发送到服务器时，服务器对请求进行处理并作出响应，而对请求的处理的不同阶段对应不同的readyState,readyState 属性存有 XMLHttpRequest 的状态信息。每当 readyState改变时，就会触发onreadystatechange 事件。

     我们使用一个回调函数处理onreadystatechange 事件，函数一般格式为：

if (xmlhttp.readyState==4 && xmlhttp.status==200)｛
  处理结果；
｝else｛
  错误提示；
｝

处理结果

    服务器与浏览器的信息传递归根到底是IO流的传输，而IO流传输的是字节流、字符流。但是，我们知道简单的字符串有时候不能很好地表达我们的结果，比如：返回结果是一组对象。这时候我们就可以用某种易于携带数据、易解析的字符串来传递结果了。在Ajax中，返回的结果类型可以有多种，普通文本、XML、JSON、Html等都可以，而这多种结果类型最终只用xmlhttprequest的两个属性获取：

属性	描述
responseText	获得字符串形式的响应数据。包括普通文本、json字符串、html字符串
responseXML	获得 XML 形式的响应数据并解析成xml的document对象。

  XML格式的结果字符串可以用responseXML获取并解析成xml的document对象进行结点访问与内容提取；普通文本、json字符串、html字符串（少用）则通过responseText获取，普通文本结果直接使用，json字符串通过eval(jsonstring)解析成json对象来使用，html字符串则用来改变html页面的某处代码。

if(ID=="getTXT"){
            //以普通文本返回：
            var str = xmlHttp.responseText;
            }

if(ID=="getXML"){
            //以xml文档返回:
                var xmldoc = xmlHttp.responseXML;
                        var nodes=xmldoc.getElementsByTagName("标签名");   //按标签解析为数组
                        for(var i=0;i<nodes.length;i++)
                        {
                            提取结点值并使用；
                        }
                    }

if(ID=="getJSON"){
            //以json文档返回:json数据的处理统一先用responseText作为一个字符串接收后再转为json对象进行处理
               var str = xmlHttp.responseText;
               var json = eval('(' + str + ')');
               通过json.XX提取内容
                 }
                   

服务器端

    服务器端定义一个servlet进行请求处理，然后返回结果。

返回结果的步骤：

1：设置响应编码格式；

2：设置响应的Content-Type;

3：拼接结果字符串：XML格式的结果需要用StringBuffer或StringBuilder来拼接。一定要先加XML标准定义：<?xml version=\"1.0\" encoding=\"utf-8\"?>

4：获取响应输出流；

5：通过输出流向浏览器传输结果字符串；

public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        request.setCharacterEncoding("UTF-8");
        String ID = request.getParameter("ID");
            if("getTXT".equals(ID)){
            getTXT(request, response);
        }else if("getXML".equals(ID)){
            getXML(request, response);
        }else if("getJSON".equals(ID)){
            getJSON(request, response);
        }
    }

    public void getTXT(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/plain; charset=UTF-8");
        PrintWriter out = response.getWriter();
        out.write("普通文本值");
        out.close();
    }

    public void getXML(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/xml; charset=UTF-8");
        PrintWriter out = response.getWriter();
        //XML格式的结果需要用StringBuffer或StringBuilder来拼接。切记：一定要先加XML标准定义<?xml version=\"1.0\" encoding=\"utf-8\"?>
        StringBuffer sb = new StringBuffer("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
        sb.append("<root><node>结点值</node></root>");
        out.write(sb.toString());
        out.close();
    }

    public void getJSON(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setCharacterEncoding("UTF-8");
        response.setContentType("application/json; charset=UTF-8");
        PrintWriter out = response.getWriter();
        out.write("{JSON字符串}");
        out.close();
    }