2022-9-3 学习笔记

weixin_45777469

已于 2022-09-05 21:18:13 修改

阅读量242

点赞数

CC 4.0 BY-SA版权

文章标签： servlet ajax javascript

于 2022-09-05 21:16:38 首次发布

本文链接：https://blog.csdn.net/weixin_45777469/article/details/126713668

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>