首页 > 代码库 > Ajax学习笔记

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="http://www.mamicode.com/">
 
<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=http://www.mamicode.com/‘/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=http://www.mamicode.com/‘/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=http://www.mamicode.com/‘/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="http://www.mamicode.com/注册"/>
    </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=http://www.mamicode.com/‘/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">中。

技术分享


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="http://www.mamicode.com/">
 
<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=http://www.mamicode.com/‘/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 = http://www.mamicode.com/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=http://www.mamicode.com/‘/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 = http://www.mamicode.com/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> &nbsp;
    <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 = http://www.mamicode.com/xmlHttp.responseText;
            } else if(option.type == "xml"){
                data = http://www.mamicode.com/xmlHttp.responseXML;
            } else if(option.type == "text"){
                data = http://www.mamicode.com/xmlHttp.responseText;
            } else if(option.type == "json"){
                var text = xmlHttp.responseText;
                data = http://www.mamicode.com/eval("(" + text + ")");
            }
 
            // 调用回调方法
            option.callback(data);
        }
    }
}

----------------------------------------------------------------------------------------------------------------------------

在JSP页面中进行调用

<script type="text/javascript" src="http://www.mamicode.com/"></script>
<script type="text/javascript">
window.onload = function(){
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        /*
         * 1、发送请求
         */
        ajax(
            {
                url:"<c:url value=http://www.mamicode.com/‘/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> 

 

Ajax学习笔记