javaweb01

最新推荐文章于 2022-10-08 17:52:27 发布

顺其自然6

最新推荐文章于 2022-10-08 17:52:27 发布

阅读量186

点赞数 2

文章标签： servlet ajax javascript

本文链接：https://blog.csdn.net/qq_56951318/article/details/126685321

版权

Ajax

ajax：异步刷新（局部刷新），前端技术。给后台发请求。
异步：整个页面不会全部刷新，只有某个局部在刷新。
实例： 验证用户名是否存在。
使用ajax发送请求,不能通过后台跳转页面,
只能通过js跳转,如果需要

ajax和form表单不能同时使用()
ajax: 不跳页面
form :一定会跳转

只有post请求有请求体
ajax发起请求,后台给出的响应会回到ajax的响应处理函数中

readyState：
0： xhr被创建成功，open方法未调用
1： open被调用，建立的连接
2： send被调用，可以获取状态行和响应头
3：可以拿到响应体，响应体加载中
4：响应体下载完成，可以直接使用responseText。
代表请求可以正常发送，响应能够正常接收。

axios : 对原生ajax的一个封装,应用了大量的ES6语法,promise语法

1,get请求后台没有对应的对象来封装 (参数之间没有什么关系), 不能有私密数据
2, post请求, 后台都是有对象跟着,参数可以封装成一个对象,比如 user的id,name,属性

* axios发送get请求，
* 请求中如果有参数，还是一个默认的以文档里的形式发送，和之前的任何一种请求方式没有任何区别。
* axios发送post请求，
* 请求中如果有参数，会把post请求的请求体转成json串，然后再发给后台。

4种发请求的方式：

1、地址栏
2、a标签
3、form表单
4、location.href或window.open()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    账号:　<input type="text" id="username"> <span id="msg"></span> <br>
        <input type="button" onclick="valid()" value="验证">

<script>
    //ajax 异步刷新
    function valid(){
        let username = document.querySelector("#username").value;
        let msg = document.querySelector("#msg");
        //js 原生的ajax,XMLHttpRequest是ajax的支持对象
        let xhr = new XMLHttpRequest();
        //设置请求的方式和地址
        // 发送 GET 请求
        xhr.open("GET","valid2.do?username="+username);
        // 发送 post请求,需要设置请求头信息
        xhr.open("POST","valid2.do");
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
         //发请求,并且设置请求体
        xhr.send("username="+username+"&password=123456");
        xhr.onreadystatechange = function (){
            if(this.readyState===4){
                switch (this.responseText){
                    case "1":
                        msg.innerHTML="用户名可用";
                        break;
                    case 0:
                        msg.innerHTML="用户名已存在";
                }

            }
        }
    }
</script>
</body>
</html>

jquery 的ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

账号：<input type="text" id="username"><span id="msg"></span>
<button id="validBtn">验证</button>

<script src="static/js/jquery-3.0.0.min.js"></script>
<script>
    $(function() {
        $("#validBtn").click(function() {
            let username = $("#username").val();
            let password = "123456";

            // formData构建一个表单数据对象
            // formData是JS的内置对象，和JQuery无关，和Vue无关
            let formData = new FormData();
            formData.append("username",username);
            formData.append("password",password);

            // 发送ajax请求
            // 3.完整写法
            $.ajax({
                url: "valid.do",
                type: "post",
                data: formData,
                success : function(res) {
                    console.log(res);
                },
                error : function(res) {
                    console.log(res);
                }
            });


            // 2.发送post请求
            // $.post("valid.do","username=" + username,function (data) {
            //     if(data == "1") {
            //         $("#msg").html("用户名可用...")
            //     }
            //     if(data == "0") {
            //         $("#msg").html("用户名已存在...")
            //     }
            // });

            // 1.发送get请求
            // $.get("valid.do?username=" + username,function(data) {
            //     // data就是后台回来的响应体
            //     console.log(data);
            //     if(data == "1") {
            //         $("#msg").html("用户名可用...")
            //     }
            //     if(data == "0") {
            //         $("#msg").html("用户名已存在...")
            //     }
            // });
        });
    })
</script>

</body>
</html>

转发和重定向的区别?

1、请求次数

重定向是浏览器向服务器发送一个请求并收到响应后再次向一个新地址发出请求，转发是服务器收到请求后为了完成响应跳转到一个新的地址；重定向至少请求两次，转发请求一次；

2,重定向两次请求不共享数据,转发一次请求共享数据

3,重定向可以跳转到任意url,转发只能跳转本站点资源

4,重定向是客户端行为,转发是服务器端行为

顺其自然6

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
javaweb01

转发和重定向的区别?1、请求次数重定向是浏览器向服务器发送一个请求并收到响应后再次向一个新地址发出请求，转发是服务器收到请求后为了完成响应跳转到一个新的地址；重定向至少请求两次，转发请求一次；2,重定向两次请求不共享数据,转发一次请求共享数据3,重定向可以跳转到任意url,转发只能跳转本站点资源4,重定向是客户端行为,转发是服务器端行为
复制链接

扫一扫