AJAX相关知识

最新推荐文章于 2024-06-28 16:55:27 发布

蘩祁11

最新推荐文章于 2024-06-28 16:55:27 发布

阅读量70

点赞数

文章标签： ajax okhttp 前端

本文链接：https://blog.csdn.net/m0_73783119/article/details/132134067

版权

AJAX 简介

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。
通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。
AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

XML 简介

XML 可扩展标记语言。
XML 被设计用来传输和存储数据。
XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，
全都是自定义标签，用来表示一些数据

一.http

HTTP

HTTP（hypertext transport protocol）协议『超文本传输协议』，协议详细规定了浏览器和万维网服务器之间互相通信的规则。
约定, 规则

请求报文

重点是格式与参数

行      POST  /s?ie=utf-8  HTTP/1.1 
>       方法  url  协议版本
头      Host: atguigu.com
        Cookie: name=guigu
        Content-type: application/x-www-form-urlencoded
        User-Agent: chrome 83
空行
体      username=admin&password=admin

所有的格式都是名称，冒号，空格，内容
POST请求，请求体不为空，另一个请求体为空

响应报文

行      HTTP/1.1  200  OK
>协议版本 响应状态码 响应状态字符串
头      Content-Type: text/html;charset=utf-8
        Content-length: 2048
        Content-encoding: gzip
空行 （必须有）   
体（主要的返回结果，对内容解析，然后对页面进行渲染）    
  <html>
            <head>
            </head>
            <body>
                <h1>尚硅谷</h1>
            </body>
        </html>

404 找不到
403 禁止
401 未授权
500 内部错误
200 OK

浏览器中Request Header（载荷）：里面装的是对url的解析

二.express框架

在最外层中运行“在终端中打开”，然后输入npm init --yes，启动终端,npm i exprss创建express框架
如果端口显示正在被使用，可以在正在使用的端口中输入ctrl C来释放端口
在浏览器输入127.0.0.1：8000/server会出现响应体
url参数在平时写在地址栏里面，在AJAX GET中一样是在url后面缀参数，用？分割然后加参数的名字

 xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300');

在POST中

            xhr.send('a=100&b=200&c=300');
            // 还可以写成
            xhr.send('a:100&b:200&c:300')

请求体的格式是十分灵活的

express的基本使用

// 1.引入express
 const express=require('express');
// 2.创建应用对象
const app=express();

// 3.创建路由规则
// request 是对请求报文的封装，response是对响应报文的封装
app.get('/',(request,response)=>{
    // 设置响应
    response.send('HELLO EXPRESS');
    
});

// 4.监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动,8000 端口监听中");
})

三.原生AJAX

AJAX 的使用

核心对象

XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的。

使用步骤

创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
设置请求信息
xhr.open(method, url);
//可以设置请求头，一般不设置
发送请求
xhr.send(body) //get 请求不传 body 参数，只有 post 请求使用
接收响应
//xhr.responseXML 接收 xml 格式的响应数据
//xhr.responseText 接收文本格式的响应数据

xhr.onreadystatechange = function (){
if(xhr.readyState == 4 && xhr.status == 200){
var text = xhr.responseText;
console.log(text);
}
}

1.get

    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        // 获取button元素
        const btn=document.getElementsByTagName('button')[0];
        const result=document.getElementById("result");
        // 绑定事件
        btn.onclick=function(){
            // 1.创建对象
            const xhr =new XMLHttpRequest
            // 2.初始化 设置请求方法和url
            // xhr.open('发送什么样的请求','url');
            // url参数在平时写在地址栏里面，在AJAX中一样是在url后面缀参数，用？分割然后加参数的名字
            // a=100,b=200,c=300
            xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300');
            // 3.发送
            xhr.send();
            // 4.事件绑定  处理服务端返回的结果
            // on when当...的时候
            // readystate 是xhr对象中的属性 表示状态 0（初始化） 1（open方法调用完毕） 2（send方法调用完毕） 3（服务端返回部分结果） 4（服务端返回了所有结果）
            // change 改变
            xhr.onreadystatechange=function(){
                // 判断  是不是到最后一步
                if(xhr.readyState===4)
                {
                    // 判断 响应状态码 200 404 403 401 
                    // 2开头的都是成功
                    // 判断是否成功
                    if(xhr.status>=200&&xhr.status<300)
                    {
                        // 处理结果 行 头 空行 体
                        // 1.响应行
                        // console.log(xhr.status);//状态码
                        // console.log(xhr.statusText);//状态字符串
                        // console.log(xhr.getAllResponseHeaders());//所有响应头
                        // console.log(xhr.response);//响应体

                        // 设置result的文本
                        result.innerHTML=xhr.response;
                    }
                    else
                    {

                    }
                }

            }

        }
    </script>
</body>

2.POST

<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');
            // 自定义
            xhr.setRequestHeader('name','res');
            // 3.发送
            // xhr.send('a=100&b=200&c=300');
            // 还可以写成
            xhr.send('a:100&b:200&c:300')


            // 4.事件绑定
            xhr.onreadystatechange=function(){
                // 判断
                if(xhr.readyState===4)
                {
                    if(xhr.status>=200&&xhr.status<300)
                    {
                        // 处理服务端返回结果
                        result.innerHTML=xhr.response;

                    }
                }
            }

        })
    </script>
</body>

3.JSON

<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://127.0.0.1:8000/json-server');
            // 发送
            xhr.send();
            // 事件绑定
            xhr.onreadystatechange=function(){
                if(xhr.readyState===4){
                    if(xhr.status>=200&&xhr.status<300){
                        // console.log(xhr.response);
                        // result.innerHTML=xhr.response;
                        // 手动对数据进行转化
                        // let data=JSON.parse(xhr.response);
                        // console.log(data);
                        // result.innerHTML=data.name;
                        // 自动转换
                        // 在上面
                        // 设置响应体数据的类型
                        // xhr.responseType='json';
                        console.log(xhr.response);
                        result.innerHTML=xhr.response.name

                    }
                }
            }
                }

    </script>
</body>

4.IE缓存问题

问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩
余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
解决方式：浏览器的缓存是根据 url 地址来记录的，所以我们只需要修改 url 地址
即可避免缓存问题
xhr.open(“get”,“/testAJAX?t=”+Date.now());

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        // IE浏览器会将运行的AJAX进行缓存，对于时效性比较强的会影响我们的结果
        const btn=document.getElementsByTagName('button')[0];
        const result=document.querySelector('#result');
        btn.addEventListener('click',function(){
            const xhr=new XMLHttpRequest();
            // 这样每次点击之后都会发送名称不同的请求从而是新的指令，就不会走缓存，而是直接进行新指令的运行
            xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now());
            xhr.send();
            xhr.onreadystatechange=function(){
                if(xhr.readyState===4)
                {
                    if(xhr.status>=200&&xhr.status<300)
                    {
                        result.innerHTML=xhr.response
                    }
                }
            }
        })
    </script>
</body>

5.超时和网络异常

AJAX 请求状态
xhr.readyState 可以用来查看请求当前的状态
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState
0: 表示 XMLHttpRequest 实例已经生成，但是 open()方法还没有被调用。
1: 表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定 HTTP
请求的头信息。
2: 表示 send()方法已经执行，并且头信息和状态码已经收到。
3: 表示正在接收服务器传来的 body 部分的数据。
4: 表示服务器数据已经完全接收，或者本次接收已经失败了

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn=document.getElementsByTagName('button')[0];
        const result=document.querySelector('#result');
        btn.addEventListener('click',function(){
            const xhr=new XMLHttpRequest();
        


            // 超时设置 2s设置
            xhr.timeout=2000; 
               // 超时回调
               xhr.ontimeout=function(){
                alert("网络异常，请稍后重试");
               }
            //    网络异常回调(在断网的情况下)
            xhr.onerror=function(){
                alert("你的网络出了些问题");
            }
            xhr.open("GET",'http://127.0.0.1:8000/delay');
            xhr.send();
            xhr.onreadystatechange=function(){
                if(xhr.readyState===4)
                {
                    if(xhr.status>=200&&xhr.status<300)
                    {
                        result.innerHTML=xhr.response
                    }
                }
            }
        })
    </script>
</body>

6.取消请求

<body>
    <button>点击发送</button>
    <button>点击取消</button>
    <script>
        // 获取元素对象
        const btns=document.querySelectorAll('button');
        let x=null;
        btns[0].onclick=function(){
            x=new XMLHttpRequest();
            x.open("GET",'http://127.0.0.1:8000/delay');
            x.send();
        }
        // abort方法取消请求
        btns[1].onclick=function(){
            x.abort();
        }



    </script>
</body>

7.重复请求问题

<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://127.0.0.1:8000/delay');
            x.send();
            x.onreadystatechange=function(){
                if(x.readyState===4){
                    // 修改标识变量
                    isSending=false;

                }
            }
        }
        // abort方法取消请求
        btns[1].onclick=function(){
            x.abort();
        }



    </script>
</body>

四.三种使用AJAX的方法

1.jQuery

jQuery 中的 AJAX

1.get 请求

$.get(url, [data], [callback], [type])

url:请求的 URL 地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式，xml, html, script, json, text, _default。

2 post 请求

$.post(url, [data], [callback], [type])

url:请求的 URL 地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式，xml, html, script, json, text,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script  crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">jQuery发送AJAX请求</h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法AJAX</button>


    </div>
    <script>
        $('button').eq(0).click(function(){
            $.get('http://127.0.0.1:8000/jquery-server',{a:100,b:200},function(data){
                console.log(data);
            },'json')
        })
        $('button').eq(1).click(function(){
            $.post('http://127.0.0.1:8000/jquery-server',{a:100,b:200},function(data){
                console.log(data);
            })
        })
        $('button').eq(2).click(function(){
            $.ajax({
                // url
                url:'http://127.0.0.1:8000/jquery-server',
                // 参数
                data:{a:100,b:200},
                // 请求类型
                type:'GET',
                // 响应体结果
                dataType:'json',
                // 成功的回调
                success:function(data){
                    console.log(data);
                },
                // 超时时间
                timeout:2000,
                // 失败的回调
                error:function(){
                    console.log("出错啦！");

                },
                // 头信息
                header:{
                    c:300,
                    d:400

                }


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

2.axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
</head>
<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>
    <script>
        const btns=document.querySelectorAll('button');

        // 配置baseURL
        axios.defaults.baseURL='http://127.0.0.1:8000';
        btns[0].onclick=function(){
            // GET请求
            axios.get('/axios-server',{
                // url参数
                params:{
                    id:100,
                    vip:72
                },
                // 请求头信息
                headers:{
                name:'atguigu11',
                age:20
            }
            }).then(value=>{
                console.log(value);
            })
            
            
           

        }
        btns[1].onclick=function(){
            axios.post('/axios-server',{
                    username:'admin',
                    password:'admin'

                },{

                // url
                params:{
                    id:200,
                    vip:9
                },
                headers:{
                    height:180,
                    weight:180,
                },
                // 请求体
                
            })

        }
        btns[2].onclick=function(){
            axios({
                // 请求方法
                methon:'POST',
                // url
                url:'/axios-server',
                // url参数
                params:{
                    vip:10,
                    level:30
                },
                // 头信息参数
                headers:{
                    a:100,
                    b:200
                },
                // 请求体参数
                data:{
                    username:'admin',
                    password:'admin'
                }
            }).then(response=>{
                console.log(response);
                console.log(response.status);
                console.log(response.headers);
            })
        }
    </script>
</body>
</html>

3.fetch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>AJAX请求</button>
    <script>
        const btn=document.querySelector('button');
        btn.onclick=function(){
            fetch('http://127.1.1.0:8000/fetch-server',{
                // 请求方法
                method:'POST',
                // 请求头
                headers:{
                    name:'atguigu'
                },
                // 请求体
                body:'username=admin&password=admin'
            }).then(resonse=>{
                // 返回类型  text json
                return resonse.text();
            }).then(response=>{
                console.log(response);
            })
        }
    </script>
</body>
</html>

五.跨域

1.同源策略

同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。
同源：协议、域名、端口号必须完全相同。
违背同源策略就是跨域。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>尚硅谷</h1>
    <button>点击获取用户信息</button>
    <script>
        const btn=document.querySelector('button');
        btn.onclick=function() {
            const x=new XMLHttpRequest();
            // 因为是满足同源策略的，所以url可以简写
            x.open("GET",'/data');
            // 发送
            x.send();
            // 
            x.onreadystatechange=function(){
                if(x.readyState===4)
                {
                    if(x.status>=200&&x.status<300)
                    {
                        console.log(x.response);
                    }
                }
            }
        }           
        </script>
</body>
</html>

server.js

const express=require('express');
const app=express();
app.get('/home',(request,resonse)=>{
    // 响应一个页面
    resonse.sendFile(__dirname+'/index.html');
});
app.get('/data',(request,response)=>{
    response.send('用户数据')
})
app.listen(9000,()=>{
    console.log('服务已经启动');
})

2.JSONP

JSONP 是什么
JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明
才智开发出来，只支持 get 请求。
JSONP 怎么工作的？
在网页有一些标签天生具有跨域能力，比如：img link iframe script。
JSONP 就是利用 script 标签的跨域能力来发送请求的。
JSONP 的使用
1.动态的创建一个 script 标签

var script = document.createElement("script");

2.设置 script 的 src，设置回调函数

script.src = "http://localhost:3000/testAJAX?callback=abc";
function abc(data) {
alert(data.name);
};

3.将 script 添加到 body 中

document.body.appendChild(script);

4.服务器中路由的处理

router.get("/testAJAX" , function (req , res) {
console.log("收到请求");
var callback = req.query.callback;
var obj = {

name:"孙悟空", age:18
}
res.send(callback+"("+JSON.stringify(obj)+")");
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    用户名<input type="text" id="username">
    <p></p>
    <script>
        // 获取input元素
        const input=document.querySelector('input')
        const p=document.querySelector('p')

        // 声明handle函数
        function handle(data){
            input.style.border="solid 1px #f00"
            // 修改p标签的提示文本
            p.innerHTML=data.msg

        }
        // 绑定事件
        input.onblur=function(){
            // 获取用户的输入值
            let username=this.value
            // 向服务端发送请求，检查用户是否存在
            // 1.创建script标签
            const script=document.createElement('script')
            // 2.设置标签的src属性
            script.src='http://127.0.0.1:8000/check-username'
            // /3.将script插入到文档中
            document.body.appendChild(script);
        }
    </script>
</body>
</html>

jQUery-JSONP

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result{
            width: 300px;
            height: 100px;
            border: solid 1px #089;
        }
    </style>
     <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>

    </script>
</head>
<body>
    <button>点击发送jsonp请求</button>
    <div id="result">

    </div>
    <script>
        $('button').eq(0).click(function(){
            // 使用jQuery要在后面不上参数?callback=?
            $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?',function(data){
                // console.log(data);
                $('#result').html(`
                名称:${data.name}<br>,
                校区：${data.city},
                `)
            })
        })
    </script>
</body>
</html>

app.js

const data={
    name:'尚硅谷'
};
console.log(data);
// 处理数据  函数封装

handle(data)

六.cors

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

CORS 是什么？
CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方
案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持
get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些
源站通过浏览器有权限访问哪些资源
CORS 怎么工作的？
CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应
以后就会对响应放行。
CORS 的使用
主要是服务器端的设置：

router.get("/testAJAX" , function (req , res) {
//通过 res 来设置响应头，来允许跨域请求
//res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");
res.set("Access-Control-Allow-Origin","*");
res.send("testAJAX 返回的响应");
})；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>请求发送</button>
    <div id="result"></div>
    <script>
        const btn=document.querySelector('button')
        btn.onclick=function(){
            // 1.创建对象
            const x=new XMLHttpRequest()
            // 2.初始化设置
            x.open("GET","http://127.0.0.1:8000/cors-server")
            // 3.发送
            x.send();
            // 4.绑定事件
            x.onreadystatechange=function(){
                if(x.readyState===4)
                {
                    if(x.status>=200&&x.status<300)
                    {
                        // 输出响应体
                        console.log(x.response);
                    }
                }
            }
        }

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