AJAX

作者: Iswine | 来源:发表于2016-09-19 13:09 被阅读0次

AJAX的历史:
传统的表单设计采用提交<form>的方式向web服务器请求,web服务器根据请求,返回给浏览器一个新的页面。这种做法浪费了大量的带宽,因为前后两个页面大部分的内容都是相同的,区别仅在于用户所输入的数据。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

AJAX(Asynchronous Javascript And XML),即异步的JS与XML,它仅向服务器发送并取回必要的数据。其最大的特点是在不更新整个页面的情况下,对少量的数据进行了交互,并呈现在用户面前。2005年,google搜索中利用AJAX来引导用户进行搜索,使AJAX技术大放异彩。举几个AJAX的应用场景:
1.搜索


尽管用户只输入了两个字,但是它通过AJAX与后台交互,猜测出用户可能想要搜索的词条。

2.验证


能够在不刷新页面的情况下,指出注册时出现的问题。

AJAX通常的写法:

    if (window.XMLHttpRequest){
        var request = new XMLHttpRequest();
    }
    else{
        var request = new ActiveXObject("Microsoft,XMLHTTP");
    }
    request.onreadystatechange = fucntion(){
        if( request.readyState == 4 && request.status == 200){
            // TO DO
        }
        if ( request.readyState == 4 && request.status == 404){
            console.log("error...");
        }
        else{
            console.log("正在连接...")
        }
    }
    var data = "";
    //////////////////////////get/////////////////////////////
    request.open("GET",url,true);
    request.send();
    /////////////////////////post////////////////////////////
    request.open("POST",url,true);
    request.setRequestHeader("Content-type","application/x-ww-form-urlencoded");
    xmlhttp.send(data);
  • 几乎所有的现代浏览器都使用XMLHttpReques()对象来建立AJAX,如果你需要兼容IE6及其以下的话,就需要 使用ActiveXObject("Microsoft,XMLHTTP");
  • 每当readyState改变时,就会触发onreadyStatechange事件,我们可以利用参数的变化来指定具体的操作。
  • GET/POST。一般来说,GET适用于通过请求少量数据来获取大量数据的情况,POST适用于传递大量数据的情况。GET的提交信息会显示在URL中,在提交时,我们不仅要输入服务器端的URL,还要加上请求的内容,显而易见,这并不安全;相反,POST只要输入服务器端的URL即可。在send()中,由于GET已经将信息添加在URL中,故无需通过send()传递,而POST需要将大量的文本通过send(text)传递。

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

前后端开发联调时候需要注意一下事情:

  • 在开发之前规定好接口文档并指明由谁来撰写和维护;
  • 接口信息如果改动需要合适的方法向前后端传递改动信息;
  • 规定使用的接口类型,JSON或者JSONP;
  • 定义数据管理和归属权,是属于前端管理还是后端管理;
  • 规定数据的交流方式,是前端直接把数据请求发送给后端,还是说有前端和后端之间有一个middle(中间层),前后端的数据都需要经过它来得到符合自己需求的数据类型;

后端接口完成前如何mock数据:

  • 自己制作模拟数据,但这种方式工作量比较大,而且需要收集分类要求的数据,如果接口变更,之前的所有数据也需要及时更新。但这样的好处是能够快速的完成前端任务;
  • 使用模拟数据生成器,http://mockjs.com/

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

可以设置一个锁,当锁存在时,点击按钮不执行AJAX;当加载完成解锁后,再次点击才能执行AJAX。

var onload = false;                                                 //设置锁变量;
 document.querySelector(".btn").addEventListener("click",function () {
            if(onload){                                                 //如果有锁存在,则不执行AJAX;
                return;
            }
            onload = true;                                         //上锁
            ajax({
                url:"2.php",
                type:"get",
                data:{},
                success:function(ret){
                    // TO DO
                    onload = false;                               //解锁
                },
                error:function () {
                  console.log("error.....")
                }
            });
        });

相关文章

  • 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/theiettx.html