AJAX初探,XMLHttpRequest介绍

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对象大揭秘.