AJAX初探,XMLHttpRequest介绍

AJAX

AJAX = Asynchronous JavaScript and XML. 异步的JavaScript和XML.

AJAX是一种在不需要重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术.

之前传统的网页如果需要更新内容,必须重新加载整个页面.

AJAX基于已有标准,已被使用多年. 2005年的Google Suggest使其流行起来,当你输入关键字时,会返回搜索建议的列表.

优点:更快,给用户的体验更好,减少了传输的流量.

举例:

在百度,Google的搜索框输入文字时,可以看到已经发送出请求,所以有搜索建议列表;

百度地图,在拖动地图的时候,也可以看到它在不断地发出请求,页面内容在发生改变,但是整个页面并没有被刷新.

AJAX中的重要对象:XMLHttpRequest

这个对象是微软最先在ie里面提供的,使用的是ActiveX对象(IE5和IE6):

     variable=new ActiveXObject("Microsoft.XMLHTTP");

　　现在,所有的现代浏览器(IE7+,Firefox,Chrome,Safari 以及 Opera)均内建XMLHttpRequest对象:

     variable=new XMLHttpRequest();

为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象.

如果支持,则创建 XMLHttpRequest 对象.如果不支持,则创建 ActiveXObject:

var xmlHttpRequest;

if (window.XMLHttpRequest) {//in JavaScript, if it exists(not null and undifine), it is true.

    // code for IE7+, Firefox, Chrome, Opera, Safari

    xmlHttpRequest = new XMLHttpRequest();

} else {

    // code for IE6, IE5

    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

}

也可以先判断IE6,5的情况:

if (window.ActiveXObject) {

    //code for IE6, IE5

}

else {

    //code for others

}

使用AJAX跟服务器端通信

1.准备阶段:

xmlHttpRequest.open("GET", "AjaxServlet", true);

open方法的原型是:XMLHttpRequest.prototype.open = function(method,url,async,user,password) {};

我们这里只指定了三个参数:方法,路径和发送异步请求为true.

2.关联好回调函数:

当状态改变的时候,进入处理器,这里是一个回调方法:

xmlHttpRequest.onreadystatechange = ajaxCallback;

　　状态分为多种,被数字标识.参见: http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp

　　readyState存有 XMLHttpRequest 的状态,从 0 到 4 发生变化:

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

3.真正地向服务器端发送数据:

xmlHttpRequest.send();

这里使用GET方法,可以不传入参数,或者写send(null),发送POST请求时,需要在这里传入参数.

4.处理回调:　

function ajaxCallback() {

    //alert("test");//this alert will show several times when click the button.

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

        var responseText = xmlHttpRequest.responseText;

        document.getElementById("div1").innerHTML = responseText;

    }

}

　　先判断readyState再判断响应的返回值为4,表示请求已完成,status返回200表示响应的返回值为200,即HTTP请求成功.

这里将服务器返回的内容设置入div节点,显示出来.

完整代码

服务器端程序:

package com.mengdd.servlets;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.io.PrintWriter;

public class HelloAjaxServlet extends HttpServlet {

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

        System.out.println("doGet invoked!");

        PrintWriter out = response.getWriter();

        out.println("Hello World");

        out.flush();

    }

}

index.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>Hello Ajax</title>

    <script type="text/javascript">

        var xmlHttpRequest;

        function ajaxSubmit() {

            if (window.XMLHttpRequest) {//in JavaScript, if it exists(not null and undifine), it is true.

                // code for IE7+, Firefox, Chrome, Opera, Safari

                xmlHttpRequest = new XMLHttpRequest();

            } else if (window.ActiveXObject) {

                // code for IE6, IE5

                xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

            } else {

                //very rare browsers, can be ignored.

            }

            //also, we can handle IE5,6 first using:

            /*

             if (window.ActiveXObject) {

             //code for IE6, IE5

             }

             else {

             //code for others

             }

             */

            //send request

            if (null != xmlHttpRequest) {

                //1. prepare request

                xmlHttpRequest.open("GET", "AjaxServlet", true);

                // XMLHttpRequest.prototype.open = function(method,url,async,user,password) {};

                //2. set callback function to handle events

                xmlHttpRequest.onreadystatechange = ajaxCallback;

                //3. do sending request action

                xmlHttpRequest.send();//POST requset needs params here, for GET, just leave params empty or set it to null.

            }

        }

        function ajaxCallback() {

            //alert("test");//this alert will show several times when click the button.

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

                var responseText = xmlHttpRequest.responseText;

                document.getElementById("div1").innerHTML = responseText;

            }

        }

    </script>

</head>

<body>

<input type="button" value="get content from server" onclick="ajaxSubmit();">

<div id="div1"></div>

</body>

</html>

web.xml:

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"

         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"

         version="3.1">

    <servlet>

        <servlet-name>HelloAjaxServlet</servlet-name>

        <servlet-class>com.mengdd.servlets.HelloAjaxServlet</servlet-class>

    </servlet>

    <servlet-mapping>

        <servlet-name>HelloAjaxServlet</servlet-name>

        <url-pattern>/AjaxServlet</url-pattern>

    </servlet-mapping>

</web-app>

参考资料:

　　w3school AJAX: http://www.w3school.com.cn/ajax/index.asp

　　圣思园张龙老师JavaWeb视频教程63: AJAX深度剖析,XMLHttpRequest对象大揭秘.