Ajax

ajax是什么?有什么作用?

Ajax可以把它当做页面与后端交接的微桥梁,可以实现异步操作,无须刷新整个页面的情况下实现局部刷新,是前端开发人员必须掌握的一个技能;
大体步骤可以分为以下:
1.createXHR
2.xhr.open(type,url,boolean) //确定请求发送类型、URL、同步/异步
3.xhr.send() //发送到服务器

前后端开发联调需要注意哪些事情?后端接口完成前如何mock数据?

明确需要测试的数据,逻辑测试需要清晰,前端发送什么数据给后台,后头返回什么数据给前台,双方约定好;后端接口完成前,搭建服务器,mock数据,确定程序能跑起来。

点击按钮,使用 ajax 获取数据,如何在数据到来之前防止重复点击?

<script>
var ct = document.querySelector("#ct");
        btn = document.querySelector("#btn");



var lock = true;
function ajax(opts){
    lock = false;
    var xhr = new XMLHttpRequest();
    xhr.onredaystatechange = function(){
        if(xhr.readyState===4 && xhr.status===200){
            var result = JSON.parse(xhr.responseText);
            opts.success(xhr.responseText);
            lock = true;
        }else if(xhr.readyState===4 && xhr.status!==200) {
            opts.error();
            lock = true;
        }
    }
    var urlStr ="";
    for(var key in opts.data){
        urlStr = key +"="+opts.data[key]+"$";
    }
    urlStr = urlStr.substring(0,urlStr.length-1);

    if(opts.type.toLowerCase()==="get"){
        xhr.open(opts.type,opts.url+"?"+urlStr,true);
        xhr.send();
    }
    if(opts.type.toLowerCase()==="post"){
        xhr.open(opts.type,opts.url,true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(urlStr)
    }
}


btn.addEventListener("click",function(){
    if(lock===true){
        ajax(
        {
            url:'/more',
            type: 'post',
            data: {
                len: document.querySelectorAll('li').length
            },
            success: function(data){
                console.log(data);
            },
            error: function(){
                console.log('出错了')
            }
        })
    }
})
</script>

题目5:实现加载更多的功能

代码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 3,288评论 0 7
  • 大家好,我是IT修真院深圳分院第3期的学员,一枚正直纯洁善良的前端程序员,今天给大家分享一下,修真院官网前端工程师...
    大大头大阅读 7,847评论 1 72
  • 关键词:Ajax 1. Ajax 是什么?有什么作用? Ajax 全称“Asynchronous Javascri...
    NathanYangcn阅读 324评论 0 0
  • ajax作为前端开发必需的基础能力之一,你可能会使用它,但并不一定懂得其原理,以及更深入的服务器通信相关的知识。在...
    萧玄辞阅读 844评论 0 0
  • 浏览器与服务器之间,采用HTTP协议通信。用户在浏览器地址栏键入一个网址,或者通过网页表单向服务器提交内容,这时浏...
    徐国军_plus阅读 382评论 0 4