Ajax异步调用网易云热评

先来介绍一下Ajax

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

成果展示图

调用api接口

https://tenapi.cn/comment

返回的数据实例

调用网易云接口返回的为JSON数据

代码部分

首先模仿jQuery书写Ajax代码块

var $ = {
    ajax:function (options) {
        var xhr = null, //XMLHttpRequest对象
            url = options.url, //url地址
            method = options.method || 'GET', //传输方式 默认GET
            async = typeof (options.async) === "undefined"?true:options.async,
            data = options.data || null;
            params = '', //参数
            callback = options.success, //ajax请求成功的回调函数
            error = options.error; //ajax请求失败的回调函数
            //将data的对象字面量的形式转换为字符串形式
            if(data){
                for(var i in data){
                    params += i + '=' + data[i] + '&';
                }
                params = params.replace(/&$/,"");
            }
            //根据method的值改变url
            if(method === "GET" ){
                url += "?" + params;
            }
        if(typeof XMLHttpRequest != "undefined"){
            xhr = new XMLHttpRequest();
        }else if(typeof ActiveXObject != "undefined"){
            var xhrArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
            var len = xhrArr.length;
            for(var i = 0; i<len; i++){
                try{
                    xhr = new ActiveXObject(xhrArr[i]);
                    break;
                }catch(ex){

                }
            }
        }else{
            throw new Error('No XHR object availabel');
        }
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4){
                if((xhr.status >=200 && xhr.status <300) || xhr.status === 304){
                    callback && callback(JSON.parse(xhr.responseText));
                }else{
                    error && error();
                }
            }
        }
        //创建请求
        xhr.open(method,url,async);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(params);
    }
}

然后是主页面使用Ajax调用接口数据并写入页面当中
页面的HTML代码

<div class="card">    
    <div class="comment">
        <span class="bot"></span>
        <span class="top"></span>
        <p id="text" >
        </p>
    </div>    
</div>

非常的少
然后是css代码

<style>
body{
    font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu ;
    background-color: #af2c31;
}
.card{
    margin: 30px;
    padding: 15px;
    color: #f2e6e0;
}
.content{
    text-align: center;
    font-weight: 900;
    font-size: 2rem;
}
.name{
    text-align: right;
    font-size: 18px;
}
.song{
    margin-top: 10px;
    text-align: right;
    font-size: 7px;
}
.comment{
    padding:20px 20px; 
    padding-bottom: 0px;
    margin: 10% 30% auto 30%;
    border:2px solid #fff; 
    position:relative;    
    border-radius: 4px;
    background: #af2c31;
    box-shadow:  10px -10px 0px #fcfcfc85, 
                -10px 10px 0px transparent;
}
@media screen and (max-width: 700px){
    .comment{
    padding:20px 20px; 
    margin: 10% 1% auto 1% ;
    border:2px solid #fff; 
    position:relative;    
    border-radius: 4px;
    }
}
.comment span{
    width:0; 
    height:0; 
    font-size:0; 
    overflow:hidden; 
    position:absolute;
}
.comment span.bot{
    border-width:20px; 
    border-style:solid dashed dashed; 
    border-color:#fff transparent transparent; 
    left:15px; 
    bottom:-41px;
}
.comment span.top{
    border-width:20px; 
    border-style:solid dashed dashed; 
    border-color:#af2c31 transparent transparent; 
    left:15px; 
    bottom:-38px;
} 
</style>

最主要的是js调用接口代码

<script>
    var text = document.getElementById('text');
    $.ajax({
        url:"https://tenapi.cn/comment",
        success:function (data) { 
            console.log(data.data.content);
            text.innerHTML="<div class=content>"+data.data.content+"</div><br><div class=name>来自网易云用户"+data.data.name+"</div><div class=song>在《"+data.data.song+"》下的评论</div>";
        }
    });
    </script>

需要注意的是js因写在最下面，因为浏览器是从上至下读代码，如果在上面，会找不到DOM节点而报错