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

• 同源策略和跨域概念
• 跨域资源共享
• JSONP概念
• REST Web Services
• 基于$.ajax实现跨域GET请求
• 基于$.ajax实现JSONP请求
• 基于$.ajax实现跨域POST请求
• 基于$.ajax实现跨域PUT请求
• 基于$.ajax实现跨域DELETE请求

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

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

我们可以简单粗暴地理解为同一站点下的资源相互访问都是同源的，跨站点的资源访问都是跨域的

2.跨域资源共享与JSONP不同，CORS除了支持GET方法以外，还支持其他HTTP方法

3.JSONP概念

由于同源策略，一般来说不允许JavaScript跨域访问其他服务器的页面对象，但是HTML的<script>元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

4.REST Web Services简介

HTTP协议是Web的标准之一，HTTP协议包含一些标准的操作方法，例如：GET, POST, PUT, Delete等，用这些方法能够实现对Web资源的CURD操作，下表列出了这些方法的操作定义。

在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的执行流程

AjaxHelper

基于$.ajax声明一个简单的AjaxHelper构造器，AjaxHelper构造器的原型对象包含5个方法，分别用于处理GET, POST, PUT, DELETE和JSONP请求。

function AjaxHelper() {

this.ajax = function(url, type, dataType, data, callback) {

$.ajax({

url: url,

type: type,

dataType: dataType,

data: data,

success: callback,

error: function(xhr, errorType, error) {

alert(‘Ajax request error, errorType: ‘ + errorType +  ‘, error: ‘ + error)

}

})

}

}

AjaxHelper.prototype.get = function(url, data, callback) {

this.ajax(url, ‘GET‘, ‘json‘, data, callback)

}

AjaxHelper.prototype.post = function(url, data, callback) {

this.ajax(url, ‘POST‘, ‘json‘, data, callback)

}

AjaxHelper.prototype.put = function(url, data, callback) {

this.ajax(url, ‘PUT‘, ‘json‘, data, callback)

}

AjaxHelper.prototype.delete = function(url, data, callback) {

this.ajax(url, ‘DELETE‘, ‘json‘, data, callback)

}

AjaxHelper.prototype.jsonp = function(url, data, callback) {

this.ajax(url, ‘GET‘, ‘jsonp‘, data, callback)

}

AjaxHelper.prototype.constructor = AjaxHelper

实现GET请求

发送get请求

var ajaxHelper = new AjaxHelper()

var demo = new Vue({

el: ‘#app‘,

data: {

gridColumns: [‘customerId‘, ‘companyName‘, ‘contactName‘, ‘phone‘],

gridData: [],

apiUrl: ‘http://localhost:15341/api/Customers‘

},

ready: function() {

this.getCustomers()

},

methods: {

getCustomers: function() {

// 定义vm变量，让它指向this,this是当前的Vue实例

var vm = this,

callback = function(data) {

// 由于函数的作用域，这里不能用this

vm.$set(‘gridData‘, data)

}

ajaxHelper.get(vm.apiUrl, null, callback)

}

}

})

由于客户端和服务端Web API是分属于不同站点的，它们是不同的源，这构成了跨域请求。
这时请求是失败的，浏览器会提示一个错误：
No ‘Access-Control-Allow-Origin‘ header is present on the requested resource. Origin ‘http://127.0.0.1::8020‘ is therefore not allowed access.         

跨域解决方案

现在碰到了请求跨域的问题，结合前面讲的一些概念，我们大致可以猜到解决跨域请求的两种方式：

• 在服务端启用CORS。
• 让无服务端拥有处理JSONP的能力。

这两种跨域解决方案的区别是什么呢？

• JSONP只支持GET请求；CORS则支持GET、POST、PUT、DELETE等标准的HTTP方法
• 使用JSONP时，服务端要处理客户端请求的callback参数（"callback"这个名称是可以指定的）；而使用CORS则不需要提供这样的处理。
• JSONP从服务端获取到的是script文件；CORS则是一段XML或JSON或其他格式的数据
• JSONP支持IE8, IE9复古的浏览器；CORS则支持现代主流的浏览器

选择JSONP还是CORS？除了极少数的情况，我们都应当选择CORS作为最佳的跨域解决方案。

vue---$ajax

原文：https://www.cnblogs.com/benbenjia/p/12058710.html