服务端php解决jquery ajax跨域请求restful api问题及实践

广告位招租
扫码页面底部二维码联系

在面向api的系统设计思维指导下,开发一【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。套通用的,遵循restful风格的api未经授权,禁止复制转载。【原创内容,转载请注明出处】系统,提供给多终端使用已经是开发的一个趋著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。势。首先,api遵循restful风格(【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】规范)可以让项目在大家都认同的风格上去撰转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】写,无论哪一位程序员接手项目,都可以很快【转载请注明来源】【原创内容,转载请注明出处】解决对项目的熟悉度问题。其次,系统统一像【作者:唐霜】【关注微信公众号:wwwtangshuangnet】外提供api,实现跨终端的接口接入,可以原创内容,盗版必究。【原创不易,请尊重版权】只写一套api文档,就可以为安卓、ios【原创不易,请尊重版权】【原创内容,转载请注明出处】、web端的开发人员服务。除了一些敏感的【本文首发于唐霜的博客】未经授权,禁止复制转载。后台管理员操作,我在用户数据获取、操作这【作者:唐霜】【未经授权禁止转载】块,全部采用api来实现。

【原创内容,转载请注明出处】【版权所有,侵权必究】【原创不易,请尊重版权】转载请注明出处:www.tangshuang.net【作者:唐霜】

在web开发中,如果让webapp去请求【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。我们上述的api,就要思考这种通信的机制【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net问题。在原来的做法中,web界面通过请求著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】一个自己域名下的url,而在这个url的【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】背后,用一个php去构建一个curl或f【未经授权禁止转载】本文作者:唐霜,转载请注明出处。sockopen,从而实现与api的交互【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。。或者通过jsonp的方式,在请求的时候【本文受版权保护】【本文首发于唐霜的博客】,在javascript中多写一个回调函【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net数来进行处理。但是,这些方法都相对比较麻本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】烦,并不直观。

本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】【作者:唐霜】【作者:唐霜】

从restful的设计上来讲,一套好的a原创内容,盗版必究。未经授权,禁止复制转载。pi,应该是可访问没有阻碍的。也就是说作【关注微信公众号:wwwtangshuangnet】【本文首发于唐霜的博客】为客户端开发,并不需要在开发交互的过程中著作权归作者所有,禁止商业用途转载。【作者:唐霜】,另外再去开发一套交互机制,而应该是通过【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。本身拥有的机制就可以实现的交互。比如jq本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.netuery提供了$.ajax的方法,便提供著作权归作者所有,禁止商业用途转载。【本文受版权保护】给了开发者最便捷的配置。我们来看下它的实【版权所有,侵权必究】转载请注明出处:www.tangshuang.net际操作例子:

【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。
$.ajax({
  url: url,
  type: 'POST',
  data: {id:id},
  dataType: 'json',
  success: function(data) {},
  error: function(XMLHttpRequest, textStatus, errorThrown) {},
  complete: function(XMLHttpRequest, textStatus) {}
});

在restful风格的api设计中,与以【转载请注明来源】本文作者:唐霜,转载请注明出处。往最明显的不同就是,通过http1.0版【本文受版权保护】未经授权,禁止复制转载。本所提供的GET、POST、PUT、DE【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.netLETE来表示获取、创建、更新、删除四个【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。基本动作,在对某个资源进行操作时,无需再【转载请注明来源】【本文首发于唐霜的博客】提供操作的动作关键词,即可完成。所以,上本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】面代码中的type:’POS【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。T’,可以换成type:&#【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。8217;PUT’或者typ未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】e:’DELETE̵未经授权,禁止复制转载。【原创内容,转载请注明出处】7;来表示不同的操作类型。

著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】

当然,为了简洁开发,也可以将$.ajax【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。使用便捷的$.get、$.post:

【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。
$.post(url,data,success(data){},'json').error(function(XMLHttpRequest, textStatus, errorThrown){});

它们的效果其实是一样的。【版权所有】唐霜 www.tangshuang.net

【版权所有,侵权必究】【本文受版权保护】著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。

dataType:’json【本文首发于唐霜的博客】【转载请注明来源】’则相当于在http请求的头【作者:唐霜】【作者:唐霜】部设置了Accept字段,要求api返回著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。对应的资源类型。比如我们还可以更换为:d【本文受版权保护】原创内容,盗版必究。ataType:’xml&#【原创内容,转载请注明出处】【原创内容,转载请注明出处】8217;或dataType:̵著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】7;html’。

【关注微信公众号:wwwtangshuangnet】【原创不易,请尊重版权】原创内容,盗版必究。

而success则是在api返回2xx状【未经授权禁止转载】未经授权,禁止复制转载。态码时的响应,error则是返回4xx、原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net5xx时的响应。这和我们在api开发时,【原创内容,转载请注明出处】原创内容,盗版必究。提供准确的http状态码一一对应,可以说原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。是restful的最佳实践基础。

【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】

总之$.ajax帮我们完成了javasc本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。ript端发出http请求的基本操作,我著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】们没有理由再用一些复杂的方法去重新构建一转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。套web和api的交互机制。

转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【作者:唐霜】

接下来就是跨域问题,众所周知,$.aja【版权所有,侵权必究】【原创内容,转载请注明出处】x在请求跨域名资源时,会出于安全考虑被服未经授权,禁止复制转载。未经授权,禁止复制转载。务端拒绝。有没有什么办法可以让服务端可以本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。允许有条件的跨域呢?我们在api端的ph转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。p代码中,加入如下代码:

转载请注明出处:www.tangshuang.net【未经授权禁止转载】【作者:唐霜】【关注微信公众号:wwwtangshuangnet】
header('Access-Control-Allow-Origin:http://webapp.yourdomain.com');
header('Access-Control-Allow-Headers:X-Requested-With');
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE');

在php的响应头部加入上述的规则之后,a【访问 www.tangshuang.net 获取更多精彩内容】【作者:唐霜】pi允许来自webapp域名的跨域请求,【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】请求的模式仅包括GET、PUT、POST转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net、DELETE四种。

【作者:唐霜】著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。

如此一来,在webapp的开发中,就可以【本文受版权保护】【原创不易,请尊重版权】无障碍的使用$.ajax进行api的交互本文作者:唐霜,转载请注明出处。【作者:唐霜】了。

【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。

相关文章:【版权所有,侵权必究】

【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net

2016-03-12 10192

为价值买单,打赏一杯咖啡

本文价值101.92RMB
已有3条评论
  1. […] 最后,在我们使用ajax进行跨域请求的时候,还可以通过在服务端进行一些配置,可以让ajax在请求对应域名时,可以被正常接受。请看《服务端php解决jquery ajax跨域请求restful api问题及实践》《jquery ajax 请求中多出现一次OPTIONS请求及其解决办法》这两篇文章,可以帮你解决服务端是php的应用程序的配置方法。 […]

  2. […] 在上一篇《服务端php解决jquery ajax跨域请求restful api问题及实践》中,我简单介绍了如何通过服务端解决jquery ajax的跨域请求问题,但是,在这个过程中,我们会发现,在很多post,put,delete等请求之前,会有一次options请求。本文主要是来讨论一下这是什么原因引起的。 […]

  3. 记in阿基米|唐霜 2016-03-12 11:55

    […] 解决webapp使用ajax跨域请求的问题 […]