XMLHttpRequest对象实例

最新推荐文章于 2016-09-19 23:44:02 发布

penyan_good

最新推荐文章于 2016-09-19 23:44:02 发布

阅读量280

点赞数

分类专栏：学习笔记

学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

XMLHttpRequest对象是实现前后台异步交互的重要对象。

JSP文件：

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>城市距离信息列表</title>
<script type="text/javascript">
   var xmlhttp;
   function loadXMLDoc(url) {
       xmlhttp = null;
       if (window.XMLHttpRequest) {// code for IE7, Firefox, Opera, etc.
           xmlhttp = new XMLHttpRequest();
       } else if (window.ActiveXObject) {// code for IE6, IE5
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
       }
       if (xmlhttp != null) {
           xmlhttp.onreadystatechange = state_Change;
           var f=document.getElementsByName("fromCity")[0].value;
           var t=document.getElementsByName("toCity")[0].value;
           url+="?fromCity="+f+"&toCity="+t;
           xmlhttp.open("GET", url, true);
           /* xml.setRequestHeader("Content-type","application/x-www-form-urlencoded"); */
           xmlhttp.send();
       } else {
           alert("Your browser does not support XMLHTTP.");
       }
   }

   function state_Change() {
       if (xmlhttp.readyState == 4) {// 4 = "loaded"
           if (xmlhttp.status == 200) {// 200 = "OK"
               document.getElementById('data').innerHTML = xmlhttp.responseText;
           } else {
               alert("Problem retrieving XML data:" + xmlhttp.statusText);
           }
       }
   }
</script>
</head>
<body>
   <div style="float: left; margin-right: 50px;">
       <h2>城市距离信息列表</h2>
       <table border="1" width="400">
           <thead>
               <tr>
                   <th>出发城市</th>
                   <th>到达城市</th>
                   <th>距离</th>
               </tr>
           </thead>
           <tbody>
               <c:forEach var="dislist" items="${distancelists}" varStatus="s">
                   <tr>
                       <td>${dislist[0]}</td>
                       <td>${dislist[1]}</td>
                       <td>${dislist[2]}</td>
                   </tr>
               </c:forEach>
           </tbody>
       </table>
       <h3>
       <a οnclick="location.href='javascript:history.go(-1);'"
           style="cursor: pointer;">返回</a>
   </h3>
   </div>
   <div style="float: left;" align="center">
       <form>
           出发城市：<input type="text" name="fromCity" id="fromCity"/> 到达城市：<input type="text"
               name="toCity" id="toCity"/> <input type="button" οnclick="loadXMLDoc('query.do')" value="搜索" />
       </form>
       <br/>
       <div id="data"></div>

       <a href="toBetween.do?charSet=UTF-8">查询最短路径</a>
   </div>
</body>
</html>