手机端小强原创文章,java小强个人博客站点
当前位置: 首页 >> JS >> JavaScript中XMLHttpRequest对象初步使用

JavaScript中XMLHttpRequest对象初步使用

30890 JS | 2014-6-18

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(),这样浏览器会以为每次都是新的请求。
为了防止乱码,在请求的头消息中和后台的处理中,都要增加编码设置。
执行后后台会打印收到的参数,前台会提示返回的值。

 

推荐您阅读更多有关于“ XMLHttpRequest HTTP 协议 POST HEAD DOM ”的文章

上一篇:JS跨浏览器解析XML应用 下一篇:JSON简介与JS解析JSON

猜你喜欢

发表评论:

个人资料
blogger

java小强
没有思考,人生的路会越走越难!

搜索
分类
最新微语
  • 车也学了,年也过了,生日也过了,村里的会也赶了,这次,是真的,年过去了。不过我没回京,也没有在家找工作,我在等什么吗?反正现在正合了我这个懒人的要求,不过,我歇不住,思考下人生。

    2018-03-20 00:11

  • 8月1日,我已离开奋斗多年的北京。不知道是暂时的离开,还是永久的离别,反正已经离职在家,告别每日上班,每天苦累的煎熬,过一段属于自己的生活。以前是专职工作,现在专职生活。

    2017-08-18 12:47

  • 又弄完一个项目,累成狗,但是感觉又进步不少,除了很多坑已经踩过,做起来也是轻车熟路。同时也认识到,程序不在于你多牛逼,而是在乎你的细节把控度,而细节的关注,是一个优秀程序员必须要注意的。另外,要相信自己,勇敢向前,没人生下来就是成功的,而且,成功的路,比成功本身更重要。

    2017-06-30 09:46

  • 今日北京再次沙尘暴来袭,吃了几年细粮,终于能来口粗粮了,不过大早上看见这场景,还是吓我一跳,不过随后就平静了,毕竟是老朋友了。进公司又发现一股烤糊的味道,真是祸不单行啊,例外都是污染。发了两个口罩,开启保护模式。

    2017-05-04 10:16

  • 今天同学问我,最近还在写代码吗?我想了想,这个问题怎么回答呢,我好像确实很长时间,虽然写了一些,但是主要内容已经不是写代码了。然后再想想,自己也7年多了,这么多年了,我收获了什么,我的目标到底是什么。眼看就奔三了,人生啊,开启感叹模式。

    2017-03-30 22:52

  • 更多»

最新文章
热门文章
随机文章