通过XMLHTTP实现不刷新页面,提交并取回返回结果,非常有用!

比如在页面不刷新的情况下,点一个下拉菜单访问一次数据库去改变另一个下拉菜单的值。
这个例子中,省略了访问数据库的细节,直接替换为修改XML的内容,因为重点是讨论怎么使用XMLHTTP。
页面中只有两个下拉菜单,当第一个菜单改变时,第二个菜单里的值会变成和第一个相对的值。
//发送请求的HTML页面(或JSP,ASP其他页面)/
<html>
<head>
<title>Jack Zheng xmlhttp test</title>
<script language="javascript">
function sendData(){
  var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  xmlhttp.Open("post", "nofile.jsp?param="+document.form1.input.value, false);//向JSP提交请求
  xmlhttp.Send();
  var xml=xmlhttp.responseText;//从JSP获取结果
 
  var xmlDoc = new ActiveXObject("Msxml2.DOMDocument");
  var i=0;
    xmlDoc.async=false;
    xmlDoc.resolveExternals = false;
    xmlDoc.validateOnParse = false;
    xmlDoc.loadXML(xml);
    xmlObj=xmlDoc.documentElement;
    nodes = xmlDoc.documentElement.childNodes;
    //从Select中删除项目
    for(i=0;i<document.form1.output.options.length;i++){
      document.form1.output.options[i] = null;
    }
    //向Select中添加项目
    document.form1.output.options.length = 0;
    for (i=0;i<xmlObj.childNodes.length;i++){
      values=xmlObj.childNodes(i).getAttribute("id");
      labels=xmlObj.childNodes(i).text;
      //alert(values+","+labels);
      document.form1.output.add(document.createElement("OPTION"));
      document.form1.output.options[i].text=labels;
      document.form1.output.options[i].value=values;
    }
  }
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="form1" method="post" action="">
  <select name="input" οnchange="sendData()">
    <option value="zhengjia">zhengjia</option>
    <option value="Jack">Jack</option>
    <option value="JSP">JSP</option>
    <option value="JavaScript">JavaScript</option>
    <option value="Html">Html</option>
  </select>
  <select name="output">
  </select>
</form>
</body>
//处理请求的JSP页面///
<%@ page language="java" contentType="text/html; charset=GBK" pageEncoding="GBK"%>
<%@ page import="java.io.*"%>
<%@ page import="java.util.*"%>
<%
  //获取参数
  String strParam=request.getParameter("param");
 StringBuffer xml = new StringBuffer();
 //xml.append("<?xml version='1.0' encoding='gb2312'?>/r/n")
  xml.append("<test>/r/n");
        for(int i=0;i<4;i++){
        //根据,参数修改XML的值,此处其实可以替换为数据库操作
            xml.append("<tt id='"+i+"'>/r/n")
                    .append(strParam+i+"/r/n")
                .append("</tt>/r/n");
    }
 xml.append("</test>");
 out.println(xml.toString());//输出到HTML端的JS
%>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
<h3>回答1:</h3><br/>xmlhttp.onreadystatechange是一个JavaScript事件处理程序,用于处理XMLHttpRequest对象的状态变化。当XMLHttpRequest对象的readyState属性发生变化时,该事件处理程序会被触发。在处理程序中,可以根据XMLHttpRequest对象的状态来执行相应的操作,例如发送请求、接收响应、处理响应数据等。 <h3>回答2:</h3><br/>XMLHttpRequest是一个浏览器对象,用于与服务器交换数据。onreadystatechange属性是XMLHttpRequest对象的一个事件处理程序,该事件会在XMLHttpRequest对象的readyState属性发生变化时被触发。XMLHttpRequest对象有5个不同的就绪状态,可以分别用数字0到4表示,如下: 0: 请求未初始化。XMLHttpRequest对象已创建,但尚未调用open()方法。 1: 服务器连接已建立。open()方法已经被调用,但send()方法尚未被调用。在这个状态下,可以通过setRequestHeader()方法来设置请求头部。 2: 请求已接收。send()方法已经被调用,服务器会接收请求,并返回响应。 3: 请求处理中。服务器正在处理请求,但尚未返回响应。 4: 请求已完成,且响应已就绪。响应已经接收,并可以获取响应数据。同时,XMLHttpRequest对象的各个属性和方法也已经可以使用了。 当readyState属性发生变化时,浏览器会调用回调函数,以检查响应是否已完成,并对返回的数据进行处理。通常,开发人员会为XMLHttpRequest对象设置一个指向响应处理函数的onreadystatechange属性。此时,回调函数会在XMLHttpRequest对象状态变化时被调用。 XMLHttpRequest对象的onreadystatechange属性通常会被设置为一个匿名函数,该函数会在XMLHttpRequest对象的就绪状态发生变化时被调用。在这个匿名函数中,开发人员可以对服务器发来的响应进行处理,并将处理结果用于更新浏览器中的页面内容。这种方式可以实现网页与服务器之间的动态交互,从而提高网页的动态性和实时性。 <h3>回答3:</h3><br/>XMLHttpRequest是一种在不重新加载整个网页的情况下从服务器获取数据的技术。XMLHttpRequest对象可以用于与服务器交换数据,它可以异步获取数据,也就是说不会影响页面的加载和显示。 XMLHttpRequest对象有一个属性onreadystatechange,当XMLHttpRequest对象的状态发生变化时,会触发onreadystatechange事件。通常使用该属性来监测XMLHttpRequest对象的状态变化,以及处理从服务器接收到的数据。 onreadystatechange事件有五个不同的状态: 0表示未初始化,尚未调用open()方法; 1表示已经调用open()方法,但尚未调用send()方法; 2表示已经调用send()方法,但尚未收到响应; 3表示正在接收响应数据; 4表示已经接收到全部响应数据,而且该响应已经可以使用。 当readyState的状态变化为4时,可以调用XMLHttpRequest对象的responseText属性来获取服务器返回的数据。在处理服务器返回数据时,需要注意设置Content-Type头信息,确保浏览器可以正确解析接收到的数据。同时,需要在onreadystatechange事件处理程序中处理错误情况,避免发生网络异常时造成的错误和程序崩溃。 总之,onreadystatechange是XMLHttpRequest对象的一个重要属性,用于监测并处理向服务器发送异步请求的过程中的状态变化和返回的数据。了解该属性的使用方法对于开发基于HTTP请求的Web应用程序非常重要。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

look4u

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值