• Ajax：js绑定事件、ajax发送Get请求

    目录：

    （1）js按钮实现绑定事件：

    （2）ajax发送get请求详细过程：

    （3）ajax Get请求提交数据：

    （4） Http状态信息总结

    （1）js按钮实现绑定事件：

    test.html:

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>先能看懂下面这个代码，再学习AJAX。title>
    6. head>
    7. <body>
    8.  
    9. <script type="text/javascript">
    10.     function sayHello(){
    11.         alert("hello javascript")
    12.     }
    13. script>
    14.  
    16. <input type="button" value="hello" onclick="sayHello()">
    17.  
    19. <input type="button" value="hello2xxxxxxxxxxxxxxx" id="helloBtn">
    20.  
    21. <script type="text/javascript">
    22.     // 页面加载完毕之后，给id="helloBtn"的元素绑定鼠标单击事件
    23.     // 这个function就是一个回调函数，这个回调函数什么时候执行？当load事件发生之后，这个回调函数才会执行。
    24.     // 什么是load事件？load事件什么时候发生？注意：页面加载完毕之后，load事件发生。
    25.     window.onload = function(){
    26.         // 获取id="helloBtn"的对象
    27.         var helloBtn = document.getElementById("helloBtn");
    28.         // 给id="helloBtn"元素绑定click事件
    29.         // 这个function也是一个回调函数，这个回调函数什么时候执行？
    30.         // 当helloBtn被click的时候，被鼠标单击的时候，这个回调函数会执行。
    31.         // 鼠标单击五次，这个回调函数就会被调用五次。
    32.         helloBtn.onclick = function(){
    33.             //alert("hello javascript2")
    34.             //alert(this)
    35.             // 这个回调函数中的this是谁呢？
    36.             // this是发生事件的事件源对象。是按钮发生了鼠标单击，那么this代表的就是这个按钮对象。
    37.             alert(this.value)
    38.         }
    39.     }
    40. script>
    41.  
    42. body>
    43. html>

    点击hello 

     点击hello2xxxxxxxx

    Ajax发送请求需要一个核心的对象：XMLHttpRequest对象，浏览器内置了这个对象，现代浏览器都是支持的

    readyState： 表明请求和响应的处理过程

     

     

     （2）ajax发送get请求详细过程：

    ajaxGet.html:分为4步过程

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>ajax get请求title>
    6. head>
    7. <body>
    8.  
    9. <script type="text/javascript">
    10.     window.onload = function(){
    11.         document.getElementById("helloBtn").onclick = function (){
    12.             // 发送ajax get请求
    13.             //console.log("发送ajax get请求")
    14.             // 1.第一步：创建AJAX核心对象XMLHttpRequest
    15.             var xhr = new XMLHttpRequest();
    16.  
    17.             // 2.第二步：注册回调函数
    18.             // 这是一个回调函数，这个函数在XMLHttpRequest对象的readyState状态值发生改变的时候被调用。
    19.             xhr.onreadystatechange = function (){
    20.                 // 这里的回调函数会被调用多次。
    21.                 // 0 -> 1 被调用一次
    22.                 // 1 -> 2 被调用一次
    23.                 // 2 -> 3 被调用一次
    24.                 // 3 -> 4 被调用一次
    25.  
    26.                 //console.log(xhr.readyState) 会输出0-4
    27.  
    28.                 // 当XMLHttpRequest对象的readyState的状态是4的时候，表示响应结束了。下方的this表示xhr
    29.                 /*if (xhr.readyState == 4) {
    31.                 }*/
    32.  
    33.                 if (this.readyState == 4) {
    34.                     // 响应结束了。
    35.                     //console.log("响应结束了")
    36.                     // 响应结束之后，一般会有一个HTTP的状态码。
    37.                     // HTTP状态码常见的包括：200表示成功了，404表示资源找不到，500表示服务器内部错误。
    38.                     // HTTP状态码是HTTP协议的一部分，HTTP协议中规定的。服务器响应之后都会有一个状态码。
    39.                     // 获取HTTP状态码
    40.                     //console.log("HTTP响应状态码：" + this.status)
    41.                     if (this.status == 404) {
    42.                         alert("对不起，您访问的资源不存在，请检查请求路径")
    43.                     } else if(this.status == 500){
    44.                         alert("对不起，服务器发生了严重的内部错误，请联系管理员")
    45.                     } else if(this.status == 200){
    46.                         //alert("响应成功，完美")
    47.                         // 200表示完全响应完毕，成功结束了。
    48.                         // 通过XMLHttpRequest对象获取响应的信息。
    49.                         // 通过XMLHttpRequest对象的responseText属性来获取响应的信息。
    50.                         //alert(this.responseText)
    51.  
    52.                         // 把响应信息放到div图层当中，渲染
    53.                         document.getElementById("mydiv").innerHTML = this.responseText
    54.                     }
    55.  
    56.                 }
    57.             }
    58.  
    59.             // 3.第三步：开启通道（open只是浏览器和服务器建立连接，通道打开，并不会发送请求）
    60.             // XMLHttpRequest对象的open方法
    61.             // open(method, url, async, user, psw)
    62.             // method: 请求的方式，可以是GET，也可以是POST，也可以是其它请求方式。
    63.             // url：请求的路径
    64.             // async: 只能是true或者false，true表示此ajax请求是一个异步请求，false表示此ajax请求是一个同步请求。（大部分请求都是true，要求异步。极少数情况需要同步，以后再说。）
    65.             // user：用户名 pwd: 密码，用户名和密码是进行身份认证的，说明要想访问这个服务器上的资源，可能需要提供一些口令才能访问。需不需要用户名和密码，主要看服务器的态度。
    66.             xhr.open("GET", "/ajax/ajaxrequest1", true);
    67.  
    68.             // 4.第四步：发送请求
    69.             xhr.send()
    70.         }
    71.     }
    72. script>
    73.  
    75. <input type="button" value="hello ajax" id="helloBtn">
    76.  
    78. <div id="mydiv">div>
    79.  
    80. body>
    81. html>

    AjaxRequestServlet:

    1. package com.bjpowernode.ajax.servlet;
    2.  
    3. import javax.servlet.ServletException;
    4. import javax.servlet.annotation.WebServlet;
    5. import javax.servlet.http.HttpServlet;
    6. import javax.servlet.http.HttpServletRequest;
    7. import javax.servlet.http.HttpServletResponse;
    8. import java.io.IOException;
    9. import java.io.PrintWriter;
    10.  
    11. @WebServlet("/ajaxrequest1")
    12. public class AjaxRequestServlet extends HttpServlet {
    13.     @Override
    14.     protected void doGet(HttpServletRequest request, HttpServletResponse response)
    15.             throws ServletException, IOException {
    16.         /*String s = null;
    17.         s.toString();
    18.         返回500
    19.         */
    20.  
    21.         // Servlet向浏览器响应一段数据
    22.         PrintWriter out = response.getWriter();
    23.  
    24.         // out对象向浏览器输出信息
    25.         // 服务器的代码实际上和以前的代码还是完全一样的。
    26.         // 只不过这个out在响应的时候，浏览器客户端的XMLHttpRequest对象会接收到这个响应的信息。
    27.         out.print("welcome to study ajax!!!!");
    28.     }
    29. }

    点击按钮：

      

    ajaxGet3.html：单独写一个函数callback，然后再调用

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>发送ajax get请求title>
    6. head>
    7. <body>
    8. <script type="text/javascript">
    9.  
    10.     //1. 创建AJAX核心对象
    11.     var xhr = new XMLHttpRequest();
    12.  
    13.     window.onload = function () {
    14.         document.getElementById("btn").onclick = function () {
    15.             //2. 注册回调函数
    16.             xhr.onreadystatechange = callback
    17.             //3. 开启通道
    18.             xhr.open("GET", "/ajax/ajaxrequest2", true)
    19.             //4. 发送请求
    20.             xhr.send()
    21.         }
    22.     }
    23.  
    24.     function callback(){
    25.         if(xhr.readyState == 4){
    26.             if (xhr.status == 200) {
    27.                 document.getElementById("mydiv").innerHTML = xhr.responseText
    28.             }else{
    29.                 alert(xhr.status)
    30.             }
    31.         }
    32.     }
    33. script>
    34. <button id="btn">发送ajax get请求button>
    35.  
    36. <div id="mydiv">div>
    37. body>
    38. html>

    AjaxRequest22Servlet：

    1. package com.bjpowernode.ajax.servlet;
    2.  
    3.  
    4. import javax.servlet.ServletException;
    5. import javax.servlet.annotation.WebServlet;
    6. import javax.servlet.http.HttpServlet;
    7. import javax.servlet.http.HttpServletRequest;
    8. import javax.servlet.http.HttpServletResponse;
    9. import java.io.IOException;
    10. import java.io.PrintWriter;
    11.  
    12.  
    13. @WebServlet("/ajaxrequest22")
    14. public class AjaxRequest22Servlet extends HttpServlet {
    15.     @Override
    16.     protected void doGet(HttpServletRequest request, HttpServletResponse response)
    17.             throws ServletException, IOException {
    18.         // 设置响应的内容类型以及字符集
    19.         response.setContentType("text/html;charset=UTF-8");
    20.         // 获取响应流
    21.         PrintWriter out = response.getWriter();
    22.         // 响应
    23.         out.print("用户名已存在！！！");
    24.  
    25.     }
    26. }

     

    （3）ajax Get请求提交数据：

    ajaxGet2.html：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>发送ajax get请求title>
    6. head>
    7. <body>
    8. <script type="text/javascript">
    9.     window.onload = function () {
    10.         document.getElementById("btn").onclick = function () {
    11.             //1. 创建AJAX核心对象
    12.             var xhr = new XMLHttpRequest();
    13.             //2. 注册回调函数
    14.             xhr.onreadystatechange = function(){
    15.                 if (this.readyState == 4) {
    16.                     if (this.status == 200) {
    17.                         // 通过XMLHttpRequest对象的responseText属性可以获取到服务器响应回来的内容。
    18.                         // 并且不管服务器响应回来的是什么，都以普通文本的形势获取。（服务器可能响应回来：普通文本、XML、JSON、HTML...）
    19.                         // innerHTML属性是javascript中的语法，和ajax的XMLHttpRequest对象无关。
    20.                         // innerHTML可以设置元素内部的HTML代码。（innerHTML可以将后面的内容当做一段HTML代码解释并执行）
    21.                         //document.getElementById("myspan").innerHTML = this.responseText
    22.                         document.getElementById("mydiv").innerHTML = this.responseText
    23.                         // innerText也不是AJAX中的，是javascript中的元素属性，和XMLHttpRequest无关。
    24.                         // innerText也是设置元素中的内容，但是即使后面是一段HTML代码，也是将其看做一个普通字符串设置进去。
    25.                         //document.getElementById("myspan").innerText = this.responseText
    26.                     }else{
    27.                         alert(this.status)
    28.                     }
    29.                 }
    30.             }
    31.             //3. 开启通道
    32.             // 获取到用户填写的usercode和username
    33.             var usercode = document.getElementById("usercode").value
    34.             var username = document.getElementById("username").value
    35.             //xhr.open("GET", "/ajax/ajaxrequest2?usercode="+usercode+"&username="+username, true)
    36.  
    37.             // 避免低版本的IE浏览器，走缓存，搞一个时间戳
    38.             //alert(new Date().getTime())
    39.             //xhr.open("GET", "/ajax/ajaxrequest2?t="+new Date().getTime()+"&usercode="+usercode+"&username="+username, true)
    40.             //或者加一个随机数，解决缓存问题
    41.             xhr.open("GET", "/ajax/ajaxrequest2?t="+Math.random()+"&usercode="+usercode+"&username="+username, true)
    42.             //4. 发送请求
    43.             xhr.send()
    44.         }
    45.     }
    46. script>
    47. usercode<input type="text" id="usercode"><br>
    48. username<input type="text" id="username"><br>
    49. <button id="btn">发送ajax get请求button>
    50. <span id="myspan">span>
    51. <div id="mydiv">div>
    52. body>
    53. html>

      控制器：AjaxRequest2Servlet：

    1. package com.bjpowernode.ajax.servlet;
    2.  
    3.  
    4. import javax.servlet.ServletException;
    5. import javax.servlet.annotation.WebServlet;
    6. import javax.servlet.http.HttpServlet;
    7. import javax.servlet.http.HttpServletRequest;
    8. import javax.servlet.http.HttpServletResponse;
    9. import java.io.IOException;
    10. import java.io.PrintWriter;
    11.  
    12.  
    13. @WebServlet("/ajaxrequest2")
    14. public class AjaxRequest2Servlet extends HttpServlet {
    15.     @Override
    16.     protected void doGet(HttpServletRequest request, HttpServletResponse response)
    17.             throws ServletException, IOException {
    18.         // 设置响应的内容类型以及字符集
    19.         response.setContentType("text/html;charset=UTF-8");
    20.         // 获取响应流
    21.         PrintWriter out = response.getWriter();
    22.         // 响应
    23.         //out.print("用户名已存在！！！");
    24.  
    25.         // 获取ajax get请求提交的数据
    26.         String usercode = request.getParameter("usercode");
    27.         String username = request.getParameter("username");
    28.  
    29.         out.print("usercode=" + usercode + ", username=" + username);
    30.  
    31.     }
    32. }

     

    （4） Http状态信息总结

  • 相关阅读:
    零基础学Java（1）初识Java程序
    首个校园招聘年度盛宴，数百万人关注，牛客2022青年人才招聘峰会来啦！
    uni-app 中的 picker 组件基于后台对象数组数据格式的使用
    关心过业务系统里面的sql耗时吗？统计过慢查询吗？对慢查询都怎么优化过？
    如何限制word文件中部分内容无法编辑
    C++ 继承
    【算法】【递归与动态规划模块】矩阵的最小路径和
    9. seatunnel-incubating-2.1.2安装部署
    Oracle数据库 on duplicate key update功能
    《STM32Cube高效开发教程基础篇》- 安装软件/Demo3_1LED
  • 原文地址：https://blog.csdn.net/dengfengling999/article/details/125904277