AJAX

作者: 泰格_R | 来源:发表于2016-10-21 23:09 被阅读74次
1.ajax 是什么?有什么作用?

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML )通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。是一种无需刷新整个页面就能为页面中的某一部分加载数据的技术。数据通常会以json或xml的格式进行发送。通过JavaScript发送请求、接受服务器传来的数据,然后操作DOM将新数据对网页的某部分进行更新。


2.前后端开发联调需要注意哪些事情?后端接口完成前如何 mock 数据?(npm install -g server-mock) 知识点视频-如何 mock 数据。

前后端开发联调时要注意:
1.约定好传输数据的格式,如JSON或XML等,确定好数据传输方式,from表单/ajax方式
2.约定好数据的接口
mock数据的方式有两类:
1.使用其它后端程序模拟,如php、java等
2.使用server-mock模拟各接口下返回的数据
3.手写json格式的数据文件,或xml文件模拟数据


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

设置一个锁止状态,初始值为false(解锁),当点击执行某个事件时置为true(锁止),在设置锁状态为true之前用
if(locked){
return
}语句先判断一次,如果锁状态为true(锁止)则return结束,当事件函数里面的ajax执行完之后设置locked为false。这样当ajax请求的数据还没来之前如果重复点击的话,就会直接return出该事件函数,使重复点击无效。
代码如下:

var locked=false//设置初始值解锁状态
el.addEventListener("click",function(){
if(locked){return}  //先判断一次,当locked为true时直接return结束
locked=true //设置为锁止状态
ajax({
todo1:function(){ //执行完某动作后将锁状态解锁
locked=false
}

todo2:function(){ ////执行完某动作后将锁状态解锁
locked-false
}
})
})

4.封装一个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){
    //创建ajax对象
    var xmlhttp = new XMLHttpRequest();
    //对ajax进行事件监听
    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState ===4 && xmlhttp.status === 200){
            //将服务器返回的文本内容转为JSON格式
            var json = JSON.parse(xmlhttp.responseText);
            opts.success(json);;
        }
        if(xmlhttp.status === 404){
            opts.error()
        }
    };
    //创建发送到服务器的数据,为了数据附加到url上,必须为key/value格式。
    var dataStr = "";
    for (var key in opts.data) {
        dataStr += key + '=' +opts.data[key]+'&';
    }
    dataStr = dataStr.substr(0,dataStr.length-1);
    //判断请求的方式为get
    if(opts.type.toLowerCase() === "get"){
        //链接服务器
        xmlhttp.open('GET',opts.url+'?' +dataStr,true);//这里GET要大写
        //发送请求
        xmlhttp.send();
    }
    //判断请求方式为post
    if(opts.type.toLowerCase() === "post"){
        //链接服务器
        xmlhttp.open('POST',opts.url,true); //这里POST要大写
        //为了使post请求与提交web表单相同,将 Content-Type 头部信息设置为 application/x-www-form-urlencoded来模仿表单提交功能。
        xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        xmlhttp.send(dataStr);
    }
}

5.实现加载更多的功能。

作业文件夹没php环境,本地测试正常
代码预览


6.实现注册表单验证功能

作业文件夹没php环境,本地测试正常
代码预览


相关文章

  • AJAX

    主要内容: ajax 是什么、原生ajax 写法和jQuery ajax写法。 AJAX 是什么 ajax,即As...

  • JavaScript进阶知识点--AJAX及JSON

    AJAX 关于 AJAX 什么是 AJAX AJAX 的全称是 Asynchronous JavaScript a...

  • HTML5权威指南 | 第五部分 高级功能

    三十二、使用AJAX(上) Ajax起步: 使用Ajax事件: Ajax请求的错误处理: 中止Ajax请求: 三十...

  • ajax学习笔记

    Ajax学习笔记 Ajax简介 1. Ajax是什么? Ajax : Asynochronous javascri...

  • AJAX

    一、简介 AJAX菜鸟教程 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML。 AJAX...

  • js之AJAX复习

    异步交互和同步交互 什么是Ajax? Ajax的工作原理。 Ajax包含的技术: Ajax的缺陷: Ajax的核心...

  • 复习jQuery - ajax

    jQuery ajax - ajax() 方法 $.ajax({ url:'oo.php', ...

  • jQuery中Ajax请求的使用和四个步骤示例

    ajax() 方法用于执行 AJAX(异步 HTTP)请求,所有的 jQuery AJAX 方法都使用 ajax(...

  • ajax

    1、什么是ajax? 2、ajax的原理 3、ajax的核心对象 4、ajax的优点: ajax的缺点: 被jqu...

  • ajax

    Ajax 1 - 请求纯文本 Ajax 2 - 请求JSON数据 Ajax 3 - 请求Github接口 Ajax...

网友评论

      本文标题:AJAX

      本文链接:https://www.haomeiwen.com/subject/habcuttx.html