Servlet-Ajax-JSP

1.Ajax

作用：

（1）网页异步、局部更新的JS组件

（2）模拟Http请求，处理Http响应

（3）模拟所有请求类型、所有mime类型以及文件上传、下载、跨域请求

如何使用JQuery提供的Ajax组件完成Http请求和响应的处理

（1）如何编写Ajax

++ 引入JQuery

<script src="../../lib/jquery-3.6.0-min.js" type="text/javascript"></script>

++ 编写ajax内容（编写js内容）

前端部分

<button onclick="toAjax()">调用ajax</button>

<select id="mySelect">
    <option value="0">--请选择--</option>
</select>

<script>

    function toAjax(){
        //调用一个ajax
        $.ajax({
            url:"http://localhost:8080/JavaServletDemo/textServlet",
            type:"GET",
            data:{name:"马花子"},
            dataType:"JSON",
            success:function(data){
                console.dir(data);
                for(var i in data.data){
                    $("#mySelect").append("<option value='"+i+"'>"+data.data[i].name+"</option>")
                }
            },
            error:function(XMLHttpRequest, textStatus, errorThrown){
                console.dir("请求失败！");
            }
        });
    }

</script>

后端Servlet部分：

 @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        Result res = new Result();

        req.setCharacterEncoding("UTF-8");
        resp.setCharacterEncoding("UTF-8");

        resp.setContentType("application/json;charset=UTF-8");

        PrintWriter writer = resp.getWriter();

        List<Map<String,String>> list = new ArrayList<>();

        for(int i=0;i<5;i++){
            Map<String,String> map = new HashMap<>();
            map.put("name","昆明"+(i+1));
            list.add(map);
        }



        res.setData(list);

        writer.print(res.toString());
        writer.flush();
        writer.close();

    }

(2)ajax的组成

ajax是$,JQuery对象的一个ajax()方法

$.ajax();

配置属性：

url: 请求地址，要求为String类型的参数，（默认为当前页地址）发送请求的地址。

type: 请求类型，GET、POST，默认为GET

timeout：最长请求时间，单位毫秒，是Number类型

async：异步参数：true=》异步执行（默认），false=》同步执行

data：参数属性：传入一个JSON对象，如 data：{userID：1}

dataType：预期服务端响应数据类型，主要有：JSON、HTML、TEXT、JSONP

contentType： 设置请求的mime类型，application/json

配置回调函数：

beforeSend : 发送前的回调

beforeSend:function(XMLHttpRequest){
    //在执行前会被调用
}

complete：请求完成之后回调方法（不管请求成功或失败都执行）

complete:function(XMLHttpRequest,textStatus){
    //在执行后会被调用（不管请求成功或失败都执行）
}

success：请求成功发送，响应成功接收

success:function(data, textStatus){
            //data可能是xmlDoc、jsonObj、html、text等等
            //textStatus ajax执行状态编码
}

error：请求失败，无法接收正常响应时调用

error:function(XMLHttpRequest, textStatus, errorThrown){
          //通常情况下textStatus和errorThrown只有其中一个包含信息
          //调用本次ajax请求时传递的options参数
          //errorThrown : 异常对象
}

2.JSP（服务端页面模板技术 Java Server Page）

作用：

（1）实现网页动态化加载

（2）可以在JSP页面上同时编写HTML、JS、CSS和JAVA

（3）简化Servlet返回HTML代码的复杂问题

2.1 JSP页面的创建方式

在项目中右键创建文件选择JSP File

2.2 JSP的编译过程

(1)将JSP页面编译成一个.java的java源文件，如：studnet.jsp => student_jsp.java

(2)源文件的内容

public void _jspService(final javax.servlet.http.HttpServletRequest request, final javax.servlet.http.HttpServletResponse response)
        throws java.io.IOException, javax.servlet.ServletException {
    final javax.servlet.jsp.PageContext pageContext; //页面作用域对象
    javax.servlet.http.HttpSession session = null;  //Session对象
    final javax.servlet.ServletContext application; //ServletContext上下文对象
    final javax.servlet.ServletConfig config;  //Servlet配置对象
    javax.servlet.jsp.JspWriter out = null;  //JSP的输出流对象
    final java.lang.Object page = this;  //page:  当前Servlet实例对象
    javax.servlet.jsp.JspWriter _jspx_out = null;
    javax.servlet.jsp.PageContext _jspx_page_context = null;
    try {
      response.setContentType("text/html; charset=utf-8");//设置ServletResponse的mime类型
      pageContext = _jspxFactory.getPageContext(this, request, response,null, true, 8192, true);//加载页面作用域配置
      _jspx_page_context = pageContext;
      application = pageContext.getServletContext();
      config = pageContext.getServletConfig();
      session = pageContext.getSession();
      out = pageContext.getOut();
      _jspx_out = out;
        /*  将我们编写在jsp中的html转换为输出html的代码   */
      out.write("\r\n");
      out.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">\r\n");
      out.write("<html>\r\n");
      out.write("<head>\r\n");
      out.write("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\r\n");
      out.write("<title>Insert title here</title>\r\n");
      out.write("</head>\r\n");
      out.write("<body>\r\n");
      out.write("我是blankNew.jsp文件<br>\r\n");
        /*   编写的jsp脚本  */
for(int i=0;i<10;i++){
System.out.println("在控制台打印"); 
}
      out.write("\r\n");
      out.write("您的IP地址：");
        /*  jsp输出脚本 */
      out.print(request.getRemoteAddr() );
      out.write("\r\n");
      out.write("</body>\r\n");
      out.write("</html>");

（3） 编译源文件=》.class

（4）当网页访问JSP文件时，自动调用生成的jsp.java文件中的_jspService方法进行Servlet调用输出响应

2.3 JSP编写内容

（1）JSP脚本

可以在里面编写Java源代码，在<%和%>之间可以编写java代码

<body>
    <!-- JSP脚本 -->
    <%
       //java代码
        for(int i=0;i<5;i++){
            System.out.println("你好！"+i);
        }

    %>
</body>

（2）输出表达式<%= %>

可以调用JAVA代码中的方法、变量进行页面的输出渲染

<body>
我的IP地址：<%=request.getRequestURL() %>
    <!-- 如果<%=Obj 是一个对象，则输出对象的toString方法内容 -->
</body>

（3）注释(JSP 的注释)

<%-- 注释内容 --%>

（4）声明元素 <%! %>

<%-- JSP声明元素 --%>
    <%!
       private String userName = "admin";

       public String getName(){
           return "王丘";
       }
    %>


我的用户名：<%=userName %>我的账号：<%=getName()%>

注意：jsp脚本中能定义变量但是是局部变量

<%-- 在jsp脚本中无法定义方法，但是能定义局部变量，是_jspService方法的局部变量 --%>
    <%
        String userName = "admin";
    %>


我的用户名：<%=userName %>我的账号：

2.4 JSP页面跳转中的操作

（1）*Servlet请求重定向到JSP（Servlet 重定向 JSP）

resp.sendRedirect(pathHead+"/views/student/index.jsp");

(2) JSP请求重定向到JSP

<!-- 可以再jsp脚本中通过response内置响应对象完成请求重定向操作 -->
<%
   response.sendRedirect("error.jsp");
%>

（3）* JSP 请求重定向到 Servlet

<!-- 可以再jsp脚本中通过response内置响应对象完成请求重定向操作 -->
<%
   response.sendRedirect("http://localhost:8080/JavaServletDemo/login");
%>

( 4 )* Servlet可以请求转发到JSP

Servlet代码：

//请求转发到jsp页面，夹带参数传递
        req.setAttribute("className","华为20211024JAVA实训班");

        req.getRequestDispatcher("views/student/index.jsp").forward(req,resp);

jsp代码：

<!-- 接收来自Servlet转发的参数 -->
接收参数：<%=request.getAttribute("className")%>

(5)* 表单请、Http请求到JSP

表单请求代码：

<!-- 提交表单给JSP -->
<form action="index.jsp" method="get">
    <label>用户名</label>
    <input type="text" name="userName" />
    <label>密码</label>
    <input type="password" name="pwd" />
    <input type="submit" value="登录" />
</form>

jsp代码：

<body>

<!-- 接收来自客户端表单发送的请求参数 -->
用户名:<%=request.getParameter("userName")%><br/>
密码:<%=request.getParameter("pwd")%>


</body>

2.5 JSP 内置对象

1. 常用内置对象

++ request: HttpServletRequest对象，请求对象

++ response:HttpServletResponse对象，响应对象

++ session: HttpSession对象，服务端会话对象

++ application:ServletContext对象，Servlet容器上下文对象

++ config: ServletConfig对象，Servlet实例配置对象

++ out： JspWriter对象，jsp实例的输出流对象

2.内置对象-Request对象

作用：处理客户端请求

可以接收请求或者请求转发的请求参数、内置参数等等

3.内置对象-Response对象

作用：响应客户端请求

4.内置对象-Session对象

作用：保存服务端的会话

servlet代码：

HttpSession session = req.getSession();

        session.setAttribute("userName","admin");
        session.setAttribute("realName","马化腾");


        req.getRequestDispatcher("views/student/index.jsp").forward(req,resp);

jsp代码：

<body>

<!-- 从session中获取参数 -->
<%
    //可以在jsp中操作Session相关的所有方法
  session.setMaxInactiveInterval(5);
%>
用户名：<%=session.getAttribute("userName")%><br/>
真是姓名：<%=session.getAttribute("realName")%>

</body>

注意：

客户端与服务端产生会话时，会保存一个JSessionID到客户端Cookie中存储，目的就是判断是不是同一个会话的客户端

5.内置对象out-输出对象

out对象是JspWriter对象

在使用前需要引入javax.servlet.jsp-api包

pom.xml中引入

<!-- jsp-api -->
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>javax.servlet.jsp-api</artifactId>
            <version>2.3.3</version>
            <scope>provided</scope>
        </dependency>

引入后idea中才能在jsp中写out对象

<%
    //特殊处理java内容再输出时才会用到out对象
  Date date1 = new Date();

    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

  out.print(sdf.format(date1));
%>

6.内置对象-application（ServletContext对象）

#常用方法
void setAttribute(String key,Object value)	以key/value的形式保存对象值
Object getAttribute(String key)	通过key获取对象值 
String getRealPath(String path)	返回相对路径的真实路径

7.内置对象-config（ServletConfig对象）

使用方法同ServletConfig对象

8.内置对象-page（代表当前jsp对应的Servlet实例）

<%

    //通过反射也可以创建当前jsp的servlet实例
    Class<?> aClass = Class.forName("org.apache.jsp.views.student.index_jsp");

    
    Object o = aClass.newInstance();

    out.println(o);//输出创建的实例

    out.println(page);//输出当前jsp实例

%>

2.6 JSP指令

1.include指令 <%@ include file="引入的文件名称" %>

创建一个公共jsp页面提供给每个页面进行引入

<%--
 每个页面都需要引入的内容
--%>
<%

    //basePath，定义一个公共的局部变量保存请求的资源URI
    //http://localhost:8080/JavaServletDemo
    String scheme = request.getScheme();
    String serverName = request.getServerName();
    int serverPort = request.getServerPort();
    String contextPath = request.getContextPath();

    String basePath = scheme+"://"+serverName+":"+serverPort+contextPath;

    //再放入servletContext - application对象
    application.setAttribute("basePath",basePath);


%>
<script src="<%=basePath%>/lib/jquery-3.6.0-min.js" type="text/javascript"></script>
<script src="<%=basePath%>/lib/layui/layui.js" type="text/javascript"></script>
<link href="<%=basePath%>/lib/layui/css/layui.css"  rel="stylesheet" type="text/css" />

每个页面使用include指令引入页面即可

在页面开头引入
<%@ include file="../common/common.jsp" %>

2.7 作用域

作用域的分类：

page作用域：对应的作用域访问对象为pageContext 对象

request作用域:对应的作用域访问对象为request 对象

session作用域:对应的作用域访问对象为session 对象

application作用域:对应的作用域访问对象为application 对象

1.页面作用域-page（pageContext对象）

#在include页面中
<%

    //页面请求转发.include
    pageContext.setAttribute("name","ABC");

%>


#在父页面中
<%=pageContext.getAttribute("name")%>

结果能够取到说明：在include情况下，是共享同一个页面作用域的

（1）pageContext.include方法

在页面2：

<body>
    错误页面
    <%=pageContext.getAttribute("name")%>
</body>

在页面1：

XXXXX
<%

    //页面请求转发.include
    pageContext.setAttribute("name","ABC");

    //include方法相当于jsp的include指令，将另一个页面的内容包含到当前位置（通过java代码的方式实现）
    pageContext.include("error.jsp");

%>

最终结果：

XXXXX 错误页面 null

注意：页面作用域只能在当前页面使用，无法转发共享

2.请求作用域-request

作用：在多个jsp之间请求转发、或者jsp请求jsp，request对象共享

3.会话作用域-session

作用：在同一个会话中共享请求、页面

4.上下文作用域-application

作用：在多个jsp页面以及Servlet实例之间共享

posted @   忙碌的高师傅  阅读(196)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~
点击右上角即可分享
微信分享提示
SQL AI 助手