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

概述

之前的开发中示例数据都是local的,实际都是服务端的数据。

前端和服务端之间的数据交互一般是通过ajax请求来完成的。

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

Vue.js和jQuery一起使用基本没有冲突,尽可放心大胆地使用。

本文的主要内容如下:

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

本文的服务端程序和客户端程序是部署在不同服务器上的,本文所有示例请求都是跨域的。

基础概念

同源策略和跨域概念

同源策略(Same-orgin policy)限制了一个源(orgin)中加载脚本或脚本与来自其他源(orgin)中资源的交互方式。

如果两个页面拥有相同的协议(protocol),端口(port)和主机(host),那么这两个页面就属于同一个源(orgin)。

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

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

 

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

上一篇:宽度 | @viewport.width (Device Adaptation) – CSS 中文开发手册


下一篇:【Ajax】XMLHttpRequest().readyState的五个状态(0,1,2,3,4)