JavaScript中XMLHttpRequest对象初始使用 _JavaScript

JavaScript中XMLHttpRequest对象初步使用

源：http://cuisuqiang.iteye.com/blog/1461306

评：

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。用于接收请求，该请求接收参数，返回一个字符串：

Java代码 ?

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中配置：

Java代码 ?

<?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中写请求内容：

Java代码 ?

<%@?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请求，要定义其头消息：

Java代码 ?

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

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

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

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