zoukankan      html  css  js  c++  java
  • 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)。

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

  • 相关阅读:
    最简单的基于FFMPEG+SDL的音频播放器 ver2 (採用SDL2.0)
    JBPM——工作流概念
    android项目中的拍照和本地图片截图
    hunnu--11547--你的组合数学学得怎样?
    POJ 2253
    [ACM] POJ 3349 Snowflake Snow Snowflakes(哈希查找,链式解决冲突)
    Redis简述
    C/C++,从未过时的编程语言之父
    Android4.4 Framework分析——getContentResolver启动ContentProvider的过程
    2012_p2 寻宝 (treasure.cpp/c/pas)
  • 原文地址:https://www.cnblogs.com/theau/p/14206779.html
Copyright © 2011-2022 走看看