2022-09-02 第六小组 瞒春 学习笔记

前言

今天进行Ajax的学习

目录

  • 前言
  • ✏️Ajax
    • ✒️GET请求
    • ✒️POST请求
  • ✏️JQuery的Ajax
    • ✒️发送GET请求
    • ✒️发送POST请求
  • ✏️Vue的Ajax(aixos)
    • ✒️GET请求
    • ✒️POST请求

✏️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请求

// 向后台发请求// 使用ajaxlet 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请求

// 向后台发请求// 使用ajaxlet 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和对象的属性名要一致】

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

你可能感兴趣的