JavaScript中XMLHttpRequest对象初步使用

评：

XMLHttpRequest 对象
XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。
尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。
XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。

浏览器支持
XMLHttpRequest 得到了所有现代浏览器较好的支持。唯一的浏览器依赖性涉及 XMLHttpRequest 对象的创建。在 IE 5 和 IE 6 中，必须使用特定于 IE 的 ActiveXObject() 构造函数。正如在 XMLHttpRequest 对象这一节所介绍的。

W3C 标准化
XMLHttpRequest 对象还没有标准化，但是 W3C 已经开始了标准化的工作，本手册介绍的内容都是基于标准化的工作草案。
当前的 XMLHttpRequest 实现已经相当一致。但是和标准有细微的不同。例如，一个实现可能返回 null，而标准要求是空字符串，或者实现可能把 readyState 设置为 3 而不保证所有的响应头部都可用。

我们建立一个Web工程，建立一个Servlet。用于接收请求，该请求接收参数，返回一个字符串：

package com;  
import java.io.*;  
import javax.servlet.*;  
import javax.servlet.http.*;  
@SuppressWarnings("serial")  
public class ServiceAjax extends HttpServlet {  
    public ServiceAjax() {  
        super();  
    }  
    public void destroy() {  
        super.destroy();  
    }  
    public void doGet(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {        
        request.setCharacterEncoding("UTF-8");  
        response.setCharacterEncoding("UTF-8");  
        String name = request.getParameter("name");  
        String age = request.getParameter("age");  
        System.out.println(name + "你好，你今年" + age + "岁了！");    
        PrintWriter out = response.getWriter();  
        out.write(name + "你好，你今年" + age + "岁了！");  
        out.flush();  
        out.close();  
    }  
    public void doPost(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {  
        doGet(request, response);  
    }  
    public void init() throws ServletException {  
    }  
}

别忘了在web.xml中配置：

<?xml version="1.0" encoding="UTF-8"?>  
<web-app version="2.5"   
    xmlns="http://java.sun.com/xml/ns/javaee"   
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  
  <servlet>  
    <servlet-name>ServiceAjax</servlet-name>  
    <servlet-class>com.ServiceAjax</servlet-class>  
  </servlet>  
  <servlet-mapping>  
    <servlet-name>ServiceAjax</servlet-name>  
    <url-pattern>/ServiceAjax</url-pattern>  
  </servlet-mapping>  
  <welcome-file-list>  
    <welcome-file>index.jsp</welcome-file>  
  </welcome-file-list>  
</web-app>

在index.jsp中写请求内容：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <base href="<%=basePath%>">      
    <title>XMLHttpRequest对象学习</title>  
    <script type="text/javascript" language="javascript">  
    function loadXMLDoc(){  
        var xmlhttp;  
        if (window.XMLHttpRequest) {  
            // code for IE7+, Firefox, Chrome, Opera, Safari  
            xmlhttp=new XMLHttpRequest();  
        }else {  
            // code for IE6, IE5  
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
        }  
        /** 
        当您使用 async=false 时，请不要编写 onreadystatechange 函数，把代码放到 send() 语句后面即可 
        每当 readyState 改变时，就会触发 onreadystatechange 事件，readyState 属性存有 XMLHttpRequest 的状态信息 
        readyState：0: 请求未初始化，1: 服务器连接已建立，2: 请求已接收，3: 请求处理中，4: 请求已完成，且响应已就绪 
        status：200: "OK"，404: 未找到页面 
        */  
        xmlhttp.onreadystatechange=function() {  
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {  
                alert(xmlhttp.responseText);  
            }  
        }  
        /**  
        规定请求的类型、URL 以及是否异步处理请求 
        GET 和 POST：法使用缓存文件（更新服务器上的文件或数据库），向服务器发送大量数据（POST 没有数据量限制）， 
        发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠 
        */  
        var url = "<%=basePath %>ServiceAjax";  
        xmlhttp.open("POST",url,true);  
        // 向请求添加 HTTP 头，向请求添加 HTTP 头，value: 规定头的值。get时可不设置，但是send(null)  
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");  
        // 增加time随机参数，防止读取缓存  
        xmlhttp.send("name=Bill&age=22&type=1&time=" +  + Math.random());  
    }  
    </script>  
  </head>    
  <body>  
    <div id="myDiv"></div>  
    <input type="button" name="bxml" value="Read" onclick="loadXMLDoc()" />  
  </body>  
</html>

除了IE5，6外，其他浏览器的创建方式是一致的。

对于POST请求，要定义其头消息：

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");

另外一定要注意的是ajax是有缓存的，为了防止读取缓存，最好在请求上增加一个时间戳参数Math.random()，这样浏览器会以为每次都是新的请求。

为了防止乱码，在请求的头消息中和后台的处理中，都要增加编码设置。

执行后后台会打印收到的参数，前台会提示返回的值。

JavaScript中XMLHttpRequest对象初步使用

相关推荐