XMLHttpRequest五步使用法

XMLHttpRequest五步使用法Ajax 即 Asynchronous 异步 JavaScript 和 XML 一门综合性的技术 运用 JavaScript 对象 XMLHttpReque 进行异步数据交换 JavaScript 操作 DOM 实现动态效果 运用 XHTML CSS 表达信息 XML 和 XSLT 操作数据 此篇文章重点介绍使用 XMLHttpReque 对象与服务器端进行异步数据交换 使

  Ajax:即”Asynchronous JavaScript and XML”(异步JavaScript和XML),一门综合性的技术:运用JavaScript对象XMLHttpRequest进行异步数据交换;JavaScript操作DOM实现动态效果;运用XHTML+CSS表达信息;XML和XSLT操作数据。此篇文章重点介绍使用XMLHttpRequest对象与服务器端进行异步数据交换。

  使用方法

  XMLHttpRequest五步使用法:

  1.创建对象;

  2.注册回调函数;

  3.使用open方法设置和服务器交互的基本信息;

  4.设置发送的数据,开始和服务器端交互;

  5.实现回调函数。

  由于每次应用XMLHttpRequest对象时,都要进行五步操作,因此,可将该对象的使用封装为js文件中,传递部分参数使用其方法就可以完成相应功能,实现如下:

  //使用封装方法人员只提供http的请求,url地址,数据,成功和失败的回调的方法

  //1.定义XMLHttpRequest对象的构造方法

  var MyXMLHttpRequest =function(){

  var xmlhttprequest;

  if(window.XMLHttpRequest){

  //IE7,IE8,FireFox,Mozillar,Safari,Opera

  //alert(“IE7,IE8,FireFox,Mozillar,Safari,Opera”);

  xmlhttprequest = new XMLHttpRequest();

  //解决浏览器在服务器端响应由于没有Text头的时候可能无法工作的问题

  if(xmlhttprequest.overrideMimeType){

  xmlhttprequest.overrideMimeType(“text/xml”);

  }

  }else if(window.ActiveXObject){

  //IE6,IE5.5,IE5

  alert(“IE6,IE5.5,IE5”);

  var activexName =[“MSXML2.XMLHTTP”,”Microsoft.XMLHTTP”];

  for (var n=0;n

  扩展问题

  1.浏览器缓存

  2.中文乱码

  3.跨域访问

  对于问题1、问题3都可以通过更改url地址的方法得以解决。问题1可在url地址尾添加时间戳,问题3通过代理方式进行解决。只需在send()中的第三步执行前添加相应判断即可:

  //解决缓存的转换:增加时间戳

  if(url.indexOf(“?”) >= 0 ){

  url = url + “&t=” + (new Date())。valueOf();

  } else {

  url = url + “?t=” + (new Date())。valueOf();

  }

  //解决跨域的问题

  if(url.indexOf(“http://”) >= 0) {

  url.replace(“?”,”&”);

  url = “Proxy?url=” + url;

  }

  问题3对应代理服务端实现:

  /

  * Handles the HTTP GET method.

  *

  * @param request servlet request

  * @param response servlet response

  * @throws ServletException if a servlet-specific error occurs

  * @throws IOException if an I/O error occurs

  */

  @Override

  protected void doGet(HttpServletRequest request, HttpServletResponse response)

  throws ServletException, IOException {

  //获取参数,最后得到请求url地址类似于:url = http://192.168…/AJAX/AJAXServer?aa=11&bb=22&cc=33

  StringBuilder url = new StringBuilder();

  url.append(request.getParameter(“url”));

  //获取访问的跨域地址url = http://192.168…/AJAX/AJAXServer

  Enumeration enu = request.getParameterNames();

  boolean flag = false; //定义标志变量,表示是否为拼接的第一个参数

  while(enu.hasMoreElements()){

  String paramName = (String) enu.nextElement();

  if(!paramName.equals(“url”)){

  String paramValue = request.getParameter(paramName);

  paramValue = URLEncoder.encode(paramValue,”utf-8″);

  if(!flag){

  url.append(“?”)。append(paramName)。append(“=”)。append(paramValue);

  flag = true;

  } else {

  url.append(“&”)。append(paramName)。append(“=”)。append(paramValue);

  }

  }

  }

  response.setContentType(“text/html;charset=utf-8”);

  PrintWriter out = response.getWriter();

  if(url != null && url.length() > 0){

  URL connectionUrl = new URL(url.toString());

  BufferedReader reader = new BufferedReader(new InputStreamReader(connectionUrl.openStream(),”utf-8″));

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/223846.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月17日 下午1:18
下一篇 2026年3月17日 下午1:19


相关推荐

  • 深圳易速马网络科技有限公司_动易网络

    深圳易速马网络科技有限公司_动易网络纵观现如今国内CMS程序,大有百花争艳的感觉,随着企业建站需求的复杂度和功能的不断扩展,传统的三五个人写一段代码即告网站建已经行不通,于是以内容管理为应用核心的CMS产品大行其道。  这些CMS系统大体上基于两套框架编写:PHP+MySQL和.NET+MSSQL。在PHP中比较有名的就有DeDeCMS、PHP168、帝国CMS、Supesite等,在.NET方面就有zoomla!CMS、

    2022年9月30日
    5
  • vue跨域解决方案 简书_springboot允许跨域

    vue跨域解决方案 简书_springboot允许跨域一:为什么会出现跨域问题?出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)。二:什么是跨域?当一个请求url的协议、域

    2025年12月4日
    4
  • RJ45 网线接口介绍

    RJ45接口通常用于数据传输,最常见的应用为网卡接口。  RJ45是各种不同接头的一种类型(例如:RJ11也是接头的一种类型,不过它是电话上用的);RJ45头根据线的排序不同,分为有两种,一种是橙白、橙、绿白、蓝、蓝白、绿、棕白、棕;另一种是绿白、绿、橙白、蓝、蓝白、橙、棕白、棕;因此使用RJ45接头的线也有两种即:直通线、交叉线。RJ45型网卡接口  10100basetxRJ

    2022年4月9日
    54
  • spring事务隔离级别、传播机制以及简单配置_mysql查看事务隔离级别

    spring事务隔离级别、传播机制以及简单配置_mysql查看事务隔离级别org.springframework.transactionpublicinterfaceTransactionDefinition定义符合Spring的事务属性的接口。基于类似于EJBCMT属性的传播行为定义。‎‎注意,除非启动实际的新事务,否则不会应用隔离级别和超时设置。‎‎仅‎PROPAGATION_REQUIRED,PROPAGATION_REQUIRES_NEWandPROPAGATION_NESTED‎可能导致这种情况,在其他情况下指定这些设置通常没有意义。此外

    2022年8月30日
    4
  • 一眼看懂map和flatmap的区别

    一眼看懂map和flatmap的区别map的作用很容易理解就是对rdd之中的元素进行逐一进行函数操作映射为另外一个rdd。flatMap的操作是将函数应用于rdd之中的每一个元素,将返回的迭代器的所有内容构成新的rdd。通常用来切分单词。Spark中map函数会对每一条输入进行指定的操作,然后为每一条输入返回一个对象;而flatMap函数则是两个操作的集合——正是“先映射后扁平化”:操作1:同map函数一样:对每一条输入进…

    2022年5月4日
    64
  • CSS半透明边框效果

    CSS半透明边框效果源代码:<!doctypehtml><html><head><metacharset="utf-8"><style>div{ width:500px; height:309px; border:50pxsolidhsla(0,0%,100%,0.5); background:url(file:///C:/Use…

    2022年7月13日
    12

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号