美文网首页
AJAX交互的二三事

AJAX交互的二三事

作者: XJBQ | 来源:发表于2017-04-11 01:06 被阅读0次

    网页在我们网页浏览中常用到的登录,注册或者搜索都是怎么完成的,想想已经无法用事先写好的静态布局或者普通的JS语句来达到,在用户浏览网页过程中的一些操作可以通过后台与服务器进行少量数据交换,在不重新加载整个页面的情况下,使得网页实现异步更新,显示新的内容。这就是——AJAX(异步的 JavaScript 和 XML);
    这里所提到的同步与异步就是程序中执行操作的方式:同步是指在程序中一件事情做完再做下一件;异步则是同时处理多件事情。

    get与post

    首先不得不先提一下html中的form表单元素,form提交的方式分为get以及post

    • post的提交数据的容量非常大,安全性比起get直接显示在地址栏也要高上不少,同时刷新页面,不能从服务器获取数据;
    • get通过url或者?提交,有着容量比较小,通常是几十K,不安全等特征;

    这使得两中提交方式在不同的场景起到独有的作用。

    JQuery中的Ajax

    $.ajax({
      url:  //请求的地址
      data:{}  //提交的数据
      dataType:'json'  //请求的数据格式 默认为字符串
      cache: false  //缓存 默认true
      success:function(){}  //成功后的回调函数
      error:function(){}  //失败后的回调函数
    });
    
    1. url的值为链接到后台接口的地址,get提交的数据会跟在接口的?后面,数据以name=value&name=value的形式,&为间隔提交;
      1.5. data的值包括以get,或者post方式提交的数据都以键值对的形式写在这里;
    2. dataType为请求所得数据的格式,json并不是传统意义上理解的纯JSON格式,也可以兼容JSON+数组的写法;
    3. cache即缓存,在jQuery中设置了一个选项参数,其实其解决办法为URL地址上加一个随机数
    url + 'r=' + Math.random()
    
    1. success即成功的回调函数,其传入的参数为Ajax的请求结果;
    2. error即失败的回调函数,也能得到Ajax的请求结果。

    暂时就写到这里,关于JQuery中的Ajax已经简单介绍了一下,而Ajax与Promise的配合,在AngularJS等框架中的表现,与nodeJS后台的交互还有很多知识值得研究。

    相关文章

      网友评论

          本文标题:AJAX交互的二三事

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