js——基于$.ajax实现数据的跨域增删查改
发布于 4 年前 作者 lei00 3044 次浏览 来自 分享

概述

之前我们学习了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）。

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

下表给出了相对http://store.company.com/dir/page.html同源检测的示例：

 

URL结果原因http://store.company.com/dir2/other.html成功 http://store.company.com/dir/inner/another.html成功 https://store.company.com/secure.html失败协议不同http://store.company.com:81/dir/etc.html失败端口不同http://news.company.com/dir/other.html失败主机名不同

 

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

跨域资源共享

__跨域资源共享（CORS）__是一份浏览器技术的规范，提供了Web服务器从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略，是JSONP模式的现代版。与JSONP不同，CORS除了支持GET方法以外，还支持其他HTTP方法。用CORS可以让网页设计师用一般的XMLHTTPRequest，这种方式的错误处理比JSONP要来的好。另一方面，JSONP可以在不支持CORS的老旧浏览器上运作，现代的浏览器都支持CORS。

在网页http://caniuse.com/#feat=cors上列出了主流浏览器对CORS的支持情况，包含PC端和移动端的浏览器。

回到顶部