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

喵俺第一专栏

已于 2022-07-21 17:15:28 修改

阅读量1.3k

点赞数 3

分类专栏： # Ajax总结文章标签： javascript 前端 ajax

于 2022-07-21 17:13:39 首次发布

本文链接：https://blog.csdn.net/dengfengling999/article/details/125904277

版权

Ajax总结专栏收录该内容

12 篇文章 1 订阅

订阅专栏

目录：

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

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

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

（4） Http状态信息总结

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

test.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>先能看懂下面这个代码，再学习AJAX。</title>
</head>
<body>

<script type="text/javascript">
    function sayHello(){
        alert("hello javascript")
    }
</script>

<!--需求：页面上有一个按钮，用户点击按钮之后，执行一段JS代码。-->
<input type="button" value="hello" onclick="sayHello()">

<!--以上的实现方式，当然，大家都是没有问题的，但是通过JS代码给按钮绑定事件，这个你会吗？-->
<input type="button" value="hello2xxxxxxxxxxxxxxx" id="helloBtn">

<script type="text/javascript">
    // 页面加载完毕之后，给id="helloBtn"的元素绑定鼠标单击事件
    // 这个function就是一个回调函数，这个回调函数什么时候执行？当load事件发生之后，这个回调函数才会执行。
    // 什么是load事件？load事件什么时候发生？注意：页面加载完毕之后，load事件发生。
    window.onload = function(){
        // 获取id="helloBtn"的对象
        var helloBtn = document.getElementById("helloBtn");
        // 给id="helloBtn"元素绑定click事件
        // 这个function也是一个回调函数，这个回调函数什么时候执行？
        // 当helloBtn被click的时候，被鼠标单击的时候，这个回调函数会执行。
        // 鼠标单击五次，这个回调函数就会被调用五次。
        helloBtn.onclick = function(){
            //alert("hello javascript2")
            //alert(this)
            // 这个回调函数中的this是谁呢？
            // this是发生事件的事件源对象。是按钮发生了鼠标单击，那么this代表的就是这个按钮对象。
            alert(this.value)
        }
    }
</script>

</body>
</html>

点击hello

点击hello2xxxxxxxx

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

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

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

ajaxGet.html:分为4步过程

<!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("helloBtn").onclick = function (){
            // 发送ajax get请求
            //console.log("发送ajax get请求")
            // 1.第一步：创建AJAX核心对象XMLHttpRequest
            var xhr = new XMLHttpRequest();

            // 2.第二步：注册回调函数
            // 这是一个回调函数，这个函数在XMLHttpRequest对象的readyState状态值发生改变的时候被调用。
            xhr.onreadystatechange = function (){
                // 这里的回调函数会被调用多次。
                // 0 -> 1 被调用一次
                // 1 -> 2 被调用一次
                // 2 -> 3 被调用一次
                // 3 -> 4 被调用一次

                //console.log(xhr.readyState) 会输出0-4

                // 当XMLHttpRequest对象的readyState的状态是4的时候，表示响应结束了。下方的this表示xhr
                /*if (xhr.readyState == 4) {

                }*/

                if (this.readyState == 4) {
                    // 响应结束了。
                    //console.log("响应结束了")
                    // 响应结束之后，一般会有一个HTTP的状态码。
                    // HTTP状态码常见的包括：200表示成功了，404表示资源找不到，500表示服务器内部错误。
                    // HTTP状态码是HTTP协议的一部分，HTTP协议中规定的。服务器响应之后都会有一个状态码。
                    // 获取HTTP状态码
                    //console.log("HTTP响应状态码：" + this.status)
                    if (this.status == 404) {
                        alert("对不起，您访问的资源不存在，请检查请求路径")
                    } else if(this.status == 500){
                        alert("对不起，服务器发生了严重的内部错误，请联系管理员")
                    } else if(this.status == 200){
                        //alert("响应成功，完美")
                        // 200表示完全响应完毕，成功结束了。
                        // 通过XMLHttpRequest对象获取响应的信息。
                        // 通过XMLHttpRequest对象的responseText属性来获取响应的信息。
                        //alert(this.responseText)

                        // 把响应信息放到div图层当中，渲染
                        document.getElementById("mydiv").innerHTML = this.responseText
                    }

                }
            }

            // 3.第三步：开启通道（open只是浏览器和服务器建立连接，通道打开，并不会发送请求）
            // XMLHttpRequest对象的open方法
            // open(method, url, async, user, psw)
            // method: 请求的方式，可以是GET，也可以是POST，也可以是其它请求方式。
            // url：请求的路径
            // async: 只能是true或者false，true表示此ajax请求是一个异步请求，false表示此ajax请求是一个同步请求。（大部分请求都是true，要求异步。极少数情况需要同步，以后再说。）
            // user：用户名 pwd: 密码，用户名和密码是进行身份认证的，说明要想访问这个服务器上的资源，可能需要提供一些口令才能访问。需不需要用户名和密码，主要看服务器的态度。
            xhr.open("GET", "/ajax/ajaxrequest1", true);

            // 4.第四步：发送请求
            xhr.send()
        }
    }
</script>

<!--给一个按钮，用户点击这个按钮的时候发送ajax请求-->
<input type="button" value="hello ajax" id="helloBtn">

<!--给一个div图层，ajax接收了响应的数据之后，在div中进行渲染。-->
<div id="mydiv"></div>

</body>
</html>

AjaxRequestServlet:

package com.bjpowernode.ajax.servlet;

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

@WebServlet("/ajaxrequest1")
public class AjaxRequestServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        /*String s = null;
        s.toString();
        返回500
        */

        // Servlet向浏览器响应一段数据
        PrintWriter out = response.getWriter();

        // out对象向浏览器输出信息
        // 服务器的代码实际上和以前的代码还是完全一样的。
        // 只不过这个out在响应的时候，浏览器客户端的XMLHttpRequest对象会接收到这个响应的信息。
        out.print("<font color='red'>welcome to study ajax!!!!</font>");
    }
}

点击按钮：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送ajax get请求</title>
</head>
<body>
<script type="text/javascript">

    //1. 创建AJAX核心对象
    var xhr = new XMLHttpRequest();

    window.onload = function () {
        document.getElementById("btn").onclick = function () {
            //2. 注册回调函数
            xhr.onreadystatechange = callback
            //3. 开启通道
            xhr.open("GET", "/ajax/ajaxrequest2", true)
            //4. 发送请求
            xhr.send()
        }
    }

    function callback(){
        if(xhr.readyState == 4){
            if (xhr.status == 200) {
                document.getElementById("mydiv").innerHTML = xhr.responseText
            }else{
                alert(xhr.status)
            }
        }
    }
</script>
<button id="btn">发送ajax get请求</button>

<div id="mydiv"></div>
</body>
</html>

AjaxRequest22Servlet：

package com.bjpowernode.ajax.servlet;


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


@WebServlet("/ajaxrequest22")
public class AjaxRequest22Servlet 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("<font color='red'>用户名已存在！！！</font>");

    }
}

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

ajaxGet2.html：

<!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 () {
            //1. 创建AJAX核心对象
            var xhr = new XMLHttpRequest();
            //2. 注册回调函数
            xhr.onreadystatechange = function(){
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        // 通过XMLHttpRequest对象的responseText属性可以获取到服务器响应回来的内容。
                        // 并且不管服务器响应回来的是什么，都以普通文本的形势获取。（服务器可能响应回来：普通文本、XML、JSON、HTML...）
                        // innerHTML属性是javascript中的语法，和ajax的XMLHttpRequest对象无关。
                        // innerHTML可以设置元素内部的HTML代码。（innerHTML可以将后面的内容当做一段HTML代码解释并执行）
                        //document.getElementById("myspan").innerHTML = this.responseText
                        document.getElementById("mydiv").innerHTML = this.responseText
                        // innerText也不是AJAX中的，是javascript中的元素属性，和XMLHttpRequest无关。
                        // innerText也是设置元素中的内容，但是即使后面是一段HTML代码，也是将其看做一个普通字符串设置进去。
                        //document.getElementById("myspan").innerText = this.responseText
                    }else{
                        alert(this.status)
                    }
                }
            }
            //3. 开启通道
            // 获取到用户填写的usercode和username
            var usercode = document.getElementById("usercode").value
            var username = document.getElementById("username").value
            //xhr.open("GET", "/ajax/ajaxrequest2?usercode="+usercode+"&username="+username, true)

            // 避免低版本的IE浏览器，走缓存，搞一个时间戳
            //alert(new Date().getTime())
            //xhr.open("GET", "/ajax/ajaxrequest2?t="+new Date().getTime()+"&usercode="+usercode+"&username="+username, true)
            //或者加一个随机数，解决缓存问题
            xhr.open("GET", "/ajax/ajaxrequest2?t="+Math.random()+"&usercode="+usercode+"&username="+username, true)
            //4. 发送请求
            xhr.send()
        }
    }
</script>
usercode<input type="text" id="usercode"><br>
username<input type="text" id="username"><br>
<button id="btn">发送ajax get请求</button>
<span id="myspan"></span>
<div id="mydiv"></div>
</body>
</html>

控制器：AjaxRequest2Servlet：

package com.bjpowernode.ajax.servlet;


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


@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("<font color='red'>用户名已存在！！！</font>");

        // 获取ajax get请求提交的数据
        String usercode = request.getParameter("usercode");
        String username = request.getParameter("username");

        out.print("usercode=" + usercode + ", username=" + username);

    }
}

（4） Http状态信息总结

喵俺第一专栏

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax：js绑定事件、ajax发送Get请求

Ajax发送请求需要一个核心的对象XMLHttpRequest对象，浏览器内置了这个对象，现代浏览器都是支持的。ajaxGet3.html单独写一个函数callback，然后再调用。readyState表明请求和响应的处理过程。ajaxGet.html分为4步过程。点击hello2xxxxxxxx。......
复制链接

扫一扫