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

在面向api的系统设计思维指导下，开发一套通用的，遵循restful风格的api系统，提供给多终端使用已经是开发的一个趋势。首先，api遵循restful风格(规范)可以让项目在大家都认同的风格上去撰写，无论哪一位程序员接手项目，都可以很快解决对项目的熟悉度问题。其次，系统统一像外提供api，实现跨终端的接口接入，可以只写一套api文档，就可以为安卓、ios、web端的开发人员服务。除了一些敏感的后台管理员操作，我在用户数据获取、操作这块，全部采用api来实现。

在web开发中，如果让webapp去请求我们上述的api，就要思考这种通信的机制问题。在原来的做法中，web界面通过请求一个自己域名下的url，而在这个url的背后，用一个php去构建一个curl或fsockopen，从而实现与api的交互。或者通过jsonp的方式，在请求的时候，在javascript中多写一个回调函数来进行处理。但是，这些方法都相对比较麻烦，并不直观。

从restful的设计上来讲，一套好的api，应该是可访问没有阻碍的。也就是说作为客户端开发，并不需要在开发交互的过程中，另外再去开发一套交互机制，而应该是通过本身拥有的机制就可以实现的交互。比如jquery提供了$.ajax的方法，便提供给了开发者最便捷的配置。我们来看下它的实际操作例子：

$.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、DELETE来表示获取、创建、更新、删除四个基本动作，在对某个资源进行操作时，无需再提供操作的动作关键词，即可完成。所以，上面代码中的type:'POST'，可以换成type:'PUT'或者type:'DELETE'来表示不同的操作类型。

当然，为了简洁开发，也可以将$.ajax使用便捷的$.get、$.post：

$.post(url,data,success(data){},'json').error(function(XMLHttpRequest, textStatus, errorThrown){});

它们的效果其实是一样的。

dataType:'json'则相当于在http请求的头部设置了Accept字段，要求api返回对应的资源类型。比如我们还可以更换为：dataType:'xml'或dataType:'html'。

而success则是在api返回2xx状态码时的响应，error则是返回4xx、5xx时的响应。这和我们在api开发时，提供准确的http状态码一一对应，可以说是restful的最佳实践基础。

总之$.ajax帮我们完成了javascript端发出http请求的基本操作，我们没有理由再用一些复杂的方法去重新构建一套web和api的交互机制。

接下来就是跨域问题，众所周知，$.ajax在请求跨域名资源时，会出于安全考虑被服务端拒绝。有没有什么办法可以让服务端可以允许有条件的跨域呢？我们在api端的php代码中，加入如下代码：

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的响应头部加入上述的规则之后，api允许来自webapp域名的跨域请求，请求的模式仅包括GET、PUT、POST、DELETE四种。

如此一来，在webapp的开发中，就可以无障碍的使用$.ajax进行api的交互了。

相关文章：

2016-03-12

5732