Vue.js——基于$.ajax实现数据的跨域增删查改

之前我们学习了Vue.js的一些基础知识，以及如何开发一个组件，然而那些示例的数据都是local的。
在实际的应用中，几乎90%的数据是来源于服务端的，前端和服务端之间的数据交互一般是通过ajax请求来完成的。

说起ajax请求，大家第一时间会想到jQuery。除了拥有强大的DOM处理能力，jQuery提供了较丰富的ajax处理方法，它不仅支持基于XMLHttpRequest的ajax请求，也能处理跨域的JSONP请求。

之前有读者问我，Vue.js能结合其他库一起用吗？答案当然是肯定的，Vue.js和jQuery一起使用基本没有冲突，尽可放心大胆地使用。

本文的主要内容如下：

同源策略和跨域概念
跨域资源共享
JSONP概念
REST Web Services
基于$.ajax实现跨域GET请求
基于$.ajax实现JSONP请求
基于$.ajax实现跨域POST请求
基于$.ajax实现跨域PUT请求
基于$.ajax实现跨域DELETE请求
本文的服务端程序和客户端程序是部署在不同服务器上的，本文所有示例请求都是跨域的。
源代码已放到GitHub，如果您觉得本篇内容不错，请点个赞，或在GitHub上加个星星！

CORS GET JSONP GET CORS POST CORS PUT 完整CURD示例 GitHub Source
基础概念
在进入本文正题之前，我们需要先了解一些基础概念（如果你已经对这些基础有所了解，可跳过此段落）。

同源策略和跨域概念
同源策略（Same-orgin policy）限制了一个源（orgin）中加载脚本或脚本与来自其他源（orgin）中资源的交互方式。
如果两个页面拥有相同的协议（protocol），端口（port）和主机（host），那么这两个页面就属于同一个源（orgin）。

同源之外的请求都可以称之为跨域请求。