JavaScript中XMLHttpRequest对象初步使用

编程技术  /  houtizong 发布于 2年前   147

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, Safarixmlhttp=new XMLHttpRequest();}else {// code for IE6, IE5xmlhttp=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(),这样浏览器会以为每次都是新的请求。

 

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

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

 

请您到ITEYE看我的原创:http://cuisuqiang.iteye.com

或支持我的个人博客,地址:http://www.javacui.com

 

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!

留言需要登陆哦

技术博客集 - 网站简介:
前后端技术:
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成

网站主要作用:
1.编程技术分享及讨论交流,内置聊天系统;
2.测试交流框架问题,比如:Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识,如有侵权请发邮件到站长邮箱,站长会尽快处理;
4.站长邮箱:[email protected];

      订阅博客周刊 去订阅

文章归档

文章标签

友情链接

Auther ·HouTiZong
侯体宗的博客
© 2020 zongscan.com
版权所有ICP证 : 粤ICP备20027696号
PHP交流群 也可以扫右边的二维码
侯体宗的博客