Ajax

1. ajax是什么,有什么作用?
  • ajax是一种创建动态网页的技术,它能够在不重载整个网页的情况下,通过Javascript发出请求、获取数据,并通过DOM操作局部的更新网页内容。
2.前后端开发联调需要注意哪些事情?后端接口完成前如何 mock数据?(npm install -g server-mock)
  • 前后端开发联调
    • 约定数据格式;
    • 制定前后端接口,约定参数和返回值;
    • 接口或数据格式发生改变时前后端需妥善沟通;
    • 前后端独立开发,前端向Mock-server发送请求,获取模拟数据进行开发和测试;
    • 前后端都完成后,前后端链接调试。
  • 后端接口完成前如何 mock数据?
    • 在本地安装Mock-server提供接口和模拟数据。
3. 点击按钮,使用 ajax 获取数据,如何在数据到来之前防止重复点击?
  • 可以通过一个变量来进行控制,例如:
var flag = 0;
btn.addEventListener('click', function(e){
    if(flag){return};
    flag = 1;
    var xhr = XMLHttpRequest();
    //todo...
    xhr.onreadystatechange = function(){
        // todo...
        flag = 0;
    }
})
```

###代码题
#####1. 封装一个 ajax 函数,能通过如下方式调用
```
    function ajax(opts){
        // todo ...
    }
    document.querySelector('#btn').addEventListener('click', function(){
        ajax({
            url: 'getData.php',   //接口地址
            type: 'get',               // 类型, post 或者 get,
            data: {
                username: 'xiaoming',
                password: 'abcd1234'
            },
            success: function(ret){
                console.log(ret);       // {status: 0}
            },
            error: function(){
               console.log('出错了')
            }
        })
    });
```
封装函数:
```
    function ajax(opts) {
        var xhr = new XMLHttpRequest();
        var dataStr = '';
        for (key in opts.data) {
            dataStr += key + '=' + opts.data[key] + '&';
        }
        dataStr = dataStr.substr(0, dataStr.length - 1);
        if (opts.type.toLowerCase() === 'get') {
            xhr.open(opts.type, url + '?' + dataStr, true);
            xhr.send();
        }
        if (opts.type.toLowerCase() === 'post') {
            xhr.open(opts.type, url, true);
            xhr.srtRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send(dataStr);
        }
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var json = JSON.parse(xhr.responseText);
                opts.success(json);
            } else {
                opts.error();
            }
        }
    }
```

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

推荐阅读更多精彩内容

  • 1: ajax 是什么?有什么作用? ajax全称是Asynchrous JavaScript XML的缩写。 作...
    LINPENGISTHEONE阅读 191评论 0 0
  • 大家好,我是IT修真院深圳分院第3期的学员,一枚正直纯洁善良的前端程序员,今天给大家分享一下,修真院官网前端工程师...
    大大头大阅读 7,827评论 1 72
  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 3,265评论 0 7
  • 浏览器与服务器之间,采用HTTP协议通信。用户在浏览器地址栏键入一个网址,或者通过网页表单向服务器提交内容,这时浏...
    徐国军_plus阅读 372评论 0 4
  • 一、ajax是什么?有什么作用? Ajax即“Asynchronous Javascript And XML”(异...
    疯小儿阅读 285评论 0 0