• 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)。

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

  • 相关阅读:
    读写分离
    java并发集合知识点(二)
    jdbc框架有很多,包括spring jdbc
    多线程,势必涉及到共享对象读写问题
    <xliff:g>标签
    租赁市场的上海方(浦东/张江)
    HDU 3488Tour(流的最小费用网络流)
    sql使用存储过程和交易
    状态压缩动态规划 -- 骨牌
    Android-2手机应用程序,短信应用
  • 原文地址:https://www.cnblogs.com/theau/p/14206779.html
Copyright © 2020-2023  润新知