美文网首页
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交互的二三事

    网页在我们网页浏览中常用到的登录,注册或者搜索都是怎么完成的,想想已经无法用事先写好的静态布局或者普通的JS语句来...

  • ajax的运用

    交互 form 提交: ajax: jquery的ajax: ajax做交互

  • js之AJAX复习

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

  • 交互新手二三事

    总听到有人说“交互设计师的门槛很低”。这样一个“是设计就能做”、“产品开发测试也能轻易转型”的职位,做个新人真有那...

  • 登录页记住账号密码js+localstrage+ajax

    包含数据交互ajax

  • ajax

    1. ajax交互流程: ajax数据交互流程 1、创建一个ajax对象2、填写请求地址3、发送请求4、等待服务器...

  • Ajax+js实现异步交互

    一提到异步交互大家就会说ajax, 仿佛ajax这个技术已经成为了异步交互的代名词。那下面将研究ajax的核心对象...

  • ajax的写法与注意事项

    -------------------ajax: 数据交互---------------------- 表单for...

  • AJAX

    apache简介 首先认识一下URLURL 就是网页的地址 ajax交互策略: 同时ajax可进行异步交互 同步交...

  • vue起步(2)之数据交互

    vue中的交互(ajax,jsonp) vue中也存在像ajax和jsonp的数据交互,实现向服务器获取数据,但是...

网友评论

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

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