基于servlet的Ajax原理及示例

最新推荐文章于 2022-04-28 19:28:57 发布

麦克波菲柯特

最新推荐文章于 2022-04-28 19:28:57 发布

阅读量659

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/mikeoperfect/article/details/79317888

版权

JavaWeb 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Ajax简介

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

Web开发技术演变过程

分为三个阶段：

阶段一：使用简单的静态页面
阶段二：使用ASP、JSP和PHP等动态脚本语言
阶段三： Web2.0阶段，其中Ajax是Web2.0的核心技术

Ajax原理

这里写图片描述
在基于Ajax的Web应用模型中，用户在页面上获取的数据是通过Ajax引擎提供的。由于页面不需要直接与服务器进行交互，因此客户端浏览器不需要刷新页面就能获得服务器的信息，故而提高了相应速度和页面的友好度。

Ajax实质上也遵循Request/Server模式，所以这个框架基本的流程如下：

一、创建XMLHttpRequest对象
二、使用XMLHttpRequest对象发送请求
三、服务器端处理用户请求
四、客户端处理服务器响应

Ajax示例（局部显示用户名）

创建JSP页面
源码：AjaxShow.jsp

代码说明：在这个JSP页面中，使用Javascript创建了XMLHttpRequest对象，通过这个对象把用户的输入信息作为参数传递给服务器。而且在JSP页面中，还接收服务器返回的处理结果，并在特定区域内显示处理结果。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script language="JavaScript">
        var XMLHttpReq;
        function createXMLHttpRequest() {
        //适应不同的浏览器
            if(window.XMLHttpRequest) 
                XMLHttpReq=new XMLHttpRequest();
            else {
                if(window.ActiveXObject)
                    try{
                        XMLHttpReq=new ActiveXObject("Msxml2.XMLHTTP");
                    }catch(e){
                        try {
                            XMLHttpReq=new ActiveXObject("Miscrosoft.XMLHTTP");
                            }catch (e){
                        }
                    }
            }
        }
        //处理服务器响应结果
        function handleResponse() {
            if(XMLHttpReq.readyState==4) {
                if (XMLHttpReq.status == 200) {
                    var res = XMLHttpReq.responseXML;
                    var response = res.getElementsByTagName("response")[0].firstChild.nodeValue;
                    document.getElementById("hello").innerHTML = response;
                }
            }
        }
        //发送客户端请求
        function sendRequest(url) {
            createXMLHttpRequest();
            XMLHttpReq.open("get",url,true);
            XMLHttpReq.send(null);
            XMLHttpReq.onreadystatechange=handleResponse;
        }
        //开始调用Ajax功能
        function sayHello() {
            var name=document.getElementById("name").value;
            window.alert(name);
            sendRequest("SayHello?name="+name);
        }
    </script>
</head>
<body>
姓名：<input type="text" id="name" /> <input type="button" value="提交" onclick="sayHello()" />
<div id="hello"></div>

</body>
</html>

编写servlet文件
源码：SayHello.java

代码说明：在servlet中，接收XMLHttpRequest对象传递过来的参数，并且根据处理的结果生成XML文档，然后把XML文档返回给JSP页面。

package com;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

public class SayHello extends HttpServlet{
    public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException,IOException{
        response.setContentType("text/xml;charset=GB2312");
        response.setHeader("Cache-Control","no-cache");
        PrintWriter out=response.getWriter();
        String output=" ";
        if(request.getParameter("name")!=null&&request.getParameter("name").length()>0)
            output="<response>Hello  "+request.getParameter("name")+"</response>";
        out.println(output);
        out.close();
    }
    public void doGet(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException{
        doPost(request,response);
    }
}

配置web.xml
源码：web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<!-- 完成Servlet中name和class之间的匹配 -->
    <servlet>
        <servlet-name>SayHello</servlet-name>
        <servlet-class>com.SayHello</servlet-class>
    </servlet>
    <!-- 完成URL地址到name中的映射，然后到< servlet>标签中匹配 -->
    <servlet-mapping>
        <servlet-name>SayHello</servlet-name>
        <url-pattern>/SayHello</url-pattern>
    </servlet-mapping>
</web-app>

运行效果

这里写图片描述

代码片段解释

一、创建XMLHttpRequest对象

var XMLHttpReq;
        function createXMLHttpRequest() {
        //适应不同的浏览器
            if(window.XMLHttpRequest) 
                XMLHttpReq=new XMLHttpRequest();
            else {
                if(window.ActiveXObject)
                    try{
                        XMLHttpReq=new ActiveXObject("Msxml2.XMLHTTP");
                    }catch(e){
                        try {
                            XMLHttpReq=new ActiveXObject("Miscrosoft.XMLHTTP");
                            }catch (e){
                        }
                    }
            }
        }

XMLHttpRequest对象在Ajax中占据十分重要的地位，Ajax中的客户端就是通过XMLHttpRequest对象与服务器通信的。在IE浏览器中，XMLRequest对象是以ActiveX组建的形式提供的（不同版本不同使用方式）；而在其他浏览器其中则使用Javascript的本地方法创建。

二、使用XMLHttpRequest对象发送请求

function sendRequest(url) {
            createXMLHttpRequest();
            XMLHttpReq.open("get",url,true);
            XMLHttpReq.send(null);
            XMLHttpReq.onreadystatechange=handleResponse;
        }

在向服务器发送请求之前，首先使用XMLHttpRequest对象的open方法建立对服务器调用，然后才能向服务器发送请求消息。如果发送请求的数据量较少则直接使用传参的方式发送，send方法中的参数用null代替。如果发送请求的数据量多则可把发送的内容组成XML文档，然后通过send（“content”）即可，其中content参数就是XML文档的内容。

三、服务器端处理用户请求

 public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException,IOException{
        response.setContentType("text/xml;charset=GB2312");
        response.setHeader("Cache-Control","no-cache");
        PrintWriter out=response.getWriter();
        String output=" ";
        if(request.getParameter("name")!=null&&request.getParameter("name").length()>0)
            output="<response>Hello  "+request.getParameter("name")+"</response>";
        out.println(output);
        out.close();
    }

当客户端使用超链接传递参数时，服务器端的处理比较简单，仅仅通过request．ｇｅｔＰａｒａｍｅｎｔ（“参数名称”）即可取出对应参数的值，然后根据取得的值进行相应的逻辑操作。

生成XML文档内容；把生成的内容放在Print Writer对象中返回给用户。

四、客户端处理服务器响应

function handleResponse() {
            if(XMLHttpReq.readyState==4) {
                if (XMLHttpReq.status == 200) {
                    var res = XMLHttpReq.responseXML;
                    var response = res.getElementsByTagName("response")[0].firstChild.nodeValue;
                    document.getElementById("hello").innerHTML = response;
                }
            }
        }

当服务器端用Print Writer对象返回一般字符串时，在客户端可以通过ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对象的responseText属性取出服务器返回的内容。
更多时候服务器会用XML文档返回逻辑处理结果，在客户端可以通过XMLHttpRequest对象的responseXML属性取出服务器返回的响应文档。在JavaScript中，可以用DOM方式分析这个XML文档，从而取出用户需要的内容。

通过使用innerText或者innerHTML可以设置HTML页面元素内的显示内容，这种操作不会对整个页面进行刷新。

小结

Ajax真是一个不错的东西，尤其是对于性能比较差的机器来说，用的最多的还是查询，好东西哇

麦克波菲柯特

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于servlet的Ajax原理及示例

Ajax简介AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图...
复制链接

扫一扫

专栏目录