2022-9-1 第一组 (≥▽≤) 学习笔记

目录

• 1.Ajax
  • JS原生的Ajax
    • GET请求
    • POST请求
  • JQuery的Ajax
    • 发送GET请求
    • 发送POST请求
    • 完整写法
  • Vue的Ajax（aixos）
    • GET请求
    • POST请求
  • 注意点：

1.Ajax

• 异步刷新（局部刷新），前端技术——可以给后台发请求
• 四种发请求的方式
  • 地址栏
  • a标签
  • form表单
  • location.href或window.open()
• 异步：整个页面不会全部刷新，只有某个局部在刷新
  • 例如：验证用户名是否存在
• 刷新：
• 请求头：
  • post请求才有请求体
• Ajax发起请求，后台给出的响应会回到Ajax

JS原生的Ajax

• re'a'dread
  • 0——初始化成功，open未调用
  • 1——open被调用，建立的连接
  • 2——send被调用，可以获取状态行和响应头
  • 3——可以拿到响应体，响应体加载中
  • 4——响应体下载完成，可以直接使用responseText

GET请求

        // 向后台发请求
        // 使用ajax
        let xhr=new XMLHttpRequest();
        // 设置请求的方式和URL
        xhr.open("GET","hello?username="+user);
        // 发请求
        xhr.send(null);
        // 指定xhr的状态处理函数
        xhr.onreadystatechange=function () {
            if (this.readyState === 4){
                // 通过xhr的responseText获取到对应的响应体
                span.innerText=xhr.responseText;
            }
        };

POST请求

        // 向后台发请求
        // 使用ajax
        let xhr=new XMLHttpRequest();
        // 发送POST请求
        xhr.open("POST","hello");
        // 设置请求头信息
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        // 发请求,设置请求体
        xhr.send("username="+user);
        // 指定xhr的状态处理函数
        xhr.onreadystatechange=function () {
            if (this.readyState === 4){
                // 通过xhr的responseText获取到对应的响应体
                span.innerText=xhr.responseText;
            }
        };

JQuery的Ajax

发送GET请求

 		$.get("hello?username=" + user, function (data) {
            alert(data)
        });

发送POST请求

        $.post("hello","username=" + user, function (data) {
            alert(data)
        });

完整写法

        $.ajax({
            url:"hello",
            data:{"username=":username},
            type:"post",
            success:function (res) {
            },
            error:function (res) {

            },
        });

Vue的Ajax（aixos）

对原生的Ajax的一个封装

ES6的：Promise语法

GET请求

• aixos发送GET请求，这个请求中如果有参数，还是一个默认的以文档流的形式发送，和之前的任何一种请求方式没有任何区别。

  •             get:function(){
    
                    axios.get("wea?city="+this.city).then(function (response) {
                        app1.msg2=response.data;
                    });
                },
    

POST请求

• aixos发送POST请求，这个请求中如果有参数，会把请求体转成json串，然后发给后台

  •             post:function(){
                    axios.post("wea",{"city":this.city}).then(function (response) {
                        app1.msg2=response.data;
                    })
                },
    

  【封装对象的前提：json串中的数据的key和对象的属性名要一致】

注意点：

1. 【使用Ajax发送请求，页面是不可以通过后台跳转页面，如果需要跳转页面，也是通过前端的JS来跳转，不可能通过Servlet来跳转】
2. 【Ajax和form表单不能同时使用】
   1. Ajax：不能跳转页面
   2. form表单：一定要跳转页面的