AjaxAjax学习笔记

 

时间:2016-12-21 11:20

 

 

——Ajax概述

1、什么是Ajax

    Ajax(Asynchronous  JavaScript And
XML)翻译成中文正是“异步的JavaScript和XML”,即便用JavaScript语言和服务器进行异步交互,传输的数目为XML(当然,传输的数目不只是XML)。

    Ajax还有贰个最大的性状正是,当服务器响应时,不要求刷新整个浏览器界面,而是可以部分刷新,那一风味给用户的感觉到是在无形中中做到请求和响应进度。

    *   与服务器异步交互

    *   浏览器页面局地刷新

    *  
服务器响应给客户端的一般二个全部的HTML页面,但在Ajax中因为是有的刷新,那么服务器就不用再响应页面,而是响应数据。

        >   数据有如下三种:

            text:纯文本

            xml:大数据中选用

            json:它是JS提供的数据调换格式,它在Ajax中最受欢迎。

 

二、异步交互和同步交互

    同步:

        发送一个伸手,就要等待服务器的响应停止,然后才能爆发第1个请求。

        刷新的是全体页面。

 

    异步:

        发送二个请求后,无需等待服务器的响应,然后就足以发送第三个请求。

        可以利用JS接受服务器的响应,然后选拔JS实现都部队分刷新。

三、Ajax的得失:

优点:
    *   Ajax使用JavaScript技术向服务器发送异步请求。
    *   Ajax无需刷新整个页面
    *  
因为服务器相应内容不再是整套页面,而是刷新局地内容,所以Ajax质量高。

缺点:
    *   Ajax并不吻合全体场景,很多时候依然必要采取同步请求进行互动。
    *  
Ajax就算进步了用户体验,但无意向服务器发送请求的次数增多了,导致服务器压力增大。
    *  
因为Ajax是在浏览器中利用JavaScript完毕的,所以还索要处理浏览器包容性难点。

——Ajax第一例

1、准备干活
   
因为Ajax也亟需请求服务器,异步请求也是呼吁服务器,所以我们需求先写好服务器端代码,即编写3个Servlet:

    public class AServlet extends HttpServlet {

        public void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {

            System.out.println(“Hello Ajax”);

            response.getWriter().print(“Hello Ajax”);

        }

    }

2、Ajax核心(XMLHttpRequest)
   
其实Ajax正是在JavaScript中多添加了叁个目的:XMLHttpRequest对象,全部的异步交互都是行使XMLHttpRequest对象完毕的,也正是说,只供给学习一个JavaScript的新指标即可。

    注意:
        各类浏览器对XMLHttpRequest的支撑是例外的,大部分浏览器都帮助DOM二专业,都能够选拔:var
xmlHttp = new XMLHttpRequest()来创建对象。

        但IE有所不一样,IE5.五以及更早版本需求:var xmlHttp = new
ActiveXObject(“Microsoft.XMLHTTP”);来创造对象。

        IE6.0须要运用:var xmlHttp = new
ActiveXObect(“Msxml二.XMLHTTP”);来创设对象,而IE7以及上述版本也支撑DOM贰正经。

   
为了处理浏览器包容性难题,可以运用以下办法来创立XMLHttpRequest对象:
        function createXMLHttpRequest(){

            try {
                // 适用于多数浏览器,以及IE七及其更高版本 

                return new XMLHttpRequest();

            } catch(e) {

                try {
                    // 适用于IE6.0 

                    return new ActiveXObject(“Msxml2.XMLHTTP”);

                } catch(e) {

                    try {
                        // 适用于IE5.伍及其以下版本 

                        return new ActiveXObject(“Microsofr.XMLHTTP”);

                    } catch(e) {

                        alert(“您的浏览器不帮助Ajax”);

                        throw e;

                    }

                }

            }

        }

3、打开与服务器的连日
    能够运用xmlHttp的open()方法来开辟连接,open()方法的参数如下:
    open(method, url, async)
        *   method:请求情势,平常为GET或POST
        *
  url:请求的服务器财富地址,若为GET请求,还足以在U奥迪Q3L后扩大参数。
        *
  async:那几个参数是boolean类型,暗中同意为true,表示异步请求,该参数能够简单。

4、发送请求
   
当使用open()方法打开连接后,就能够调用XMLHttpRequest对象的send()方法发送请求了。
   
send方法的参数为POST请求参数,即对应HTTP协议的请求体内容,假如GET请求,要求在UEnclaveL后三番五次参数。

    注意:
       
若未有参数,须要给出null作为参数,若不给出null作为参数,恐怕会促成FIreFox浏览器不能健康发送请求。

5、接收服务器响应.

XMLHttpRequest对象有三个onreadystatechange事件,它会在XMLHttpRequest对象的事态发生变化时被调用:
    *  
0:初步化未形成境况,只是创造了XMLHttpRequest对象,还未调用open()方法。
    *   1:请求已初阶,open()方法已经调用,但还尚未调用send()方法。
    *   二:请求发送达成意况,send()方法已被调用。
    *   3:服务器已经初始响应,但不代表响应截至。
    *   4:读取服务器响应结束。

    onreadychange事件会在情况为一 二 三 肆时吸引,日常只关心状态四。

取得xmlHttp对象的图景:
    *   var state = xmlHttp.readyState
        >   state的值大概是0 一 二 三 四

取得服务器响应的状态码:
    *   var status = xmlHttp.status;
        >   status的值也许是200 40四 500

获取服务器响应的始末:
    *   var content = xmlHttp.responseText
        >   获得服务器响应的文本格式的情节
        >   尤其通用
    *   var content = xmlHttp.responseXML
        >   得到服务器响应的XML内容,即Document对象

演示代码:

ajax.jsp

<html>

<head>

<base href=”<%=basePath%>”>

 

<title>My JSP ‘ajax1.jsp’ starting page</title>

 

<script type=”text/javascript”>

    // 成立异步对象

    function createXMLHttpRequest() {

        try {

            return new XMLHttpRequest();

        } catch (e) {

            try {

                return new ActiveXObject(“Msxml2.XMLHTTP”);

            } catch (e) {

                try {

                    return new ActiveXObject(“Microsoft.XMLHTTP”);

                } catch (e) {

                    alert(“您的浏览器不补助Ajax”);

                    throw e;

                }

            }

        }

    }

 

    // 文书档案加载完成后进行

    window.onload = function() {

        // 获取按钮

        var btn = document.getElementById(“btn”);

        // 给按钮的点击事件注册监听

        btn.onclick = function() {

            /*

             * 4步操作:

             * 1、得到异步对象

             * 二、打开与服务器的总是

             * 叁、发送请求

             * 肆、给异步对象的onreadystatechange事件注册监听器

             */

 

            var xmlHttp = createXMLHttpRequest();

            xmlHttp.open(“GET”, “<c:url value=’/AServlet’ />”,
true);

 

            // GET请求未有请求体,但也要给出null,否则FireFox大概不一致盟

            xmlHttp.send(null);

 

            // 当xmlHttp的景况发生变化时实行

            xmlHttp.onreadystatechange = function() {

                // 双重判断,判断服务器响应甘休和响应成功

                if (xmlHttp.readyState == 四 && xmlHttp.status == 200) { 
  // readyState  一定要大写

                    var h1 = document.getElementById(“h1”);

                    h1.innerHTML = xmlHttp.responseText;

                }

            };

        };

    };

</script>

</head>

<body>

    <button id=”btn”>点击那里</button>

    <h1 id=”h1″></h1>

</body>

</html>

——Ajax第二例小结

1、创建XMLHttpRequest对象
2、调用open()方法打开与服务器的三番五次
③、调用send()方法发送请求
4、为XMLHttpRequest对象钦点onreadystatechange事件函数,那么些函数会在XMLHttpRequest的1
贰 三 四多种情景时被调用。
5、XMLHttpRequest对象的5种状态
    *  
0:初始化未成功意况,只是创造了XMLHttpRequest对象,还未调用open()方法
    *   一:请求已早先,open()方法已调用,不过还未调用send()方法
    *   二:请求发送完毕景况,send()方法已调用
    *   三:开首读取服务器响应
    *   4:读取服务器响应甘休。
普普通通只关心第伍种处境。

XMLHttpRequest对象的status属性表示服务器状态码,它只有在readyState为四时才能获得到。
XMLHttpRequest对象的responseText属性表示服务器响应内容,它唯有在readyState为四时能获取到。

——第二例:发送POST请求

    假若发送请求时要求带有参数,1般都用POST请求。

    POST请求必须设置请求头:Content-Type:
application/x-www-form-urlencoded。
   
表单的enctype默许值正是application/x-www-form-encoded,因为那是暗许值,所以简单忽略这一个值。
   
当设置了<form>的enctype=”application/x-www-form-encoded”时,等同于设置了Content-Type请求头。

    但在动用Ajax发送请求时,就未有暗许值了,所以须求手动设置请求头:
        xmlHttp.setRequestHeader(“Content-Type”,
“application/x-www-form-urlencoded”);

   
当未有设置Content-Type请求头为application/x-www-form-urlencoded时,Web容器会忽视请求体的内容,简单造成空指针极度,所以在行使Ajax发送POST请求时,须要安装这1请求头,然后选用send()方法来设置请求体内容。

    POST请求的多个步骤:
        *   open方法
            >   xmlHttp.open(“POST”, URL, async);
        *   添加Content-Type请求头
            >   xmlHttp.setRequestHeader(“Content-Type”,
“application/x-www-form-urlencoded”);
        *   send方法
            >   xmlHttp.send(“username=zhangSan&password=12345陆”); 
  //发送请求时钦命请求体

代码:

<html>
<head>

<script type=”text/javascript”>

    function createXMLHttpRequest() {

        return new XMLHttpRequest();

    }

 

    window.onload = function() {

        var btn = document.getElementById(“btn”);

        btn.onclick = function() {

            var xmlHttp = createXMLHttpRequest();

            /**********************使用POST请求****************************/

            xmlHttp.open(“POST”, “<c:url value=’/AServlet’/>”,
true);

 

            /**********************安装请求头******************************/

            xmlHttp.setRequestHeader(“Content-Type”,
“application/x-www-form-urlencoded”);

 

            /**********************出殡请求时钦命请求体,能够在后台用getParameter()获得参数*********************/

            xmlHttp.send(“username=zhangSan&password=123456”);
 

            xmlHttp.onreadystatechange = function() {

                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

                    var h1 = document.getElementById(“h1”);

                    h1.innerHTML = xmlHttp.responseText;

                }

            }

        }

    }

</script>

</head>

<body>

    <button id=”btn”>点击那里,POST</button>

    <h1 id=”h1″></h1>

</body>

</html>

——第一例:注册表单之校验用户名是还是不是注册

一、编写页面:
    *   regist.jsp
        >   给出注册表单页面
        >   给用户名文本框添加onblur事件的监听
        >   获取文本框的剧情,
通过Ajax四步发送给服务器,获得响应结果
            –   假设为一:在文本框后出示“用户名已被注册”
            –   假设为0:什么都不做

2、编写Servlet
    *   ValidateUsernameServlet
        >   获取客户端传递的用户名参数
        >   判断是或不是为wyc
            –   存在:返回1
            –   不存在:返回0

代码:

<html>
<head>

<script type=”text/javascript”>

    window.onload = function(){

        // 获取文本框,给它的失去焦点事件注册监听

        var userEle = document.getElementById(“usernameID”);

        userEle.onblur = function(){

            // 一、获得异步对象

            var xmlHttp = createXMLHttpRequest();

 

            // 贰、打开链接

            xmlHttp.open(“POST”, “<c:url
value=’/ValidateUsernameServlet’ />”, true);

 

            // 三、设置请求头

            xmlHttp.setRequestHeader(“Content-Type”, “applicatio
n/x-www-form-urlencoded”);

 

            // 4、发送请求,给出请求体

            xmlHttp.send(“username=” + userEle.value);

 

            // 5、给xmlHttp的onreadystatechange事件注册监听

            xmlHttp.onreadystatechange = function(){

                if(xmlHttp.readyState == 4 && xmlHttp.status == 200){

                    // 获取服务器的响应,判断是还是不是为一

                    //    >  1:获取span,添加内容“用户名已被登记”

                    var text = xmlHttp.responseText;

 

                    // 得到span元素

                    var span = document.getElementById(“errorSpan”);

                    if(text == “1”){

                        span.innerHTML = “<font
color=’red’>用户名已被登记</font>”;

                    } else {

                        span.innerHTML = “”;

                    }

                }

            };

        };

        function createXMLHttpRequest(){

            return new XMLHttpRequest();

        };

    };

</script>

</head>

<body>

    <h壹>用户名是还是不是被登记</h一>

    <form action=”” method=”post”>

        用户名:<input type=”text” name=”username”
id=”usernameID”/><span id=”errorSpan”></span><br/>

        <input type=”button” id=”sub” value=”注册”/>

    </form>

</body>

</html>

——第6例:响应内容为XML

当服务器向客户端响应XML时,要将文件转换到XML的Document对象,然后通过分析DOM来操作。

服务端设置:
    >   设置响应头:Content-Type,其值为:text/xml;charset=utf-八
客户端:
    >   var doc = xmlHttp.responseXML;    // 获得的是Document对象

代码:

<html>
<head>

<script type=”text/javascript”>

    // 创制异步对象

    function createXMLHttpRequest() {

        try {

            return new XMLHttpRequest();

        } catch (e) {

            try {

                return new ActiveXObject(“Msxml2.XMLHTTP”);

            } catch (e) {

                try {

                    return new ActiveXObject(“Microsoft.XMLHTTP”);

                } catch (e) {

                    alert(“您的浏览器不援助Ajax”);

                    throw e;

                }

            }

        }

    }

 

    // 文档加载实现后举办

    window.onload = function() {

        // 获取按钮

        var btn = document.getElementById(“btn”);

        // 给按钮的点击事件注册监听

        btn.onclick = function() {

            /*

             * 四步操作:

             * 1、获得异步对象

             * 2、打开与服务器的连日

             * 叁、发送请求

             * 四、给异步对象的onreadychangestatechange事件注册监听器

             */

 

            var xmlHttp = createXMLHttpRequest();

 

            xmlHttp.open(“GET”, “<c:url value=’/Bservlet’ />”,
true);

 

            // GET请求未有请求体,但也要给出null,不然FireFox可能不匹配

            xmlHttp.send(null);

 

            // 当xmlHttp的情形产生变化时实行

            xmlHttp.onreadystatechange = function() {

                // 双重判断,判断服务器响应甘休和响应成功

                if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
 

               
/*************************************************************************************************/

                    // 获取服务器的响应结果(XML)

                    var doc = xmlHttp.responseXML;

 

                    //
获取文书档案下名字为student的全体因素,获得数组,再拿走第壹个因素

                    var ele = doc.getElementsByTagName(“student”)[0];

 

                    // 获取number属性值

                    var number = ele.getAttribute(“number”);

 

                    // 获取student下的子成分

                    // 处理浏览器差距难点

                    var name;

                    var age;

                    var gender

                    if(window.addEventListener){

                        name =
ele.getElementsByTagName(“name”)[0].textContent;    //
textContent,超越五成浏览器帮助

                        age =
ele.getElementsByTagName(“age”)[0].textContent;    //
textContent,抢先陆一%浏览器补助

                        gender =
ele.getElementsByTagName(“gender”)[0].textContent;    //
textContent,超越百分之五十浏览器协助

                    } else {

                        name =
ele.getElementsByTagName(“name”)[0].text;    // text,IE支持

                        age = ele.getElementsByTagName(“age”)[0].text;
   // text,IE支持

                        gender =
ele.getElementsByTagName(“gender”)[0].text;    // text,IE支持

                    }

 

                    var text = number + “, ” + name + “, ” + age + “, “

  • gender;

                    document.getElementById(“h1”).innerHTML = text;

               
/*************************************************************************************************/
 

                };

            };

        };

    };

</script>

</head>

<body>

    <button id=”btn”>点击那里</button>

    <h1 id=”h1″></h1>

</body>

</html>

——第4例:省市联合浮动

1、页面
    <select name=”province”>
        <option>==请选用省份===</option>
    </select>

    <select name=”province”>
        <option>==请选拔城市===</option>
    </select>

2、ProvinceServlet
    *   当页面加载完成后立刻伸手那几个Servlet
    *  
它供给加载china.xml文件,把具备的省的名目使用字符串发送给客户端。

3、页面
    *   获取那个字符串,使用逗号分隔,得到数组。
    *  
循环便利各样字符串(省份的名目),使用各类字符串创造贰个<option>成分,将元素添加到<select
name=”province”>中。

4、CityServlet
    *   当页面选取某些省时,发送请求。
    *  
获得省份的称号,加载china.xml文件,查询出该省份对应的要素对象,然后把那么些成分转换成XML字符串,然后发送给客户端。

5、页面
    *   把<select
name=”city”>中的全体子成分删除,但决不删除<option>===
请采取城市 ===</option>
    *   获得服务器的响应结果:Document对象。
    *  
获取具有的<city>子元素,循环遍历,获得<city>的始末。
    *  
使用各样<city>的始末创制1个<option>元素,添加到<select
name=”city”>中。

Ajax 1

china.xml

<?xml version=”1.0″ encoding=”UTF-8″?>

<china>

    <province name=”北京”>

        <city>东城区</city>

        <city>西城区</city>

    </province>

    <province name=”天津”>

        <city>和平区</city>

        <city>河东区</city>

    </province>

</china>

 


index.jsp

<%@ page language=”java” import=”java.util.*”
pageEncoding=”UTF-8″%>

<%@ taglib prefix=”c” uri=”http://java.sun.com/jsp/jstl/core“%>

<%

    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 ‘ajax7.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”>

 

<script type=”text/javascript”>

    /*

     * 一、在文书档案加载实现时发送请求,获得全体省区称号,显示在<select
name=”province”>中

     *
二、在选拔了新的省区时,发送请求(参数为省份名),获得XML文书档案,即<province>成分

     *
③、解析XML文书档案,获得7中的全部<city>,再拿走每一种<city>成分的内容,即市名,使用市名生成<option>成分,并插入到<select>成分中。

     */

 

    window.onload = function() {

 

        function createXMLHttpRequest() {

            return new XMLHttpRequest();

        }

 

        /*

         * 1、Ajax四步

         *  * 请求ProvinceServlet,得到全部省份称号

         *  *
使用种种省份称号制造三个<option>成分,添加到<select
name=”province”>成分中

         */

        var xmlHttp = createXMLHttpRequest();

        xmlHttp.open(“GET”, “<c:url value=’/ProvinceServlet’ />”,
true);

        xmlHttp.send(null);
 

        xmlHttp.onreadystatechange = function() {

            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

                // 获取服务器响应

                var text = xmlHttp.responseText;

                // 使用逗号分隔,获得省份数组

                var arr = text.split(“,”);

 

                //
循环遍历每一个省份称号,生成2个option对象,然后添加到<select>成分中

                for (var i = 0; i < arr.length; i++) {

 

                    // 成立2个钦定名称的因素

                    var op = document.createElement(“option”);
 

                    // 为成分设置实际值

                    op.value = arr[i]; // 设置op的实际值为近年来省区称号

 

                    // 设置显示值

                    var textNode = document.createTextNode(arr[i]); //
创设文本节点

 

                    op.appendChild(textNode); //
把公文节点添加到op成分中,钦定其显示值

 

                    document.getElementById(“p”).appendChild(op);

                }

            }

        };

 

        /*

         * 一、给<select name=”province”>添加改变事件监听器

         *
二、使用选取的省区称号请求CityServlet,得到<Province>成分(XML)成分

         *
叁、获取<province>成分中具有的<city>成分,然后遍历获取每一种<city>中的文本内容,即市名称

         *
四、使用各种城市名称创立<option>元素,并添加到<select
name=”city”>成分中

         */

        var proSelect = document.getElementById(“p”);

        proSelect.onchange = function() {

 

            var xmlHttp = createXMLHttpRequest();

            xmlHttp.open(“POST”, “<c:url value=’/CityServlet’/>”,
true);

 

            xmlHttp.setRequestHeader(“Content-Type”,
“application/x-www-form-urlencoded”);

            xmlHttp.send(“province=” + this.value);

 

            xmlHttp.onreadystatechange = function() {

                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

 

                    /*

                     * 1、把select中的全体option移除,除了“请选择”

                     */

                    var citySelect = document.getElementById(“c”);

 

                    // 获取具有子成分

                    var optionList =
citySelect.getElementsByTagName(“option”);

 

                    // 循环遍历各种option成分,然后在citySelect中移除

                    while (optionList.length > 1) {

                        //
要是子成分的个数大于壹就循环,等于壹就不循环了,最后会留下“请选取”

                        citySelect.removeChild(optionList[1]); //
每一趟都移除第3个

                    }

                    // 获得响应的XML成分

                    var doc = xmlHttp.responseXML;
 

                    // 获得所知名为city的成分

                    var cityList = doc.getElementsByTagName(“city”);

 

                    for (var i = 0; i < cityList.length; i++) {

                    // 得到city元素

                        var city = cityList[i];

                        var cityName;

 

                        // 处理浏览器的异样

                        if (window.addEventListener) {

                            // 火狐等浏览器包容

                            cityName = city.textContent;

                        } else {

                            // 支持IE

                            cityName = city.text;

                        }

 

                        // 使用城市称号创设option元素,添加到<select
name=”city”>成分中

                        var op = document.createElement(“option”);

 

                        // 设置实际值

                        op.value = cityName;

 

                        // 设置显示值

                        var textNode =
document.createTextNode(cityName);

                        op.appendChild(textNode);

 

                        citySelect.appendChild(op);

                    }

                }

            };

        };

    };

</script>

 

</head>

 

<body>

    <h壹>省市联合浮动</h一>

    <select name=”province” id=”p”>

        <option>=== 请采纳省 ===</option>

    </select>  

    <select name=”city” id=”c”>

        <option>=== 请选拔市 ===</option>

    </select>

</body>

</html>

 


ProvinceServlet

package com.wyc.web.servlet;

 

import java.io.IOException;

import java.io.InputStream;

import java.io.PrintWriter;

import java.util.List;

 

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

 

import org.apache.commons.io.IOUtils;

import org.dom4j.Attribute;

import org.dom4j.Document;

import org.dom4j.io.SAXReader;

 

public class ProvinceServlet extends HttpServlet {

 

    public void doGet(HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException {

        response.setCharacterEncoding(“utf-8”);

 

        /*

         * 响应全数省份称号,使用逗号分隔

         */

 

        /*

         * 1、Document对象

         *   *  创制解析器对象

         *   *  调用解析器的read()方法,传递一个流对象,获得Document

         */

        try {

            SAXReader reader = new SAXReader();

            InputStream input =
this.getClass().getResourceAsStream(“/china.xml”);

            Document doc = reader.read(input);

 

            /*

             * 查询全部province的name属性,获得任何省份名

             * 循环便利,把富有的属性值连接成1个字符串,发送给客户端

             */

            List<Attribute> list =
doc.selectNodes(“//province/@name”);

            StringBuilder sb = new StringBuilder();

            for(Attribute attr : list){

                sb.append(attr.getValue() + “,”);

            }

 

            System.out.println(sb.toString());

 

            response.getWriter().print(sb.substring(0,
sb.length()-1));
 

        } catch(Exception e) {

            throw new RuntimeException(e);

        }

    }

}

 


CityServlet

package com.wyc.web.servlet;

 

import java.io.IOException;

import java.io.InputStream;

import java.io.PrintWriter;

import java.util.List;

 

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

 

import org.apache.commons.io.IOUtils;

import org.dom4j.Attribute;

import org.dom4j.Document;

import org.dom4j.DocumentException;

import org.dom4j.Element;

import org.dom4j.Node;

import org.dom4j.io.SAXReader;

import org.xml.sax.XMLReader;

 

public class CityServlet extends HttpServlet {

 

    public void doPost(HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException {

        request.setCharacterEncoding(“utf-8”);

 

        /*

         * 获取省份称号,加载该省份对应的<province>成分

         * 把成分转换来字符串发送给客户端

         */
 

        /*

         * 一、获取省份称号

         * 二、使用省份称号查找到相应的<province>成分

         * 三、把<province>成分转换来字符串

         * 4、发送给客户端

         */

 

        try {

            /*

             * 得到Document

             */

            SAXReader reader = new SAXReader();

            InputStream input =
this.getClass().getResourceAsStream(“/china.xml”);

            Document doc = reader.read(input);

 

            /*

             * 获取参数

             */

            String pname = request.getParameter(“province”);  //
获取省份称号

            Element ele = (Element)
doc.selectSingleNode(“//province[@name='” + pname + “‘]”);

 

            /*

             * 把成分转换到字符串

             */

            String xml = ele.asXML();

 

 

            /*

             * 向客户端响应XML

             * 需要将Content-Type改为:text/xml;charset=utf-8

             */

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

            response.getWriter().print(xml);

 

        } catch(Exception e) {

            throw new RuntimeException(e);

        }

    }

}

——Ajax小工具

编排多少个js文件。

// 创建request对象

function createXMLHttpRequest(){

    return new XMLHttpRequest();

}

 

 

/*option对象属性

伸手格局method, 请求U中华VLurl, 是或不是异步asyn, 请求体内容params,
回调方法callback, 服务器相应数据转换类型type

*/

 

function ajax(option){

 

    /*

     * 1、得到xmlHttp

     */

    var xmlHttp = createXMLHttpRequest();

 

    /*

     * 2、打开连接

     */

    if(!option.method){

        // 默认为GET请求

        option.method = “GET”;

    }

    if(option.asyn == undefined){

        // 默许为异步处理

        option.asyn = true;

    }

    xmlHttp.open(option.method,option.url,option.asyn);

 

    /*

     * 3、判断是不是为POST请求

     */

    if(option.method == “POST”){

        xmlHttp.setRequestHeader(“Content-Type”,
“application/x-www-form-urlencoded”);

    }

    /*

     * 四、发送请求

     */

    xmlHttp.send(option.params);

 

    /*

     * 5、注册监听

     */

    xmlHttp.onreadystatechange = function(){

        if(xmlHttp.readyState == 4 && xmlHttp.status == 200){

            var data;

            // 获取服务器的响应数据开始展览更换

            if(!option.type){

                // 暗中同意为纯文本

                data = xmlHttp.responseText;

            } else if(option.type == “xml”){

                data = xmlHttp.responseXML;

            } else if(option.type == “text”){

                data = xmlHttp.responseText;

            } else if(option.type == “json”){

                var text = xmlHttp.responseText;

                data = eval(“(” + text + “)”);

            }

 

            // 调用回调方法

            option.callback(data);

        }

    }

}


在JSP页面中实行调用

<script type=”text/javascript” src=”<c:url
value=’/ajax-lib/ajaxutils.js’/>”></script>

<script type=”text/javascript”>

window.onload = function(){

    var btn = document.getElementById(“btn”);

    btn.onclick = function(){

        /*

         * 壹、发送请求

         */

        ajax(

            {

                url:”<c:url value=’/AServlet’ />”,

                type:”json”,

                callback:function(data){

                    document.getElementById(“h2”).innerHTML = data.name

  • “, ” + data.age;

                }

            }

        );

    };

};

</script>

 

</head>

 

<body>

    <h一>演示自个儿包裹的小工具</h一>

    <%– 点击按钮后把服务器响应的数码突显到h二成分中 –%>

    <h1>Hello World</h1>

    <button id=”btn”>点击那里</button>

    <h2 id=”h2″></h2>

</body> 

 

相关文章