Ajax学习笔记

司妤

已于 2023-12-08 20:29:02 修改

阅读量59

点赞数 1

分类专栏：复习文章标签： http 网络协议网络

于 2023-05-03 20:04:06 首次发布

本文链接：https://blog.csdn.net/weixin_62780797/article/details/130464203

版权

复习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

http协议请求报文与响应文本结构

行：请求方式路径

对Ajax格式的解释（配合Jquery使用）

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width" ,initial-scale="1.0">
    <title>获取经纬度</title>
    <style>
        .box1 {
            width: 300px;
            height: 500px;
            border: solid 1px #903;
        }
    </style>
</head>
<body>
<button id="btn">获取经纬度</button>
<div id="data-container"></div>
<script type="text/javascript" src="js/jquery-3.6.4.js"></script>
<script>
    $("#btn").click(function (){
        $.ajax({
            type:"get",//请求方式
            url:"https://api.oioweb.cn/api/ip/geocoder",//请求地址
            data:{//请求数据，json对象,如果没有参数则不需要填写里面
                lng:112.57845,//该接口地址的经度
                lat:26.89958,
                msg:"success"
            },
            dataType:"json",//预期返回数据类型为json格式
            success:function (data) {//此处data作为形参名，代表的是返回的数据
                console.log(data);
                //将数据显示到页面上的方式
         $("#data-container").append(`<div class="box1"><span>${data.result.address}</span><span>${data.result.location.lat},${data.result.location.lng}</span></div>`)
            }
        })
    })
</script>
</body>
</html>

$.get和$.post的使用

<script type="text/javascript" src="js/jquery-3.6.4.js"></script>
//基本语法格式如下
<script>
        $.get("https://api.oioweb.cn/api/ip/geocoder",{},function (data){
            console.log(data);
        });

        $.post("https://api.oioweb.cn/api/ip/geocoder",{},function (data){
            console.log(data);
        });
</script>

使用jQuery发送post请求的例子

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width" ,initial-scale="1.0">
    <title>post注册例子</title>
    <style>
      label, input {
        display: block;
        margin-bottom: 10px;
      }
    </style>
</head>
<body>
    <div class="box-re">
      <form action="#" method="post">
        <label for="username">昵称:</label>
        <input type="text" id="username" placeholder="请输入昵称" name="username" required>
        <label for="email">账号:</label>
        <input type="email" id="email" placeholder="请输入账号" name="email" required>
        <label for="password">密码:</label>
        <input type="password" id="password" placeholder="请输入密码" name="password" required>
        <button type="submit" id="btn">注册</button>
      </form>
    </div>
    <script type="text/javascript" src="js/jquery-3.6.4.js"></script>
    <script>

      $(document).ready(function() {
        $("#btn").click(function (){
          // 获取表单数据  .val相当于value，取值用
          var formData = {
            name: $("#username").val(),
            username: $("#email").val(),
            password: $("#password").val()
          };

          $.ajax({
            type:"post",//请求方式
            url: "http://lmxdev.cn:9999/lrsr/api/v1/auth/web-register",//请求地址
            data:{//请求数据，json对象,如果没有参数则不需要填写里面
              formData
            },
            dataType:"json",//预期返回数据类型为json格式
            success:function (data) {//此处data作为形参名，代表的是返回的数据
              console.log(data);
            }
          })
        })

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

express框架的基本使用（写在js中，一般又后端人员来写）

① server.js

//1.引入express
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server',(request,response)=>{
    //设置响应头
    response.send('hello express')
    //设置响应体
    response.send('HELLO AJAX')
});
//可以适应所有类型
app.all('/json-server',(request,response)=>{
//注意：这里的json-server是访问路径
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应头
    response.setHeader('Access-Control-Allow-Heafers','*');
    //响应一个数据
    const data = {
        name:'atguigu'
    };
    //设置响应体
    response.send('HELLO AJAX JSON');
});

4.监听端口启动服务
app.listen(8000,()=>{
    console.log("服务器已经启动，8000端口监听中...")
    //运行代码在控制台中输入 node express.js
    //打开域名网址，可在网页中看见监听端口中输出的文字
});

注：express框架需要在Node.js的环境支持下使用

解释：上述中的/json-server与/server都是访问路径，对于request与response一个为入口，一个为出口，当前端通过request进行数据请求提问等，后端通过response作出回应，同时调用访问路径/json-server来进行回答。

Ajax请求的基本操作

① GET.html

//html部分(此处省略，简写一下)
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
</body>

//js部分
<script>
//获取button元素
const btn=document.getElementsByTagName('button')[0];//使用了DOM文档
//Tagname是对组件名使用的，[0]是数组下标，表示这是该项目中第几个button标签
const result = document.getElementById("result");
//ById是对自定义标签名称的使用，Id不允许重复，则不需要用数组来区分
//绑定事件
btn.onclick = function(){
    //1.创建对象
    const xhr = new XMLHttpRequest();
    //2.初始化 设置请求方法和url路径
    xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300');//在Ajax中传参，格式如此
                                               //用问号？分割，a、b、c为所要传的参数
    //3.发送
    xhr.send();
    //4.事件绑定 处理服务端返回的结果
    //on when 当...时候
    //readystate 是 xhr 对象中的属性，表示状态0 1 2 3 4
    //chaange 改变
    xhr.onreadystatechange = function(){
        //判断（服务端返回了所有的结果）
        if(xhr.readyState===4){
            //处理结果 行 头 空行 体
            //响应
            //console.log(xhr.status);状态码
            //console.log(xhr.statusText);状态字符串
            //console.log(xhr.getAllResponseHeaders());所有响应头
            //console.log(xhr.response);响应体

            //设置result的文本
            result.innerHTML = xhr.response;
        }
    }
}
</script>

Ajax发送post请求的操作

① POST.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width" ,initial-scale="1.0">
    <title>Ajax post</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #903;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        //获取元素对象
        const result = document.getElementById("result");
        //绑定事件
        result.addEventListener("mouseover",function (){
           //1.创建对象
           const xhr = new XMLHttpRequest();
           //2.初始化 设置类型与URL
           xhr.open('POST','http://127.0.0.1:8000/server');
           //请求头设置
           xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
           //3.发送
           //数据传输的几种方式，引号中的为数据
           xhr.send('a=100&b=200&c=300');
           xhr.send('a:100&b:200&c:300');
           xhr.send('123456789');
           //4.事件绑定
           xhr.onreadystatechange = function (){
               //判断
               if (xhr.readyState===4){
                   if (xhr.status>=200&&xhr.status<300){
                       //处理服务端返回的结果
                       result.innerHTML = xhr.response;
                   }
               }
           }
        });
    </script>
</body>
</html>

服务端响应json部分

① JSON.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width" ,initial-scale="1.0">
    <title>JSON响应</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #903;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById('result');
        //绑定键盘按下事件
        window.onkeydown = function (){
            //发送请求
            const xhr = new XMLHttpRequest();
            //设置响应体的数据的类型  ②
            xhr.responseType = 'json';
            //初始化
            xhr.open('GET','http://localhost:8080/json-server');
            //发送
            xhr.send();
            //事件绑定
            xhr.onreadystatechange = function (){
                if (xhr.readyState === 4){
                    if (xhr.status >= 200 && xhr.status <300){
                        //此时服务器返回的是一个字符串，我们可手动对数据进行转换
                        let data = JSON.parse(xhr.response);
                        result.innerHTML = data.name;//拿到上方express框架里面的atguigu
                        //自动转换  需要在上面写一个②的代码
                        result.innerHTML = xhr.response.name;
                    }
                }
            }
        }
    </script>
</body>
</html>

IE缓存问题

① IE缓存.html

在IE浏览器中，可能会出现缓存问题，此时只需要在以下代码中加入一个Date日期的参数

请求超时与网络异常提醒

①超时.html

加以下一段代码，并配合后端即可，此处设定的为2s未得到回应，就弹窗提示。

重复发送请求的解决办法

①重复请求.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width" ,initial-scale="1.0">
    <title>重复请求问题</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #903;
        }
    </style>
</head>
<body>
    <button>点击发送</button>
    <script>
        //获取元素对象
        const btns = document.querySelectorAll('button');
        let x = null;
        //标识变量
        let isSending = false;//是否正在发送Ajax请求

        btns[0].onclick = function (){
            //判断标识变量
            if (isSending) x.abort();//如果正在发送，则取消该请求，创建一个新的请求
            x = new XMLHttpRequest();
            //修改 标识变量的值
            isSending = true;
            x.open("GET",'http://localhost:8080//delay');
            x.send();
            x.onreadystatechange = function (){
                if (x.readyState === 4){
                    //修改标识变量
                    isSending = false;
                }
            }
        }
    </script>
</body>
</html>