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

packagecom; importjava.io.*; importjavax.servlet.*; importjavax.servlet.http.*; @SuppressWarnings("serial") publicclassServiceAjaxextendsHttpServlet{ publicServiceAjax(){ super(); } publicvoiddestroy(){ super.destroy(); } publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse) throwsServletException,IOException{ request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); Stringname=request.getParameter("name"); Stringage=request.getParameter("age"); System.out.println(name+"你好,你今年"+age+"岁了!"); PrintWriterout=response.getWriter(); out.write(name+"你好,你今年"+age+"岁了!"); out.flush(); out.close(); } publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse) throwsServletException,IOException{ doGet(request,response); } publicvoidinit()throwsServletException{ } }

别忘了在web.xml中配置:

<?xmlversion="1.0"encoding="UTF-8"?> <web-appversion="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中写请求内容:

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%> <% Stringpath=request.getContextPath(); StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"> <html> <head> <basehref="<%=basePath%>"> <title>XMLHttpRequest对象学习</title> <scripttype="text/javascript"language="javascript"> functionloadXMLDoc(){ varxmlhttp; if(window.XMLHttpRequest){ //codeforIE7+,Firefox,Chrome,Opera,Safari xmlhttp=newXMLHttpRequest(); }else{ //codeforIE6,IE5 xmlhttp=newActiveXObject("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更稳定也更可靠 */ varurl="<%=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> <divid="myDiv"></div> <inputtype="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(),这样浏览器会以为每次都是新的请求。为了防止乱码,在请求的头消息中和后台的处理中,都要增加编码设置。执行后后台会打印收到的参数,前台会提示返回的值。

声明:有的资源均来自网络转载,版权归原作者所有,如有侵犯到您的权益 请联系邮箱:our333@126.com我们将配合处理!

原文地址:JavaScript中XMLHttpRequest对象初步使用发布于2021-11-25 16:30:01