ajax的使用-阿里云开发者社区

开发者社区> sunshine.pl> 正文

ajax的使用

简介:   如上一张表单提交,一般我们通常的做法是,form表单提交,方便快捷,提交以后就不用管了,是否完成以及完成以后做什么是提交以后的后台操作,form表单只负责提交过去。(一般后台在接收表单提交以后,根据验证以及数据流转结果给前台交互,常见的是 重定向)。
+关注继续查看

  如上一张表单提交,一般我们通常的做法是,form表单提交,方便快捷,提交以后就不用管了,是否完成以及完成以后做什么是提交以后的后台操作,form表单只负责提交过去。(一般后台在接收表单提交以后,根据验证以及数据流转结果给前台交互,常见的是 重定向)。

 

   上面是通常的做法,但是有时候会有例外,一个页面上,不光只有一个表单,可能多个,或者,提交表单以后,使用者希望页面不被刷新,但是表单提交是一定会刷新页面的,不刷新则无法提交。所以,我们的ajax出来了,它的无刷新提交成功的解决了这一痛点。

   ajax提交的几种好处:

   1.它是无刷新的,触发某个提交操作后不会因为页面的刷新导致体验不好(默认无刷新,但是可以在success事件里写页面刷新的JS)

   2.它是异步的,异步意味着程序在做这个事情的时候还可以继续去处理其他的事情。

  

  好处挺多的,就单纯使用来说,没有form方便,写一堆JS不如一句submit省事.

 

  ajax提交一般有两种,post和get,这两种形式的区别网上也有很多说明的, 简单描述就是Get就是输入URL在地址栏进行请求这种,post是通过http请求去处理的,post比get相对安全。细说一下ajax的几种写法。

  常见写法:

  $.ajax   这种写法可以设置一些属性,比如是否同步、等待时长(超时失败)、跨域等

  $.post  这种是post请求的简写形式

  

     注意事项:

     使用ajax操作数据的时候,一般ajax默认是异步的, 所以和当前数据有关的下一步操作需要放在success里执行,否则可能存在获取不到数据的情况,异步加载出来的数据一般绑定事件的时候也需要结合on方法来使用,而不是简单地$(obj).click(function(){});

     

     值的一提的是,关于form和ajax使用上的一点区别,上面也说了form使用起来更方便,这点还体现在一个方面,就是form提交是不区分是否跨域的,也就是说提交的地址即便和当前域名不一样,也同样支持提交操作,这意味着使用form的时候不用像ajax一样设置跨域属性。ajax设置跨域的时候除了dataType指定成jsonp,对返回的数据格式也有要求,首先必须是个JSON数据,其次要指定函数名,怎么说呢,如下:

     后台研发在提供接口给负责前端数据渲染同事的时候,如果请求不涉及跨域,那么数据返回格式是这样的:

   {“name”:”hello”}

    而当涉及跨域操作的时候,需要的数据格式是这样的:

     callback({“name”:”hello”})

    

    callback就是回调函数名,如下:

    

   在JS里写跨域请求的时候,jsonp默认的名称是callback,如果后台研发同事的数据返回接口前面的函数名是另起的,则需要对应修改,否则请求成功但获取不到数据。同理,当接口数据的返回格式不是 “函数名(JSON字符串)”这种格式的时候,同样会请求成功但不走success,而是走了error,这个时候也不提示具体是什么错误 (*/ω\*) 这点非常不友好!(仅跨域请求会这样,不涉及跨域请求则忽略)

 

      回到刚刚那个问题,form是不区分提交是否跨域的,但是ajax区分,为什么呢? 经过网上Get一番后知道了,出于浏览器对JS安全的考虑!我们从形式上来分析,form提交表单的时候,只管提交,成功与否完全不用管,都交给后台代码处理了,自身不做任何事,哪怕后台返回过来了状态信息。因为form提交以后页面就直接刷新了,默认刷新当前页(多数时候由后台重定向到某页)。但是ajax不一样,ajax是请求数据,并一定要得到返回结果的,这个结果可以是200,可以是500,可以是404,但必须受到一个结果,ajax最后不是走success函数,那肯定走error函数,通过F12检测浏览器也能查看当前请求返回的状态码是多少,一般状态码200表示请求OK,会走success,其他的会走error(跨域那个数据格式不对的除外,那个数据格式不对也会请求成功但是走error)。

     问题就来了,ajax是向指定地址获取数据,它提交数据也是要得到结果的,得到结果也是获取数据的一种形式,这样就涉及到了安全问题,举个简单的栗子:form提交相当于我寄快递不问结果,ajax提交数据相当于寄快递但要求得到回复。为什么说ajax这样会有问题呢,因为ajax是一定会受到一个结果的,这意味着,当有人请求1w次某个接口的时候,会得到1w个回复,通过这个回复,黑客就能找这个接口的漏洞,进而入侵电脑,你给了我你的QQ号,你设置了密码,但是我可以暴力破解,因为我每次尝试密码的时候你都会告诉我这个密码是错误的,并附带一些http相关的信息,所以我有机会盗你号!但是form不一样,不管你怎么“撩我”,我都不会给你明确的回复,是成功还是失败你不知道,得不到我的回复你就看不到我喜好,所以同样的你盗不了我的号,即便你暴力破解,没有回应你也很难判断是对是错。  基于这个原理,浏览器默认的认为form表单提交是安全的,不管你跨域不跨域,随便提交,至于这个叫ajax的,既然你存在这种不安全行为,那只有限制一下了~

 

   

     总结一下,一般需要用到局部刷新的时候,ajax是最合适之选,一般提交操作页面会跳转的,使用form表单就行了。浏览器虽然出于安全的考虑对ajax做了跨域限制(说是限制其实设置了跨域属性还是能访问,呵呵哒),但真正容易出问题的,还是在接口,凡是暴露在外网的接口,后台程序对传递进来的参数都需要做验证和过滤处理,再进行下一步的操作。

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
maxQ的使用
MaxQ是一个Web功能测试工具。它包括一个记录测试脚本的HTTP代理,一个用于重放测试的命令行实用程序。代理记录器自动存储提交到表单的变量,那么你无需用手书写它们。
842 0
AJAX 使用
1. AJAX 1). 简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。 AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
752 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
7251 0
将jQuery Pagination分页插件用于不使用AJAX加载数据的页面
将jQuery Pagination分页插件用于不使用AJAX加载数据的页面,项目使用SpringMVC,使用Freemarker绑定数据,但分页显示样式不想自己处理,所以使用jQuery Pagination分页插件。
728 0
使用WCF实现SOA面向服务编程——使用AJAX+WCF服务“.NET技术”页面开发
  在上一篇讲到,如果将BLL层的每一个类都转化为*.svc,这是一个不实在的想法。它会使服务变化复杂,难于管理。   这时候,我们第一时间想到的是23个简单开发模式中的Factory,在这里,Factory正好派上用场。
869 0
+关注
sunshine.pl
我是默卿,是一个可爱的蓝孩子,半个ACG爱好者,生活在1.5次元,后端小萌新,喜欢各种有趣的事物。
77
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载