AJAX第一天

最新推荐文章于 2024-07-06 19:25:43 发布

鬼⃨

最新推荐文章于 2024-07-06 19:25:43 发布

阅读量35

点赞数

文章标签： ajax 学习 javascript java 后端前端

本文链接：https://blog.csdn.net/qq_57076620/article/details/132867013

版权

传统请求及缺点

请求

1、直接在浏览器地址栏上输入url

2、超链接

<a href="/项目名/请求路径">传统请求（超链接）</a>

3、form表单提交

<form action="" methord="get">
    <input type="submit" value="传统请求">
</form>

4、通过js代码来发送请求

<input type="button" value="传统请求" onclik="sendRequest()">

<script type="text/javascript">
    function sendRequest(){
    //发送请求
    //window.location.herf = ""
    document.location.herf = "/old/request"
    }
</script>

缺点

会清空整个页面，用户体验不连贯。

Ajax概述（JavaScript代码）

优点

在浏览器中发送异步请求，类似于多线程并发。（多个请求是异步的谁也不干扰谁）

请求发送之后不会清空页面（页面局部刷新）

学前掌握

看懂以下代码（通过JS代码给按钮绑定事件）

<input type="button" value="hello"onclick="sayHello()">
<!--以上的实现方式，当然，大家都是没有问题的，但是通过JS代码给按钮绑定事件，这个你会吗？-->
<input type="button" value="hello2"id="helloBtn">
<script type="text/javascript">
//页面加载完毕之后，给id="helloBtn"的元素绑定鼠标单击事件
// 什么是Load事件？10ad事社4万怎出是时行oad事件发生之后，这个回调函数才会执行。
//什么是Load事件?Load事件什么时候发生？注意：页面加载完毕之后，load事件发生。
window.onload = function()I
// 获取id="helloBtn"的对象
var helloBtn = document.getElementById("helloBtn");
// 给id="helloBtn"元素绑定cLick事件
//这个function也是一个回调函数，这个回调函数什么时候执行？
// 当helloBtn被click的时候，被鼠标单击的时候，这个回调函数会执行。
helloBtn.onclick = function()f
alert("hello javascript2")
</script>

XMLHttpRequest对象

Ajax请求以及接受响应都是以来这个对象

ajax的使用

<body>

    <script type="text/javascript">
        window.onload = function (){
            document.getElementById("helloBtn").onclick = function () {
                //发送ajax请求
                //console.log()是将内容输出到浏览器控制台
                //console.log("发送Ajax get请求")
                //1.第一步：创建Ajax核心对象XMLHttpRequest
                var xhr = new XMLHttpRequest();
                //2.注册回调函数
                //回调函数在XMLHttpRequest对象的readystate状态值发生改变时被调用
                xhr.onreadystatechange = function () {
                    //回调函数会被多次调用（0->4）
                    //当对象的readystate为4时表示响应结束
                    //console.log(xhr.readyState)
                    if(this.readyState==4){
                        //console.log("响应结束了")
                        //响应结束之后会有HTTP状态码
                        //获取HTTP状态码
                        //console.log("http状态码："+this.status)
                        if(this.status == 404){
                            alert("对不起，访问资源不存在")
                        }else if(this.status == 200){
                            //alert("完美")
                            //通过XMLHttpRequest对象获取响应信息（responseText属性）
                            //alert(this.responseText)

                            //把响应信息放到div图层中，渲染
                            document.getElementById("mydiv").innerHTML = this.responseText
                        }else if(this.status == 500){
                            alert("服务器内部错误")
                        }
                    }
                }
                //3.开通通道（只是打开通道，不会发送请求）
                //open方法
                //method:请求方式：get，post，其他
                //url:请求路径
                //async:ture（异步请求），false（同步请求）
                //user:用户名；pwd:密码（访问资源的口令）
                xhr.open("GET","/ajax2/ajaxrequest1",true)
                //4.发送请求
                xhr.send()
            }
        }

    </script>
    <input type="button" value="hello ajax" id="helloBtn">

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

后端代码：

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.awt.datatransfer.StringSelection;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/ajaxrequest1")
public class AjaxRequest1Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        /*String s = null;
        s.toString();*/
        //Servlet像浏览器响应一段数据
        PrintWriter out = response.getWriter();
        //out对象向浏览器输出信息
        //与之前不同的是，out在相应的时候输出信息会被XMLHttpRequest对象接受保存在responseText中
        out.print("<font color='red'> Ajax第一天 <font>");

    }
}