AJAX

最新推荐文章于 2024-08-21 17:47:38 发布

kerer-sk

最新推荐文章于 2024-08-21 17:47:38 发布

阅读量239

点赞数

分类专栏： JavaScript 文章标签： jsp 联动窗 ajax 异步提交

本文链接：https://blog.csdn.net/u010512964/article/details/72630734

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

AJAX 简介

AJAX是一个浏览器与服务器之间异步的通信机制，可以在不刷新整个页面的情况下，与服务器进行通信。AJAX不是一个全新的语言，而是一种异步的编程模式。

不用刷新整个页面便可与服务器通讯的办法有

Flash/ActionScript
框架Frameset
iFrame（内嵌入框架)
XMLHttpRequest(非IE浏览器)和ActiveXObject(IE浏览器)

所有浏览器中都内置了异步对象，在默认情况下，该异步对象并没有创建出来。

function createAJAX(){
    var ajax = null;
    try{
        // ie浏览器
        ajax = new ActiveXObject("microsoft.xmlhttp");
    }catch(e1){
        // 非IE
        ajax = new XMLHttpRequest();
    }
    return ajax;
}

AJAX工作原理

AJAX使用Http协议与服务器进行通信，首先将需要请求的数据传送给AJAX对象，AJAX对象封装成HTTP请求发送给服务器，服务器接收到Http请求后，将数据写入到输出流中。
例如：
jsp代码

    <title>My JSP 'showTime.jsp' starting page</title>

    <script type="text/javascript">
        function creatAJAX(){
            var ajax = null;
            try{
                // 创建异步对象
                ajax = new XMLHttpRequest();
            }catch(e1){
                alert("浏览器中不支持异步对象，请换浏览器");
            }
            return ajax;
        }   
    </script>
  </head>

  <body>
        当前时间：<span id="time"></span><br/>
        <input id="buttonID" type="button" value="获取当前时间"/><p/>

     <script type="text/javascript">
            document.getElementById("buttonID").onclick = function(){
                // 1.创建异步对象
                var ajax = creatAJAX();
                // 2.准备发送请求
                var method = "GET";
                var url="${pageContext.request.contextPath}/CurrentTimeServlet";
                ajax.open(method,url);
                // 发送请求体中数据，如果请求体中无数据的话，就用null表示
                ajax.send(null);
                //NO4)AJAX异步对象不断监听服务器响应的状态0-1-2-3-【4】
                //一定要状态变化后，才可触发function(){}函数
                ajax.onreadystatechange = function(){
                    //如果状态码为4的话
                    if(ajax.readyState==4){
                        // 如果响应码为200
                        if(ajax.status==200){
                            // 从AJAX异步对象中获取服务器响应的HTML数据
                            var nowStr = ajax.responseText;

                            var spanNode = document.getElementById("time");
                            spanNode.innerHTML=nowStr;
                        }
                    }
                };
            };
    </script>
  </body>

Servlet代码

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
        throws ServletException, IOException {
    System.out.println("GET");

    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    String str = sdf.format(new Date());

    resp.setContentType("text/html;charset=UTF-8");
    PrintWriter writer = resp.getWriter();
    writer.write(str);
    writer.flush();
    writer.close();
}

AJAX开发步骤

创建AJAX对象
准备发送异步请求，例如：ajax.open(method,url)
如果是POST请求的话，一定要设置AJAX请求头，例如：ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');如果是GET请求的话，无需设置设置AJAX请求头。
真正发送请求体中的数据到服务器，例如：ajax.send()
AJAX不断的监听服务端响应的状态变化，例如：ajax.onreadystatechange，后面写一个无名处理函数
在无名处理函数中，获取AJAX的数据后进行相应处理操作。
注意：AJAX不适合用来传输大量数据，适合传递小数据。服务器只能以流的方式相应AJAX的请求，相应流数据可以是HTML或XML或JSON载体响应。

示例：post提交省市二级联动Demo
JSP文件

    <title>省市联动框</title>

    <script type="text/javascript">
        function creatAJAX(){
            var ajax = null;
            try{
                ajax = new XMLHttpRequest();
            }catch(e){
                alert("浏览器不支持ajax");
            }
            return ajax;
        }
    </script>

  </head>

  <body>
  XML方式，以POST方式，完成省市二级联动框<br/>

    <select id='provinceID' style="width:111px">
        <option>选择省份</option>
        <option>陕西</option>
        <option>广州</option>
    </select>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <select id="cityID">
        <option>选择城市</option>
    </select>

    <script type="text/javascript">
        // 定位省份选择框
        document.getElementById("provinceID").onchange=function (){

            //清空城市下拉框中的内容，除第一项外
            var cityElement = document.getElementById("cityID");
            cityElement.options.length=1;

            // 定位当前选取省份的索引，从0开始
            var index = this.selectedIndex;
            if(index==0){
                return;
            }
            // 定位选中的option标签
            var optionEle = this[index];
            // 获取选中的option中内容
            var province = optionEle.innerHTML;

            // NO1：创建ajax
            var ajax = creatAJAX();
            // NO2:
            var method = "POST";
            var url = "${pageContext.request.contextPath}/ProvinceServlet";
            ajax.open(method,url);
            //NO3:设置请求头
            ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            // NO4：设置发送数据
            var content = "province="+province;
            ajax.send(content);

            //--------------------处理相应数据-----------------
            ajax.onreadystatechange = function(){
                if(ajax.readyState==4){
                    if(ajax.status==200){
                        var xmlDocument=ajax.responseXML;
                        // 解析XML文档
                        var cityList = xmlDocument.getElementsByTagName("city");
                        var size = cityList.length;

                        for(var i=0;i<size;i++){
                            // innerHTML只能用在html/jsp中，不能用在xml中
                            var city = cityList[i].firstChild.nodeValue;
                            var optionElement = document.createElement("option");
                            optionElement.innerHTML = city;
                            cityElement.appendChild(optionElement);
                        }
                    }
                }
            }
        }
    </script>
  </body>

servlet 代码

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        String province = request.getParameter("province");

        // 通知AJAX服务器相应数据为XML格式
        response.setContentType("text/xml;charset=utf-8");
        // 获取字符输出流
        PrintWriter writer = response.getWriter();
        writer.write("<?xml version='1.0' encoding='UTF-8'?>");
        writer.write("<root>");
        if("陕西".equals(province)){
            writer.write("<city>西安</city>");
            writer.write("<city>渭南</city>");
            writer.write("<city>汉中</city>");
            writer.write("<city>延安</city>");
        }else if("广州".equals(province)){
            writer.write("<city>广州</city>");
            writer.write("<city>深圳</city>");
            writer.write("<city>佛山</city>");
        }
        writer.write("</root>");

        writer.flush();
        writer.close();
    }

kerer-sk

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX

AJAX 简介AJAX是一个浏览器与服务器之间异步的通信机制，可以在不刷新整个页面的情况下，与服务器进行通信。AJAX不是一个全新的语言，而是一种异步的编程模式。不用刷新整个页面便可与服务器通讯的办法有Flash/ActionScript框架FramesetiFrame（内嵌入框架)XMLHttpRequest(非IE浏览器)和ActiveXObject(IE浏览器)所有浏览器中都内置了异
复制链接

扫一扫

专栏目录