`
MauerSu
  • 浏览: 513338 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

JavaScript中XMLHttpRequest对象初步使用

    博客分类：
  • Ajax
 
阅读更多

源：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代码  收藏代码
  1. package com;  
  2. import java.io.*;  
  3. import javax.servlet.*;  
  4. import javax.servlet.http.*;  
  5. @SuppressWarnings("serial")  
  6. public class ServiceAjax extends HttpServlet {  
  7.     public ServiceAjax() {  
  8.         super();  
  9.     }  
  10.     public void destroy() {  
  11.         super.destroy();  
  12.     }  
  13.     public void doGet(HttpServletRequest request, HttpServletResponse response)  
  14.             throws ServletException, IOException {        
  15.         request.setCharacterEncoding("UTF-8");  
  16.         response.setCharacterEncoding("UTF-8");  
  17.         String name = request.getParameter("name");  
  18.         String age = request.getParameter("age");  
  19.         System.out.println(name + "你好，你今年" + age + "岁了！");    
  20.         PrintWriter out = response.getWriter();  
  21.         out.write(name + "你好，你今年" + age + "岁了！");  
  22.         out.flush();  
  23.         out.close();  
  24.     }  
  25.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  26.             throws ServletException, IOException {  
  27.         doGet(request, response);  
  28.     }  
  29.     public void init() throws ServletException {  
  30.     }  
  31. }  

 

别忘了在web.xml中配置：

Java代码  收藏代码
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app version="2.5"   
  3.     xmlns="http://java.sun.com/xml/ns/javaee"   
  4.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
  5.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   
  6.     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  
  7.   <servlet>  
  8.     <servlet-name>ServiceAjax</servlet-name>  
  9.     <servlet-class>com.ServiceAjax</servlet-class>  
  10.   </servlet>  
  11.   <servlet-mapping>  
  12.     <servlet-name>ServiceAjax</servlet-name>  
  13.     <url-pattern>/ServiceAjax</url-pattern>  
  14.   </servlet-mapping>  
  15.   <welcome-file-list>  
  16.     <welcome-file>index.jsp</welcome-file>  
  17.   </welcome-file-list>  
  18. </web-app>  

 

在index.jsp中写请求内容：

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

 

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

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

Java代码  收藏代码
  1. xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");  

 

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

 

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

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

分享到：
| JNDI Resources HOW-TO
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    XMLHttpRequest中文参考手册(10)

    通过本章的学习，我们不仅了解了 `statusText` 属性的基本用法，还对 `XMLHttpRequest` 的其他重要组成部分有了初步的认识。 --- 以上内容涵盖了 `XMLHttpRequest` 的 `statusText` 属性以及相关的属性和方法，...

    初步体验Ajax异步提交

    在提供的MyEclipse项目中，`AjaxTest`可能包含了一个示例，演示了如何在实际项目中使用Ajax进行异步提交。通常，这会涉及到HTML页面中触发Ajax请求的按钮，以及对应的JavaScript代码来处理请求和更新结果。 **9. ...

    javascript(经典 实用 n多例子大集合)

    XMLHttpRequest对象是主要工具，用于异步加载XML并处理响应。随着JSON的普及，现在更多地是处理JSON数据，因为其结构更简洁，解析更方便。 6. **其他实用功能**：JavaScript还能实现页面动画、时间日期处理、拖放...

    javascript源码10

    通过XMLHttpRequest对象，我们可以向服务器发送请求并处理响应数据。 JavaScript还具有强大的错误处理机制，当代码运行出错时，会抛出错误对象，开发者可以通过try...catch来捕获并处理这些错误。 最后，随着Node....

    对ajax的初步认识及实例

    Ajax的核心是利用JavaScript和XMLHttpRequest对象来实现后台通信。 1. XMLHttpRequest对象： XMLHttpRequest（XHR）是Ajax的基础，它允许JavaScript在后台与服务器进行通信。通过创建XMLHttpRequest实例，我们可以...

    五日学会Javascript教程

    3. AJAX：初步接触异步编程，了解XMLHttpRequest和fetch API，实现简单的前后端数据交互。 第五天：ES6新特性及进阶话题 1. ES6新特性：包括let和const、解构赋值、模板字符串、箭头函数、类与模块等。 2. 异步编程...

    javascript网页开发-张孝祥_lesson6

    我们将学习如何创建XMLHttpRequest对象，发送HTTP请求，并处理服务器返回的数据。 6. **JSON**：JavaScript Object Notation（JSON）是一种轻量级的数据交换格式，它易于人阅读和编写，同时也易于机器解析和生成。...

    javascript日期输入文本框

    在JavaScript中，处理日期和时间通常涉及到`Date`对象和相关的函数。在这个主题下，我们将深入探讨如何创建一个自定义的日期输入文本框，以及与之相关的JavaScript技术。 1. **JavaScript Date 对象** JavaScript...

    css2.0&DHTML&javascript帮助文档

    7. **AJAX**：通过XMLHttpRequest对象，JavaScript可以异步地从服务器获取数据，更新页面无需刷新。 这些文档将深入讲解CSS2.0、DHTML和JavaScript的相关知识，帮助开发者理解和掌握这些核心技术，提升Web开发技能...

    个人博客开发案例（JavaScript）.zip

    在这个“个人博客开发案例（JavaScript）.zip”中，我们主要关注的是使用JavaScript技术来创建一个个人博客的前端部分。JavaScript是一种广泛应用于网页和网络应用的编程语言，它赋予了网页动态交互的能力，使得用户...

    ajax视频教程1

    1. **创建XMLHttpRequest对象**：首先，我们需要在JavaScript代码中创建一个XMLHttpRequest实例。 2. **初始化请求**：然后，我们调用XMLHttpRequest对象的open()方法，设置请求的类型（GET或POST）、URL以及是否...

    很好的AJAX的学习资料

    在AJAX中，JavaScript负责控制整个流程，包括创建XMLHttpRequest对象、发送请求、接收响应数据以及根据这些数据更新DOM元素等。 #### 四、示例代码解析 下面是一个简单的AJAX投票功能的示例代码： ```javascript ...

    JavaScript课程设计

    在项目中，可能还会涉及到前端框架的初步应用，如React或Vue.js，这些框架简化了DOM操作和状态管理。如果使用了这些框架，学生需要理解组件化开发思想，以及如何利用框架提供的生命周期方法和状态管理工具来构建应用...

    用户注册实例JavaScript视频教程 （带库）~~~~~

    4. AJAX使用：XMLHttpRequest或fetch API实现异步请求。 5. JSON操作：对象转换和数据传输。 6. 跨域资源共享（CORS）配置。 7. 服务器端技术基础：Node.js、Express和数据库连接。 8. 数据库设计：数据模型和CRUD...

    AJAX开发简略-配有相关源代码-网络分享

    1. **创建XMLHttpRequest对象**：在JavaScript中，通过`new XMLHttpRequest()`创建一个XMLHttpRequest实例。 2. **设置回调函数**：使用`onreadystatechange`事件处理器，当服务器响应状态改变时调用该函数。 3. **...

    Ajax基础教程 附源码

    2. **创建XMLHttpRequest对象**：这是Ajax的核心，JavaScript会创建一个XMLHttpRequest对象，作为与服务器通信的通道。 3. **打开连接**：使用XMLHttpRequest对象的`open()`方法，设置请求类型（GET或POST）、URL...

    Ajax 新手快车道

    虽然可以使用原生的XMLHttpRequest对象进行Ajax操作，但jQuery和其他JavaScript库提供了更简洁的API，如jQuery的$.ajax()和$.get()、$.post()方法，使开发变得更加简单。 8. **Ajax的应用场景** - 表单无刷新提交...

    ajax中文基础教程快速入门

    在 JavaScript 中，可以通过以下代码创建 XMLHttpRequest 对象： ```javascript var xhr = new XMLHttpRequest(); ``` 不同浏览器可能有不同的实现方式，因此在实际开发中，通常会使用 `try...catch` 语句来确保兼容...

    AJAX开发简略含续一(PDF 包含源代码)

    　A、XMLHttpRequest对象 　B、Javascript 　C、DOM 　D、XML 　7.2、AJAX开发框架 　A、初始化对象并发出XMLHttpRequest请求 　B、指定响应处理函数 　C、发出HTTP请求 　D、处理服务器返回的信息 　E、一个初步的...

    AJAX开发简略含续一(PDF).rar

    　A、XMLHttpRequest对象 　B、Javascript 　C、DOM 　D、XML 　7.2、AJAX开发框架 　A、初始化对象并发出XMLHttpRequest请求 　B、指定响应处理函数 　C、发出HTTP请求 　D、处理服务器返回的信息 　E、一...

Magicbox
Global site tag (gtag.js) - Google Analytics