基础概念
在进入本文正题之前，我们需要先了解一些基础概念（如果你已经对这些基础有所了解，可跳过此段落）。
同源策略和跨域概念
同源策略（Same-orgin policy）限制了一个源（orgin）中加载脚本或脚本与来自其他源（orgin）中资源的交互方式。
如果两个页面拥有相同的协议（protocol），端口（port）和主机（host），那么这两个页面就属于同一个源（orgin）。
同源之外的请求都可以称之为跨域请求。
下表给出了相对http://store.company.com/dir/page.html同源检测的示例：
我们可以简单粗暴地理解为同一站点下的资源相互访问都是同源的，跨站点的资源访问都是跨域的。
跨域资源共享
跨域资源共享（CORS）是一份浏览器技术的规范，提供了Web服务器从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略，是JSONP模式的现代版。与JSONP不同，CORS除了支持GET方法以外，还支持其他HTTP方法。用CORS可以让网页设计师用一般的XMLHTTPRequest，这种方式的错误处理比JSONP要来的好。另一方面，JSONP可以在不支持CORS的老旧浏览器上运作，现代的浏览器都支持CORS。
在网页http://caniuse.com/#feat=cors上列出了主流浏览器对CORS的支持情况，包含PC端和移动端的浏览器。
JSONP概念
由于同源策略，一般来说不允许JavaScript跨域访问其他服务器的页面对象，但是HTML的<script>元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。
REST Web Services简介
HTTP协议是Web的标准之一，HTTP协议包含一些标准的操作方法，例如：GET, POST, PUT, Delete等，用这些方法能够实现对Web资源的CURD操作，下表列出了这些方法的操作定义。
| HTTP方法 | 资源处理 | 说明 |
|---|---|---|
| GET | 读取资源（Read） | 获取被请求URI（Request-URI）指定的信息（以实体的格式）。 |
| POST | 创建资源（Create） | 在服务器上创建一个新的资源，并返回新资源的URI。 |
| PUT | 更新资源（Update） | 指定URI资源存在则更新资源，指定URI资源不存在则创建一个新资源。 |
| DELETE | 删除资源（Delete） | 删除请求URI指定的资源。 |
在REST应用中，默认通过HTTP协议，并且使用GET、POST、PUT和DELETE方法对资源进行操作，这样的设计风格和Web标准完全契合。
REST的最佳应用场景是公开服务，使用HTTP并遵循REST原则的Web服务，我们称之为RESTful Web Service。RESTful Web Service从以下三个方面进行资源定义：
- 直观简短的资源地址：URI，比如：http://example.com/resources/
- 传输的资源：Web Service接受与返回的互联网媒体类型，比如JSON，XML等
- 对资源的操作：Web Service在该资源上所支持的一系列请求方法（比如：GET，POST，PUT或Delete）
下图展示了RESTful Web Service的执行流程
本文的服务端程序是基于ASP.NET Web API构建的。
在了解了这些基础知识后，我们就分别来构建服务端程序和客户端程序吧。
http://kb.cnblogs.com/page/139725/
方法一：在后端代码的头部加入这个代码（php示例）
header("Access-Control-Allow-Origin:*");
或者
header("Access-Control-Allow-Origin:url地址");
方式二：
Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>
ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心原理则是动态添加<script>标签来调用服务器提供的js脚本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <script type="text/javascript" src=jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ $.ajax({ type: "get", async: false, url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998", dataType: "jsonp", jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据 success: function(json){ alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。'); }, error: function(){ alert('fail'); } }); }); var flightHandler = function(data){ alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。'); </script> </head> <body> </body> </html>
jquery在处理jsonp类型的ajax时，自动帮你生成回调函数并把数据取出来供success属性方法来调用