2022-09-01 第四组 王佳齐 学习笔记

ajax概念

ajax：异步刷新，前端技术，给后台发请求

异步：整个页面不会全部刷新只有某个局部在刷新。

四种发请求的方式：

1.form表单

2.a标签

3.地址栏

4.location.href.window.open

注意：

一、使用ajax发送请求，页面是不可以通过后台跳转的。如果需要跳转页面也是通过前端的JS来跳转，不可能是通过Servlet跳转二、ajax和form表单一定不能同时使用ajax：不跳页面form：一定要跳走两者相互冲突

 

请求体：post才有请求体

 

ajax发起请求给后台，后台的响应会回到ajax的响应处理函数中

readyState：

0：-----------xhr被创建成功，open方法未调用

1：-----------open被调用，未建立连接

2：-----------send被调用，可以获取状态行和响应头

3：-----------可以拿到响应体，响应体加载中

4：-----------响应体加载成功，可以直接使用resposeText

代表请求可以正常发送，响应可以正常接收

js中的ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>
        账号:<input type="text" onblur="valid()" id="username" name="username"><span id="span"></span>
    </p>
<script>
    function valid(){
        let username = document.getElementById("username").value;
        let span = document.getElementById("span");
        //向后台发送请求
        //使用ajax
        //XMLHttpRequest是ajax的支持对象
        let xhr = new XMLHttpRequest();
        //设置请求方式和地址
        //传参
        xhr.open("GET","valid.do?username="+username);
        //发地址
        xhr.send(null);
        //post请求传参
        /**
         * //发送post请求
         * xhr.open("POST","valid.do");
         * //设置请求头信息
         * //Content-type：选择内容类型
         * xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
         * //传参
         * xhr.send("username="+username);*/




        //指定xhr的状态变化的处理函数
        xhr.onreadystatechange = function (){
            //正常接收后台响应
            if (this.readyState === 4){
                //通过xhr的responseText获取对应的响应体
                switch (this.responseText){
                    case "1":
                        span.innerText="账号验证成功！";
                        break;
                    case "0":
                        span.innerText = "账号输入错误！"
                }


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

 

JQuery中的ajax

共有三种发送请求的方式

一、发送get请求

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

 

二、发送post请求

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

 

三、完整写法，JQuery中的ajax

$.ajax({
                url: "valid.do",
                type: "post",
                data: formData,
                success : function(res) {
                    console.log(res);
                },
                error : function(res) {
                    console.log(res);
                }
            });

 

注意：这里的formData需要在jquery-3.0.0.min.js版本中才好使

 

formData： formData构建一个表单数据对象

formData是JS的内置对象，和JQuery无关，和Vue无关

firmData使用方法：

             let formData = new FormData();
            formData.append("username",username);
            formData.append("password",password);

 

 

axios:对原生的ajax的一个封装，独立

特点：发送的get请求，如果带参，还是一个默认的一文档流发送，和之前的任何一种请求方式没有任何不同；

但是如果发送的是post请求，会把文档流转成json串再传送给后台；

而那个方法只认识文档流默认字符串，所以想要接收axios中的post请求需要用缓冲字符输入流；

BufferReader reader = request.getReader();
String line = reader.readLine;

 

注意：但也不一定

一、get请求，后台没有对应的对象来封装，不能有私密数据。比如分页查询。

二、post请求，后台往往都是有对象跟着的，数据数据之间有关系，能够封装成对象。

 

posted @ 2022-09-01 18:35  Iamnotarapper  阅读(40)  评论(0)    收藏  举报
ヾ(≧O≦)〃嗷~