ajax get缓存问题+ajax post请求

发布时间:2023-05-23 09:32:54

1.ajaxget缓存问题9

对于低版本的IE浏览器,AJAX的要求可能是缓存。有缓存问题。对于现代浏览器来说,大多数浏览器都没有AJAXget缓存问题。

2.AJAXGET请求缓存问题是什么?9

-在HTTP协议中,get请求是这样规定的:get请求将被缓存。

-发送AJAXGET请求时,如果前后发送的AJAX请求路径相同,对于低版IE,第二个AJAXGET请求将缓存,而不是服务器。

-HTTP协议规定POST请求不会被浏览器缓存。

2.1GET请求缓存的优缺点:9

-优点:直接从浏览器缓存中获取资源,无需从服务器上重新加载资源,速度快,用户体验好。

-缺点:无法实时获取最新的服务器资源。

2.2浏览器什么时候会缓存?9

-第一,GET请求

-第二:请求路径已被浏览器缓存。第二次发送请求时,路径没有变化,浏览器缓存。

2.3如果是低版IE浏览器,如何解决AJAXGET请求的缓存问题?9

-您可以在请求路径url后面添加一个时间戳,随时更改。因此,每次发送的请求路径都是不同的,因此浏览器的缓存不会出现问题。

-时间戳可以使用:"url?t="+newDate().getTime()

-或者可以通过随机数:"url?t="+Math.random()

-也可以随机数+时间戳...

代码在E:\java学习Ajax\coursecourse3\webajax.html
<!--熟悉发送ajax 要求的写作方法  7--><!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>发送ajax get请求</title></head><body><script type="text/javascript">    window.onload = function (){        document.getElementById("btn").onclick = function (){            ////创建AJAX核心对象            var xhr = new XMLHttpRequest();            ///注册回调函数            xhr.onreadystatechange = function (){                if(this.readyState==(4){///只等于4是表示结束。                    if(this.status == 200){//只等于200表示正常                        // 服务器响应的内容可以通过XMLHttprequest对象的responsetext属性获得。                        // 而且无论服务器回应什么,都是以普通文本的形势获取的。(服务器可能会反应回来                        // :普通文本、XML、JSON、HTML...)                        // innerHTML属性是javascript中的语法,与ajax的XMLHTTPRequest对象无关。                        // 元素内部的HTML代码可以设置为innerHTML。(innnerHTML可以将以下内容视为                        // 解释并执行一段HTML代码)                        //document.getElementById("myspan").innerHTML = this.responseText                        document.getElementById("myp").innerHTML = this.responseText                        // innerText不在AJAX中,它是javascript中的元素属性,与xmlhttprequest无关。                        // innerText也是设置元素的内容,但即使是HTML代码,也被设置为普通字符串。                        //document.getElementById("myspan").innerText = this.responseText                    }else {//表示异常                        alert(this.status)////打印异常状态码                    }                }            }            ///打开通道            //ajax get请求提交的数据  8            ///获取用户填写usercode和username            var usercode = document.getElementById("usercode").value            var username = document.getElementById("username").value            //解决AJAX GET请求的缓存问题  9            ///方法一给时间戳            //alert(new Date().getTime())            //xhr.open("GET","/ajax/ajaxrequest2t="+new Date().getTime()+"&usercode="+usercode+"&username="+username,true)            //方法二使用随机数            xhr.open("GET","/ajax/ajaxrequest2t="+Math.random()+"&usercode="+usercode+"&username="+username,true)            //发送请求            xhr.send()        }    }</script><!--ajax get请求提交的数据  8-->usercode<input type="text" id="usercode"><br>username<input type="text" id="username"><br><button id="btn">发送ajax get请求</button><span id="myspan"></span><p id="myp"></p> <!--p是独占一行--></body></html>
com.bjpowerndoe.ajax.servletajaxrestest2Servlet
package com.bjpowerndoe.ajax.servlet;import jakarta.servlet.ServletException;import jakarta.servlet.annotation.WebServlet;import jakarta.servlet.http.HttpServlet;import jakarta.servlet.http.HttpServletRequest;import jakarta.servlet.http.HttpServletResponse;import java.io.IOException;import java.io.PrintWriter;///熟悉ajax 要求的写作方法  7@WebServlet(/ajaxrequest2)public class Ajaxrequest2Servlet extends HttpServlet {    @Override    protected void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        ///这个响应的内容类型和字符集        response.setContentType("text/html;charset=UTF-8");        //获取响应流        PrintWriter out = response.getWriter();        //响应        //out.print(“用户名已存在”);        //获取ajax get请求提交的数据   8        String usercode = request.getParameter("usercode");        String username = request.getParameter("username");        out.print("usercode="+usercode+",username="+username);    }}
3.AJAXPOST请求10代码:\java学习Ajax\coursecourse3\webajax4.html
<!--发送ajax post请求  10--><!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>发送ajax post请求</title></head><body><script type="text/javascript">    window.onload = function (){        document.getElementById("mybtn").onclick = function (){            //发送ajax post请求            ////创建ajax核心对象            var xhr = new XMLHttpRequest();            ///注册回调函数            xhr.onreadystatechange = function (){                if (this.readyState==4) {                    if(this.status==200){                        document.getElementById("myp").innerHTML = this.responseText                    }else{                        alert(this.status)                    }                }            }            ///打开通道            xhr.open("POST","/ajax/ajaxrequest",true)            //发送请求            xhr.send()        }    }</script><button id="mybtn">发送ajax post请求</button><p id="myp"></p></body></html>
com.bjpowerndoe.ajax.servletajaxrest3Servlet
package com.bjpowerndoe.ajax.servlet;import jakarta.servlet.ServletException;import jakarta.servlet.annotation.WebServlet;import jakarta.servlet.http.HttpServlet;import jakarta.servlet.http.HttpServletRequest;import jakarta.servlet.http.HttpServletResponse;import java.io.IOException;import java.io.PrintWriter;//发送ajax post请求  10@WebServlet("/ajaxrequest")public class Ajaxrequest3Servlet extends HttpServlet {    @Override    protected void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        response.setContentType("text/html;charset=UTF-8");        PrintWriter out = response.getWriter();        out.print(”用户名已经存在!!!!");    }}

-AJAXPOST请求和GET请求的代码有什么区别?前端代码不同。后端代码没有区别。

3.1发送AJAXPOST请求提交数据11
// 4. 发送AJAX POST请求 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") // 设置请求头的内容类型。提交模拟form表单的数据。  // 在表格中获取数据  var username = document.getElementById("username").value;  var password = document.getElementById("password").value;  // send函数中的参数是发送的数据,在“请求体”中发送此数据。  xhr.send("username="+username+"&password="+password)
代码在E:\java学习Ajax\coursecourse3\webajax4.html
<!--发送ajax post请求  10--><!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>发送ajax post请求</title></head><body><script type="text/javascript">    window.onload = function (){        document.getElementById("mybtn").onclick = function (){            //发送ajax post请求            ////创建ajax核心对象            var xhr = new XMLHttpRequest();            ///注册回调函数            xhr.onreadystatechange = function (){                if (this.readyState==4) {                    if(this.status==200){                        document.getElementById("myp").innerHTML = this.responseText                    }else{                        alert(this.status)                    }                }            }            ///打开通道            xhr.open("POST","/ajax/ajaxrequest",true)            //发送请求            // 如何模拟AJAX提交form表单?设置请求头的内容类型(此行代码非常关键,是模拟form表单提交的关键代码。设置请求头的内容类型(此行代码非常关键,是模拟form表单提交的关键代码。)            // 在设置请求头的内容类型时,必须在open之后。            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")            // 将send()函数的小括号中的数据自动提交到请求体中。  11            // 用JS代码获取用户填写的用户名和密码            var username = document.getElementById("username").value;            var password = document.getElementById("password").value;            //xhr.send(注意格式:这里的数据是在请求体中提交的,格式不能随便来,            // 仍需遵循HTTP协议:name=value&name=value&name=value")            xhr.send("username="+username+"&password="+password)        }    }</script><!--ajax post要求提交的数据  11-->用户名<input type="text" id="username"><br>密码<input type="password" id="password"><br><button id="mybtn">发送ajax post请求</button><p id="myp"></p></body></html>
com.bjpowerndoe.ajax.servletajaxrest3Servlet
package com.bjpowerndoe.ajax.servlet;import jakarta.servlet.ServletException;import jakarta.servlet.annotation.WebServlet;import jakarta.servlet.http.HttpServlet;import jakarta.servlet.http.HttpServletRequest;import jakarta.servlet.http.HttpServletResponse;import java.io.IOException;import java.io.PrintWriter;//发送ajax post请求  10@WebServlet("/ajaxrequest")public class Ajaxrequest3Servlet extends HttpServlet {    @Override    protected void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        response.setContentType("text/html;charset=UTF-8");        PrintWriter out = response.getWriter();        //out.print(”用户名已经存在!!!!");        //获取其ajax post要求提交的数据  11        String username = request.getParameter("username");        String password = request.getParameter("password");        out.print("username="+username+",password="+password);    }}
4.实现一个案例:12

使用AJAXPOST请求实现用户注册时,用户名是否可用。(验证用户名是否可以注册)实现步骤如下:

-在前端,用户输入用户名后,失去焦点事件blur发生,然后发送AJAXPOST请求,提交用户名

-在后端,接收用户名,连接数据库,并根据用户名在表中搜索

-若用户名已存在

-后端响应信息:对不起,用户名已经存在(前端页面显示红色字体)

-假如用户名不存在

-后端响应信息:可使用用户名(绿色字体显示在前端页面)

com中的代码.bjpowerndoe.ajax.servletAjaxrequest4Servlet
package com.bjpowerndoe.ajax.servlet;import jakarta.servlet.ServletException;import jakarta.servlet.annotation.WebServlet;import jakarta.servlet.http.HttpServlet;import jakarta.servlet.http.HttpServletRequest;import jakarta.servlet.http.HttpServletResponse;import java.io.IOException;import java.io.PrintWriter;import java.sql.*;//ajax post 请验证用户名是否可用  12@WebServlet(/ajaxrequest4)public class Ajaxrequest4Servlet extends HttpServlet {    @Override    protected void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        //获取用户名        String uname = request.getParameter("uname");        ///打布尔标记(一个编程模型)        boolean flag = false;///默认用户名不存在        ///连接数据库验证用户名是否存在        Connection conn = null;        PreparedStatement ps = null;        ResultSet rs = null;        try {            ///注册驱动            Class.forName("com.mysql.cj.jdbc.Driver");            //获取连接            conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/bjpowernode?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC","root","lzl");            ///获取预编译数据库操作对象            String sql = "select id,username from t_user where username = ?";            ps = conn.prepareStatement(sql);            ps.setString(1,uname);            //执行SQL语句            rs = ps.executeQuery();            ///处理结果集            if(rs.next()){                ///用户名已经存在                flag = true;            }        } catch (Exception e) {            e.printStackTrace();        }finally {            // 6.释放资源            if (rs != null) {                try {                    rs.close();                } catch (SQLException e) {                    e.printStackTrace();                }            }            if (ps != null) {                try {                    ps.close();                } catch (SQLException e) {                    e.printStackTrace();                }            }            if (conn != null) {                try {                    conn.close();                } catch (SQLException e) {                    e.printStackTrace();                }            }        }        ///响应结果到浏览器        response.setContentType("text/html;charset=UTF-8");        PrintWriter out = response.getWriter();        if(flag){            out.print(对不起,用户名已存在”);        }else{            ///用户名不存在,可用            out.print(“用户名可用”);        }    }}
ajax5.html
<!--ajax post 请验证用户名是否可用  12--><!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>ajax post 请验证用户名是否可用</title></head><body><script type="text/javascript">    ////将失去焦点事件绑定到文本框中    window.onload = function (){        //获得焦点        document.getElementById("username").onfocus = function (){            document.getElementById("tipMsg").innerHTML = ""        }        document.getElementById("username").onblur = function (){            //console.log(”正在发送ajax post请求”)            var xhr = new XMLHttpRequest();            xhr.onreadystatechange = function (){                if (this.readyState==4) {                    if(this.status==200){                        document.getElementById("tipMsg").innerHTML = this.responseText                    }else{                        alert(this.status)                    }                }            }            xhr.open("POST","/ajax/ajaxrequest4”,true)            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")            //获取表单数据            var username = document.getElementById("username").value            xhr.send("uname="+username)        }    }</script>用户名<input type="text" id="username" ><span id="tipMsg"></span></body></html>

上一篇 先导引入spring
下一篇 使用接口进行衔接

文章素材均来源于网络,如有侵权,请联系管理员删除。

标签: Java教程Java基础Java编程技巧面试题Java面试题