ajax哪些方法可以ajax如何实现跨域域以及各自的局限性

本文为作者原创未经博主允许,不可转载

ajax请求的常用的参数设置:

url:发送请求的地址
dataType:预期服务器返回的数据类型如果不指定,jQuery将自动根据http包MIME信息来智能判断一般我們采用json格式,
success:是一个方法请求成功后的回调函数,传入返回后的数据以及包含成功代码的字符串
error:是一个方法,请求失败时调用此函數传入XMLHTTPRequest对象。

并根据得到的数据做出想要的处理或操作比如:提交form表单,进行文件上传刷新表单数据等。

GET请求会将参数跟在URL后进行傳递而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然在Ajax请求中这种区别对用户是不可见的。

另外ajax常用的属性和方法为:

4.jsonp可用于解決主流浏览器的跨域数据访问的问题...(具体需要上网且该方法存在较强的局限性)

由 于此前很少写前端的代码(哈哈不合格的程序员啊),最近项目中用到json作为系统间交互的手段自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题本篇将讲述┅个小白从遇到跨域不知道是跨域问题,到知道是跨域问题不知道如何解决再到解决跨域问题,最后找到两种方法解决ajax 跨域问题的全过程

起 因是这样的,为了复用减少重复开发,单独开发了一个用户权限管理系统共其他系统获取认证与授权信息,暂且称之为A系统;調用A系统以B为例在B系统 中用ajax调用A系统系统的接口(数据格式为json),当时特别困惑在A系统中访问相应的url可正常回返json数据,但是在B系统中使用 ajax請求同样的url则一点儿反应都没有好像什么都没有发生一样。这样反反复复改来改去好久都没能解决于是求救同事,提醒可能是ajax跨域问 題于是就将这个问题当做跨域问题来解决了。

知道问题的确切原因剩下的就是找到解决问题的方法了。google了好久再次在同事的指点下知道jQuery的ajax有jsonp这样的属性可以用来解决跨域的问题。

现在也知道了怎样来解决跨域问题余下的就是实现的细节了。实现的过程中错误还是避免不了的由于不了解json和两种格式的区别,也犯了错误google了好久才解决。

首先来看看在页面中如何使用jQuery的ajax解决跨域问题的简单版:

这样写昰完全没有问题的起先error的处理函数中仅仅是alert(“error”),为了进一步弄清楚是什么原因造成了错误故将处理函数变 为上面的实现方式。最后┅行alert使用为;parsererror百思不得其解,继续google最终还是在万能的stackoverflow找 到了答案,链接在原因是jsonp的格式与json格式有着细微的差别,所以在server端的代码上稍稍有所不同

比较一下json与jsonp格式的区别:

看出来区别了吧,在url中callback传到后台的参数是神马callback就是神马jsonp比json外面有多了一层,callback()这样就知道怎么處理它了。于是修改后台代码

后台java代码最终如下:

注意这里需要先将查询结果转换我json格式,然后用参数callback在json外面再套一层就变成了jsonp。指萣数据类型为jsonp的ajax就可以做进一步处理了

虽然这样解决了跨域问题,还是回顾下造成parsererror的原因原因在于盲目的把json格式的数据当做jsonp格式的数據让ajax处理,造成了这个错误此时server端代码是这样的:

至此解决ajax跨域问题的第一种方式就告一段落。

追求永无止境在google的过程中,无意中发現了一个专门用来解决跨域问题的jQuery插件-

有第一种方式的基础,使用jsonp插件也就比较简单了server端代码无需任何改动。

来看一下如何使用jquery-jsonp插件解决跨域问题吧

至此两种解决跨域问题的方式就全部介绍完毕。

我们先回顾一下域名地址的组成:

也就是在页面中声明在页面中调用。但是JSONP只支持 “GET” 请求但不支持 “POST” 请求。

三、处理跨域的方法2 -- XHR2(推荐方法)

“XHR2” 全称 “XMLHttpRequest Level2” 是HTML5提供的方法对跨域访问提供了很好的支持,并且还有一些新的功能

* IE10一下的版本都不支持

* 只需要在服务器端头部加上下面两句代码:

关于 “XHR2” 的更多信息大家可以查看官方文档,在这里就不详细叙述了总之这是这个很好用的方法。

以上所述就是本文的全部内容了希望大镓能够喜欢。

我要回帖

更多关于 ajax如何实现跨域 的文章

 

随机推荐