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做了跨域限制(说是限制其实设置了跨域属性还是能访问,呵呵哒),但真正容易出问题的,还是在接口,凡是暴露在外网的接口,后台程序对传递进来的参数都需要做验证和过滤处理,再进行下一步的操作。

 

目录
相关文章
|
XML JSON 前端开发
Ajax:初次认识ajax,ajax使用方法
Ajax:初次认识ajax,ajax使用方法
Ajax:初次认识ajax,ajax使用方法
|
XML JSON 前端开发
Ajax保姆级使用攻略
Ajax保姆级使用攻略
Ajax保姆级使用攻略
|
前端开发
Ajax-04:使用Ajax前的准备工作
Ajax-04:使用Ajax前的准备工作
139 0
Ajax-04:使用Ajax前的准备工作
|
JSON JavaScript 前端开发
Jquery 中Ajax使用的四种情况
         $(document).ready(function(){   //Jquery 页面加载事件,当页面加载之后首先执行这个方法                  //第一种Ajax请求         $.
835 0
|
Web App开发 JavaScript 前端开发
AJAX 使用
1. AJAX 1). 简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。 AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
865 0
|
Web App开发 JavaScript 前端开发
|
前端开发 JavaScript Java
|
JSON 前端开发 JavaScript
各种AJAX方法的使用比较
原文http://www.cnblogs.com/fish-li/archive/2013/01/13/2858599.html 阅读目录 开始 第一代技术:生成客户端代理脚本调用服务端 新技术的改进方向 第二代技术:jQuery直接调用WebService 第三代技术:更简单的数据格式 第四代技术:直接提交表单 多submit按钮的提交(用jQuery.
1155 0
|
5月前
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
39 0
|
4月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
58 0