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>
湘公网安备43019002002060