ajax和json的对应区别,我的前端故事----Ajax方式和jsonp的实现区别

很久没有更新博客了，毕业2个月了，这段时间一直在忙于工作，一直没有时间更新，最近做的活动突然发现之前的经验居然忘记了。。。索性想想还是重新开始用博客记录平日里的工作经验吧，吐槽就到这里了，这篇记录的是我在平日里经常用到的请求后端的方式。

大多数情况下，无论是框架还是自己实现都是通过Ajax的方式来向后端请求数据的，而Ajax之间是通过传输json格式的文件来进行数据的传输的，大家对Ajax也很熟悉了，那么为什么我又要使用jsonp呢？这就要从什么是jsonp，什么是json来说一说了。

json是一种格式，而jsonp是一种调用方式，那么在大家都使用Ajax的情况下为什么我不用呢？因为Ajax作为脚本出于安全的考虑，是不允许访问非同源的内容的。那么如果我的前端活动页面和后端的服务器不在一个域名下该如何请求数据呢？这个时候就需要jsonp的方式来解决跨域的问题了。

那么为什么jsonp可以跨域呢？其中的原理又是什么呢？我们下面就来介绍一下jsonp跨域的原理。

因为同源策略的的原因，对于一个浏览器的页面只有来自一个源的脚本才可以被执行，这样的目的是为了安全性，可是却阻止了数据的请求，所以我们就要从绕开同源策略来入手，什么情况下允许跨域请求呢？那就是静态资源！静态资源是不受域策略限制的，可以加载任意域的脚本、样式、图片等静态资源，JSOP就是利用这种原理来实现跨域获取数据的。

我们将需要的json数据放在js文件中进行传输，这样就可以将需要的数据通过静态文件的形式传过来了，那么我们就来讲讲具体是如何实现的呢？

由于是静态文件，所以我们在请求的时候首先需要建立一个静态资源的DOM元素，例如这样的标签：

那么我们就来一步步的构建这个DOM标签吧，首先通过document.createElement(‘script’);来建立一个script标签，然后设置它的src属性指向需要请求的URL地址，然后将这个元素添加在body中，最后出于安全我们要将刚刚新建的标签在完成请求后删除掉。

在这里我把我写的一个封装好的函数贴出来，很简单的一个函数就说明了一切~

/*

* Created by jonnyf on 15-9-15.

* 这个函数是通过JSONP的方式请求后端接口

* 需要传入三个参数，

* url为请求的接口地址，类型为字符串

* parameter为请求的参数对象，类型为对象

* callback为完成请求后的回调函数名称， 类型为字符串

*/

function getJSONP(url, parameter, callback) {

var Script = document.createElement('script'),

_parameter = parameter,

_url = url,

_callback = callback,

code = '';

for (var i in _parameter) {

code += i + '=' + _parameter[i] + '&'

}

Script.src = _url + '?' + code + 'callback=' + _callback;

document.body.appendChild(Script);

Script.onload = function(){ // 请求成功后移除标签

Script.remove();

}

Script.onerror = function() { // 失败的时候也要移除标签

alert('请求错误, 请重试');

Script.remove();

};

}

太久没有记录了。。。已经忘记了太多了，这篇就先简单的记录一点点吧，逐渐再恢复常写博客的习惯了~~

最后祝大家中秋节快乐~ ~~

前端之ajax

前端之ajax 本节内容 ajax介绍 原生js实现ajax jquery实现ajax json 跨域请求 1. ajax介绍 AJAX(Asynchronous Javascript And XML ...

第七篇：web之前端之ajax

前端之ajax   前端之ajax 本节内容 ajax介绍 原生js实现ajax jquery实现ajax json 跨域请求 1. ajax介绍 AJAX(Asynchronous Javascri ...

python笔记-20 django进阶 (model与form、modelform对比，三种ajax方式的对比，随机验证码，kindeditor)

一.model深入 1.model的功能 1.1 创建数据库表 1.2 操作数据库表 1.3 数据库的增删改查操作 2.创建数据库表的单表操作 2.1 定义表对象 class xxx(models.M ...

跨域请求方式之Jsonp形式

在浏览器端才有跨域安全限制一说,而在服务器端是没有跨域安全限制的. 在两个异构系统(开发语言不同)之间达到资源共享就需要发起一个跨域请求. 而浏览器的同源策略却限制了从一个源头的文档资源或脚本资源与来 ...

Ajax请求利用jsonp实现跨域

跨域: js有一个同源限制,简单说来源不一样的话就无法相互间交互.那么怎么算来源不一样呢, 举个例子:浏览器访问-->服务器A--->得到页面A---页面A中的js脚本只能访问服务器A的资 ...

js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)

最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家,需要了解的朋友可以参考下 ...

OSS web直传 ajax方式 上传图片、文件

部分js代码 send_request = function(){//这是从后台获取认证策略等信息. var htmlobj=$.ajax({url:root+"/service/polic ...

AJAX方式发送远程请求报错：No 'Access-Control-Allow-Origin' header

AJAX GET方式发送远程请求,chrome开发者工具console中报错:XMLHttpRequest cannot load http://www.shikezhi.com/ajax/getDa ...

ajax方式下载文件

在web项目中需要下载文件,由于传递的参数比较多(通过参数在服务器端动态下载指定文件),所以希望使用post方式传递参数.通常,在web前端需要下载文件,都是通过指定标签的href属 ...

随机推荐

【Java EE 学习 71 上】【数据采集系统第三天】【增加页面】【增加问题】【编辑页面，编辑问题】

增加页面和编辑页面.增加问题和编辑问题的页面使用的都是相同的页面,最后调用的方法是saveOrUpdate方法,所以只说一个就可以了. 一.增加页面 比较简单,略.流程如下: 单击“增加页”超链接-& ...

three.js贴图

使用图像作为材质.这时候,就需要导入图像作为纹理贴图,并添加到相应的材质中 /p>

Android系统调用

android 中intent是经常要用到的.不管是页面牵转,还是传递数据,或是调用外部程序,系统功能都要用到intent. 在做了一些intent的例子之后,整理了一下intent,希望对大家有用. ...

Windows添加和取消右键管理员权限

亲测可用 新建文本文档,粘贴下列代码 Windows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\*\shell\runas]@="管理员取 ...

HighCharts学习笔记(二)HighCharts结构及详细配置

HighCharts结构及详细配置: 一.HighCharts整体结构: 通过查看API文档我们知道HighCharts结构如下:(API文档在文章后面提供下载) var chart = new Hi ...

解决Genymotion下载设备失败的方法(Connection Timeout)

一直下载不下来,报错. 解决办法: 打开 C:\Users\用户名\AppData\Local\Genymobile目录 打开genymotion.log文件,在里面最下面几行,找到如下日志 [Deb ...

Visual Basic相关图书推荐

Visual Basic从入门到精通(第2版) 作      者 国家863中部软件孵化器 编 出 版 社 人民邮电出版社 出版时间 2015-03-01 版      次 2 页      数 61 ...

【iOS开发】添加子控件方式(懒加载，GCC)

// // ViewController.m // GCC // // Created by admin on 15/10/7. // Copyright © 2015年 admin. All rig ...

egret命令行编译项目时 版本不对应的问题

egret 命令行编译项目时 如使用 egret build -e 会出现版本不对应的问题 分析原因 A,B项目 A项目使用1.8的egret引擎, B项目使用2.5引擎 但本地引擎升级至2.5.5, ...

jquery遍历筛选数组的几种方法和遍历解析json对象

jquery grep()筛选遍历数组 $().ready(    function(){        var array = [1,2,3,4,5,6,7,8,9];        var fil ...