JavaScript

js:Axjx基础

Nick · 1月27日 · 2020年 · 本文2961字 · 阅读8分钟741

什么是Ajax

什么是 AJAX ?
AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。

Ajax使用步骤

1.创建ajax对象
2.打开这个对象
3.发送请求
4.监听请求

小案例

1.在同目录下创建一个 文本1.txt 文件,在里面输入要读取的内容
2.创建ajax的使用的html文件
代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1></h1>
        <script type="text/javascript">
            //1.创建ajax对象
            var xhr = new XMLHttpRequest();
            //4.监听请求
            xhr.onreadystatechange= function(){
                //当xhr对象的readState属性发生了改变,这个事件就会触发
                //readState:
                //0===>xhr对象已经创建,但是还没有进行初始化操作
                //1===>xhr已经调用了open()
                //2===>xhr已经发出了请求
                //3===>已经返回了部分数据
                //4===>数据已经全部返回(只关心这个)
                if(xhr.readyState!=4){
                    return;
                }
                if(xhr.status>=200 &&xhr.status<=300){
                    //数据放在了xhr.responseText的属性中(String)
                    document.querySelector('h1').innerText=xhr.responseText;
                }
                else{
                    console.log("请求失败");
                }
            }
            //2.打开这个对象
            //?t='+new Date():添加时间戳,可以实时更新数据
            xhr.open('get','文本1.txt?t='+new Date().getTime(),true)
            //3.发送请求
            xhr.send();
        </script>
    </body>
</html>

可以将txt文件下的数据请求到HTML文件中

封装ajax

function ajax(url,fnSucc,fnFaild)
url是请求的文件名数据
fnSucc是请求成功是要执行的函数
fnFaild是请求失败后要执行的函数

function ajax(url,fnSucc,fnFaild){
    //1.创建ajax对象
    if(window.XMLHttpRequest){
        var xhr = new XMLHttpRequest();
    }
    else{
        var xhr = new ActiveXObject("Microsoft.XMLHttp");
    }
    //4.监听请求
    xhr.onreadystatechange= function(){
        //当xhr对象的readState属性发生了改变,这个事件就会触发
        //readState:
        //0===>xhr对象已经创建,但是还没有进行初始化操作
        //1===>xhr已经调用了open()
        //2===>xhr已经发出了请求
        //3===>已经返回了部分数据
        //4===>数据已经全部返回(只关心这个)
        if(xhr.readyState!=4){
            return;
        }
        if(xhr.status>=200 &&xhr.status<=300){
            //数据放在了xhr.responseText的属性中(String)
            fnSucc(xhr.responseText);
        }
        else{
            if(fnFaild){
                fnFaild(xhr.status);
            }
        }
    }
    //2.打开这个对象
    xhr.open('get',url+'?t='+new Date().getTime(),true)
    //3.发送请求
    xhr.send();
}

封装ajax测试一

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="ajax.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <button type="button" id="btn">按钮</button>
        <script type="text/javascript">
            var btn=document.getElementById("btn")
            btn.onclick=function(){
                ajax('文本1.txt',function(str){
                    alert(str);
                });
            }
        </script>
    </body>
</html>

运行结果是点击按钮会弹出 文本1.txt 的内容

Ajax使用json对象

什么是json
https://juejin.im/post/5d033cef6fb9a07ec75517fc
例如

[{no:1,name:"孔",addr:"赣州"},{no:2,name:"李",addr:"抚州"},{no:3,name:"李",addr:"南昌"},{no:4,name:"左",addr:"南昌"}]

在js中可以将这个文本对象进行解析:用eval(str);方法
str是使用ajax封装后,获取出来的文本对象
var arr=eval(str);
arr解析出来是一个对象数组

封装ajax测试二

具体执行代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="ajax.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <button type="button" id="btn">按钮</button>
        <ul id="ull">
        </ul>
        <script type="text/javascript">
            var btn=document.getElementById("btn");
            var ull=document.getElementById("ull");
            btn.onclick=function(){
                ajax('文本2.txt',function(str){
                    var arr=eval(str);
                    for(var i=0;i<arr.length;i++){
                        var li=document.createElement("li");
                        li.innerHTML="序号:<strong>"+arr[i].no+"</strong>姓名:<span>"+arr[i].name+"</span>地址:<span>"+arr[i].addr+"</span>";
                        ull.appendChild(li);
                    }
                });
            }
        </script>
    </body>
</html>

运行效果如图
js:Axjx基础-左眼会陪右眼哭の博客
详细资料可参考:https://www.w3school.com.cn/ajax/ajax_intro.asp

0 条回应
在线人数:1人 来访统计
隐藏