ajax实践

ajax 是什么?有什么作用?

AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

ajax不是新的编程语言,而是一种使用现有标准的新方法。ajax是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换。ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的网页(不使用ajax)如果需要更新内容,必须重载整个网页面。

ajax的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括:Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象,也不支持XSLT。

ajax前景非常乐观,可以提高系统性能,优化用户界面。AJAX现有直接框架AjaxPro,可以引入AjaxPro.2.dll文件,可以直接在前台页面JS调用后台页面的方法。但此框架与FORM验证有冲突。另微软也引入了AJAX组建,需要添加AjaxControlToolkit.dll文件,可以在控件列表中出现相关控件。

ajax的优点:

  1. 最大的一点是页面无刷新,用户的体验非常好。
  2. 使用异步方式与服务器通信,具有更加迅速的响应能力。。
  3. 可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
  4. 基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
  5. ajax可使因特网应用程序更小、更快,更友好。

ajax的缺点:

  1. ajax不支持浏览器back按钮。
  2. 安全问题 AJAX暴露了与服务器交互的细节。
  3. 对搜索引擎的支持比较弱。
  4. 破坏了程序的异常机制。
  5. 不容易调试。

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

  • 前后端开发联调需要注意的事情:1、get方法或post方法;2、约定数据接口和格式,前端提供参数,后台响应时返回什么格式;3、约定每次请求数据数量。
  • 如何mock数据:使用server mock搭建本地服务器,模拟网站后端,使用server-mock首先得下载nodejs,然后下载server-mock(npm install -g server-mock),下载完成后,在目标文件文件夹创建一个router.js文件夹,用来接收和处理后端的请求文件(mock init可创建范例);最后mock start启动一个web服务器

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

  • 通过对数据是否接受完毕的状态来进行判断,当数据接收完毕时则允许下一次请求,否则不处理用户点击按钮的事件;状态锁初始状态为true,当用户点击按钮时开始请求数据,并将状态锁置为false,表示当前正在请求数据,此时再去点击按钮时,点击事件不会被处理也就不会再去发送数据请求,当数据接收完毕后,将状态锁置为true,此时用户可继续点击按钮请求数据。
var isDataArrive = true;//声明状态锁,默认打开
    btn.addEventListener("click",function(){
        if (!isDataArrive) {
            return;//如果正在请求数据,那这次点击什么都不做
        }
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if (xhr.readystate === 4) {
                if (xhr.readystate === 200||xhr.readystate ===304) {
                    //dosomething
                }
                isDataArrive = true;//拿到数据,打开锁
            }
        }
        xhr.open('get','/index?length',true)
        xhr.send()
        isDataArrive = false;//上锁,禁止在请求完成前发请求
    })
</script>

实现加载更多的功能,实现加载更多,后端在本地使用server-mock来模拟数据

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul,li{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        #ct li{
            border: 1px solid #ccc;
            padding: 10px;
            margin-top: 10px;
        }
        .btn{
            width: 80px;
            height: 40px;
            margin: 20px auto;
            padding: 10px auto;
            border: 1px solid #E27272;
            border-radius: 2px;
            text-align: center;
            text-decoration: none;
            color: #E27272;
            display: block;
            line-height: 36px;
        }
        .btn:hover{
            background-color: green;
            color: white;
        }
    </style>
</head>
<body>
    <ul id="ct">

    </ul>
    <a href="javascript:void(0)" id="load-more" class="btn">加载更多</a>

<script>    
    var btn = document.querySelector('#load-more');
    var ct = document.querySelector('#ct');
    var pageIndex = 0;
    var isDataArrive = true;

    btn.addEventListener('click',function(){
        if (!isDataArrive) {
            return;
        }
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if (xhr.readyState === 4) {
                if (xhr.status === 200||xhr.status === 304){
                    var results = JSON.parse(xhr.responseText)
                    var fragment = document.createDocumentFragment()
                    for (var i = 0; i < results.length; i++) {
                        var node = document.createElement('li');
                        node.innerText = results[i];
                        fragment.appendChild(node);
                    }
                    ct.appendChild(fragment);
                    pageIndex += 5;
                }else{
                    console.log('It's wrong!)
                }
                isDataArrive = false;
            }
        }
        xhr.open('get','/load-more?index=' + pageIndex + '$length = 7',true)
        xhr.send()
        isDataArrive = true
    })
</script>
</body>
</html>

服务器端

app.get('/load-more',function(req,res){
    var idx = req.query.index;
    var len = req.query.length;
    var data = [];

    for(var i = 0;i < len;i++){
        data.push('new'+(parseInt(idx)+i))
    }
    setTimeout(function(){
        res.send(data);
    },1000)

});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容

  • 1. ajax 是什么?有什么作用? Ajax(['eidʒæks])是Asynchronous JavaScri...
    晓风残月1994阅读 366评论 0 0
  • 1: ajax 是什么?有什么作用? Ajax是Asynchronous JavaScript and XML的缩...
    好奇而已阅读 324评论 0 0
  • 1. ajax 是什么?有什么作用? Ajax(Asynchronous JavaScript + XML)是一种...
    madpluto阅读 170评论 0 0
  • 1- 关于 ajax 及其作用 Ajax是Asynchronous JavaScript and XML的缩写。...
    osborne阅读 526评论 0 0
  • 1.ajax 是什么?有什么作用? Asynchronous JavaScript and XML(异步的 Jav...
    clark124阅读 234评论 0 0