当前位置 博文首页 > 文章内容

    关于ajax异步访问数据的问题

    作者:shunshunshun18 栏目:未分类 时间:2021-08-28 14:42:39

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



    在js中,处理数据固然很快,sososo就能完成所有的数据处理,我们似乎不需要使用异步传输数据

    跨洋数据传输就出现了问题,一来2s过去了一回2s过去了,这对于访问者来说,这就是卡

    再者 我输入了密码 提示密码错误 于是要重新输入,返回了一个网页 这时候输入的数据就会被清空,非常让人抓狂。

    为了解决这个问题ajax孕育而生

    Ajax全名Asynchronous JavaScript and XML 名为异步的JavaScript和XML

    Ajax使用方式非常简单

    1.创建实例 xhttp = new XMLHttpRequest( )

    2.发送文件 Xhttp.open("GET","地址","true/false")

    3.定义在发送文件后所获取的数据

    xhttp.onreadystatechange = function(){}

    在完全传输完成的时候

    xhttp.readyState就会等于4
    xhttp.status就会等于200
    这个时候就能在
    xhttp.responseText中获取到数据
    4.处理数据 
    xhttp.responseText获得的数据为字符串
    要将其变为字典对象
    JSON.parse(xhttp.responseText)

    <!DOCTYPE html>
    <html lang="zh-cn">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>ajax调用内涵段子</title>
        <style>
            video{
                background-color: aquamarine;
            }
        </style>
        <script src="../jquery-3.6.0.js"></script>
        <script>
            $(document).ready(function () {
                xhttp = new XMLHttpRequest();
                https = "https://api.apiopen.top/getJoke?page=1&count=2&type=video";
                xhttp.onreadystatechange = function(){
                    if(xhttp.readyState==4&&xhttp.status==200){
                        $("h1").html(JSON.parse(xhttp.responseText).result[0].text);
                    }
                    else{
    
                    }
                }
                $("button").click(function(){
                    xhttp.open("GET",https,true);
                    xhttp.send();
                })
            });
        </script>
    </head>
        <button>点击获取</button>
        <h1></h1>
    <body>
    </body>
    
    </html>