Ajax学习笔记

 

时间: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中极度被欢迎。

 

2、异步交互和一块交互

    同步:

        发送一个请求,就要等服务器的应了,然后才能够产生第二独请求。

        刷新的凡总体页面。

 

    异步:

        发送一个告后,无需等待服务器的应,然后便足以发送第二单请求。

        可以利用JS接受服务器的应,然后运JS完成有刷新。

3、Ajax的利害:

优点:
    *   Ajax用JavaScript技术向服务器发送异步请求。
    *   Ajax无需刷新整个页面
    *  
因为服务器相应内容不再是整页面,而是刷新有内容,所以Ajax性能大。

缺点:
    *   Ajax并无合乎所有场景,很多时段要需要以并请求进行互动。
    *  
Ajax虽然提高了用户体验,但无意为服务器发送请求的次数增加了,导致服务器压力增大。
    *  
因为Ajax是于浏览器被使JavaScript完成的,所以还亟需处理浏览器兼容性问题。

——Ajax第一例

1、准备工作
   
因为Ajax也急需请服务器,异步请求也是求服务器,所以我们需要先勾勒好服务器端代码,即编写一个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的支持是殊之,大多数浏览器都支持DOM2专业,都可以动用:var
xmlHttp = new XMLHttpRequest()来创建对象。

        但IE有所不同,IE5.5以及重新早版本用:var xmlHttp = new
ActiveXObject(“Microsoft.XMLHTTP”);来创建对象。

        IE6.0需要采用:var xmlHttp = new
ActiveXObect(“Msxml2.XMLHTTP”);来创建对象,而IE7以及上述版本为支持DOM2正式。

   
为了处理浏览器兼容性问题,可以动用以下措施来创造XMLHttpRequest对象:
        function createXMLHttpRequest(){

            try {
                // 适用于大部分浏览器,以及IE7及该再高版本 

                return new XMLHttpRequest();

            } catch(e) {

                try {
                    // 适用于IE6.0 

                    return new ActiveXObject(“Msxml2.XMLHTTP”);

                } catch(e) {

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

                        return new ActiveXObject(“Microsofr.XMLHTTP”);

                    } catch(e) {

                        alert(“您的浏览器不支持Ajax”);

                        throw e;

                    }

                }

            }

        }

3、打开和服务器的接连
    可以动用xmlHttp的open()方法来打开连接,open()方法的参数如下:
    open(method, url, async)
        *   method:请求方式,通常也GET或POST
        *
  url:请求的服务器资源地址,若否GET请求,还好在URL后搭参数。
        *
  async:这个参数是boolean类型,默认为true,表示异步请求,该参数可以略。

4、发送请求
   
当用open()方法打开连接后,就足以调用XMLHttpRequest对象的send()方法发送请求了。
   
send方法的参数为POST请求参数,即针对许HTTP协议的请求体内容,若是GET请求,需要在URL后连参数。

    注意:
       
若没有参数,需要被出null作为参数,若未叫出null作为参数,可能会见招致FIreFox浏览器不克健康发送请求。

5、接收服务器响应.

XMLHttpRequest对象来一个onreadystatechange事件,它见面当XMLHttpRequest对象的状态发生变化时受调用:
    *  
0:初始化未到位状态,只是创建了XMLHttpRequest对象,还免调用open()方法。
    *   1:请求都开始,open()方法都调用,但尚并未调用send()方法。
    *   2:请求发送完状态,send()方法都为调用。
    *   3:服务器就初步响应,但无代表应了。
    *   4:读取服务器响应了。

    onreadychange事件会于状态为1 2 3 4时掀起,通常仅关注状态4。

获取xmlHttp对象的状态:
    *   var state = xmlHttp.readyState
        >   state的价值可能是0 1 2 3 4

取服务器响应的状态码:
    *   var status = xmlHttp.status;
        >   status的价值可能是200 404 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() {

            /*

             * 四步操作:

             * 1、得到异步对象

             * 2、打开和服务器的总是

             * 3、发送请求

             * 4、给异步对象的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 == 4 && 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()方法打开和服务器的接连
3、调用send()方法发送请求
4、为XMLHttpRequest对象指定onreadystatechange事件函数,这个函数会在XMLHttpRequest的1
2 3 4季种状态时给调用。
5、XMLHttpRequest对象的5种状态
    *  
0:初始化未成功状态,只是创建了XMLHttpRequest对象,还无调用open()方法
    *   1:请求都初步,open()方法就调用,但是还不调用send()方法
    *   2:请求发送完状态,send()方法就调用
    *   3:开始读取服务器响应
    *   4:读取服务器响应了。
一般只关心第4栽状态。

XMLHttpRequest对象的status属性表示服务器状态码,它只有以readyState为4时才会赢得到。
XMLHttpRequest对象的responseText属性表示服务器响应内容,它只有以readyState为4时能够得到。

——第二例:发送POST请求

    如果发送请求时要带有参数,一般都为此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请求时,需要装这同一请求求头,然后利用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=123456”); 
  //发送请求时指定要求体

代码:

<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>

——第三条例:注册表单之校验用户称是否注册

1、编写页面:
    *   regist.jsp
        >   给有挂号表单页面
        >   给用户名文本框添加onblur事件的监听
        >   获取文本框的内容,
通过Ajax四步发送给服务器,得到响应结果
            –   如果也1:在文本框后显得“用户名已被登记”
            –   如果为0:什么还无开

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

代码:

<html>
<head>

<script type=”text/javascript”>

    window.onload = function(){

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

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

        userEle.onblur = function(){

            // 1、得到异步对象

            var xmlHttp = createXMLHttpRequest();

 

            // 2、打开链接

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

 

            // 3、设置请求头

            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

                    //    >  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>

    <h1>用户称是否为登记</h1>

    <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>

——第四条例:响应内容也XML

当服务器向客户端响应XML时,要以文件转换成为XML的Document对象,然后经分析DOM来操作。

服务端设置:
    >   设置响应头:Content-Type,其值为:text/xml;charset=utf-8
客户端:
    >   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、打开和服务器的总是

             * 3、发送请求

             * 4、给异步对象的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>

——第五规章:省市联动

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>的内容创建一个<option>元素,添加到<select
name=”city”>中。

图片 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”>

    /*

     * 1、在文档加载了时发送请求,得到所有省区称,显示在<select
name=”province”>中

     *
2、在选择了新的省区时,发送请求(参数为省称),得到XML文档,即<province>元素

     *
3、解析XML文档,得到七蒙受的备<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(“,”);

 

                //
循环遍历每个省称,生成一个option对象,然后上加到<select>元素中

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

 

                    // 创建一个指定名称的素

                    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);

                }

            }

        };

 

        /*

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

         *
2、使用选择的省份称号请求CityServlet,得到<Province>元素(XML)元素

         *
3、获取<province>元素中有着的<city>元素,然后遍历获取每个<city>中之文书内容,即市名

         *
4、使用每个城市名称创建<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) {

                        //
如果子元素的个数大于1虽循环,等于1即使不循环了,最终见面养“请捎”

                        citySelect.removeChild(optionList[1]); //
每次都移除第二独

                    }

                    // 得到响应的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>

    <h1>省市联动</h1>

    <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属性,得到所有探访份名

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

             */

            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>元素

         * 把元素转换成为字符串发送给客户端

         */
 

        /*

         * 1、获取省份称号

         * 2、使用省份称查找到相应的<province>元素

         * 3、把<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, 请求URLurl, 是否异步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”);

    }

    /*

     * 4、发送请求

     */

    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(){

        /*

         * 1、发送请求

         */

        ajax(

            {

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

                type:”json”,

                callback:function(data){

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

  • “, ” + data.age;

                }

            }

        );

    };

};

</script>

 

</head>

 

<body>

    <h1>演示自己包裹的有些器</h1>

    <%– 点击按钮后将服务器响应的数量显示到h2元素中 –%>

    <h1>Hello World</h1>

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

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

</body> 

 

相关文章