ajax in action 第9章 jsp版动态双组合功能

最新推荐文章于 2021-12-08 19:52:33 发布

facepp

最新推荐文章于 2021-12-08 19:52:33 发布

阅读量324

点赞数

分类专栏： jsp java 文章标签： ajax jsp action function string xmlhttprequest

本文链接：https://blog.csdn.net/facepp/article/details/2683066

版权

java 同时被 2 个专栏收录

252 篇文章 0 订阅

订阅专栏

jsp

59 篇文章 0 订阅

订阅专栏

资源: 使用ajax页面(发送和响应);一个处理服务器页面;还使用了一个可重用net.js.
1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>1.html</title>
<script type="text/javascript" src="net.js"></script>
    <script type="text/javascript">
      function FillTerritory(oElem,oTarget){ //此函数启动了Ajax请求

        var strValue = oElem.options[
                     oElem.selectedIndex].value; //从选择列表中获取值
        var url = 'DoubleComboXML.jsp'; //设置目标URL
        var strParams = 'q=' + strValue +
          "&f=" + oTarget.form.name +
          "&e=" + oTarget.name;      //创建参数字符串
        var loader1 = new
        net.ContentLoader(url,FillDropDown,null,
                    "POST",strParams);     //启动内容加载器
      }
      function FillDropDown(){    //使用来自XML响应的数据更新页面
        var xmlDoc = this.req.responseXML.documentElement;
        var xSel = xmlDoc.
           getElementsByTagName('selectElement')[0];
        var strFName = xSel.
           childNodes[0].firstChild.nodeValue;
        var strEName = xSel.
           childNodes[1].firstChild.nodeValue;

        var objDDL = document.forms[strFName].
           elements[strEName];
        objDDL.options.length = 0;

        var xRows = xmlDoc.
          getElementsByTagName('entry');
        for(i=0;i<xRows.length;i++){
          var theText = xRows[i].
              childNodes[0].firstChild.nodeValue;
          var theValue = xRows[i].
              childNodes[1].firstChild.nodeValue;
          var option = new Option(theText,
                            theValue);
          objDDL.options.add(option,
                          objDDL.options.length);
        }
      }
    </script>
</head>

<body>
       <form name="Form1">
      <select name="ddlRegion" οnchange="FillTerritory(this,document.Form1.ddlTerritory)">
        <option value="-1">Pick A Region</option>
        <option value="1">Eastern</option>
        <option value="2">Western</option>
        <option value="3">Northern</option>
        <option value="4">Southern</option>
      </select>
      <select name="ddlTerritory"></select>
    </form>
</body>
</html>

DoubleComboXML.xml(定义XML响应格式,用完后可以删掉)
<?xml version="1.0" ?>
<selectChoice>
<selectElement>
  <formName>Form1</formName>
  <formElem>ddlTerritory</formElem>
</selectElement>
<entry>
  <optionText>select A Territory</optionText>
  <optionValue>-1</optionValue>
</entry>
<entry>
  <optionText>TerritoryDescription</optionText>
  <optionValue>TerritoryID</optionValue>
</entry>
</selectChoice>

DoubleComboXML.jsp
<%@ page language="java" import="java.util.*,java.sql.*,java.io.*" pageEncoding="GB2312"%>
<%
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>My JSP 'DoubleComboXML.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

</head>

<body>
   <%
    String strForm=request.getParameter("f");
    String strElem=request.getParameter("e");
    String strQuery =request.getParameter("q");
Class.forName("com.mysql.jdbc.Driver").newInstance();
String   url   ="jdbc:mysql://localhost/demo?user=root&password=";
Connection   conn=   DriverManager.getConnection(url);
Statement   stmt=conn.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,ResultSet.CONCUR_UPDATABLE);
   String   sql="select * from   tb_area where father="+strQuery;
ResultSet   rs=stmt.executeQuery(sql);

//下面使用定义的XML格式来输出XML文档
StringBuilder strXML =new StringBuilder("<?xml version='1.0' ?>");
      strXML.append("<selectChoice>");
       strXML.append("<selectElement>");
        strXML.append("<formName>"+strForm+"</formName>");
         strXML.append("<formElem>"+strElem+"</formElem>");
          strXML.append("</selectElement>");
           if(rs.next())
             {
               strXML.append("<entry>");
            strXML.append("<optionText>select A Territory</optionText>");
            strXML.append("<optionValue>-1</optionValue>");
            strXML.append("</entry>");
             rs.beforeFirst();
             while(rs.next())
             {
              strXML.append("<entry>");
            strXML.append("<optionText>"+rs.getString(2)+"</optionText>");
            strXML.append("<optionValue>"+rs.getString(1)+"</optionValue>");
            strXML.append("</entry>");
             }
             }
             strXML.append("</selectChoice>");
         response.setContentType("text/xml"); //注意这句话很重要,不能少
         PrintWriter out2= response.getWriter();//注意这句话很重要,不能少
         out2.write(strXML.toString());            //out.write();来返回XML文档
         out2.close();
    %>
</body>
</html>

net.js
/*
url-loading object and a request queue built on top of it
*/

/* namespacing object */
var net=new Object();

net.READY_STATE_UNINITIALIZED=0;
net.READY_STATE_LOADING=1;
net.READY_STATE_LOADED=2;
net.READY_STATE_INTERACTIVE=3;
net.READY_STATE_COMPLETE=4;

/*--- content loader object for cross-browser requests ---*/
net.ContentLoader=function(url,onload,onerror,method,params,contentType){
this.req=null;
this.οnlοad=onload;
this.οnerrοr=(onerror) ? onerror : this.defaultError;
this.loadXMLDoc(url,method,params,contentType);
}

net.ContentLoader.prototype.loadXMLDoc=function(url,method,params,contentType){
if (!method){
    method="GET";
}
if (!contentType && method=="POST"){
    contentType='application/x-www-form-urlencoded';
}
if (window.XMLHttpRequest){
    this.req=new XMLHttpRequest();
} else if (window.ActiveXObject){
    this.req=new ActiveXObject("Microsoft.XMLHTTP");
}
if (this.req){
    try{
      var loader=this;
      this.req.onreadystatechange=function(){
        net.ContentLoader.onReadyState.call(loader);
      }
      this.req.open(method,url,true);
      if (contentType){
        this.req.setRequestHeader('Content-Type', contentType);
      }
      this.req.send(params);
    }catch (err){
      this.onerror.call(this);
    }
}
}

net.ContentLoader.onReadyState=function(){
var req=this.req;
var ready=req.readyState;
if (ready==net.READY_STATE_COMPLETE){
    var httpStatus=req.status;
    if (httpStatus==200 || httpStatus==0){
      this.onload.call(this);
    }else{
      this.onerror.call(this);
    }
}
}

net.ContentLoader.prototype.defaultError=function(){
alert("error fetching data!"
    +"/n/nreadyState:"+this.req.readyState
    +"/nstatus: "+this.req.status
    +"/nheaders: "+this.req.getAllResponseHeaders());
}

附件:csdn空间/ ajax动态双组合.txt

facepp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax in action 第9章 jsp版动态双组合功能

资源: 使用ajax页面(发送和响应);一个处理服务器页面;还使用了一个可重用net.js.1.html 1.html function FillTerritory(oElem,oTarget){ //此函数启动了Ajax请求 var strValue = oElem.options[ oElem.sele
复制链接

扫一扫