JSONP技术

JSONP是解决跨域问题的一种常见方式

跨域问题,因为浏览器有同源策略,所以当不同域间进行数据交互的时候就会出现跨域问题

同源策略:只有在同协议、同域名、同端口的情况下才能进去数据交互

JSONP的原理:可以利用script标签(会使用回调函数来接收数据)的src属性不受同源策略的影响,可以请求到不同域的数据,通过设置回调函数来接收数据

JSONP是前后端结合的跨域方式:因为前端请求到数据后需要在回调函数中使用,所以后端得将数据放回到回调函数中

JSONP属于AJAX吗?

ajax是指通过使用xmlhttprequest对象进行异步数据交互的技术,JSONP是依靠script标签的src属性来获取的,不属于ajax

JSONP有什么缺点,使用的时候需要注意什么 ?

1.只能get处理,不能post跨域处理问题

2.需要注意的是:每次请求应该动态的创建script标签和回调函数,数据获取完成后销毁。

如果method是jsonp的话,就可以用jsonp去跨域请求,但是注意要在url后写关于callback的值为JSON_CALLBACK

百度搜索小例子

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myapp">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
  9. </head>
  10. <body>
  11. <div ng-controller="yourController">
  12. <input type="text" ng-change="search()" ng-model="wd">
  13. <ul>
  14. <li ng-repeat="word in dataList"><a href="https://www.baidu.com/s?ie=utf-8&wd={{word}}">{{word}}</a></li>
  15. </ul>
  16. </div>
  17. <script src="./base/angular.min.js"></script>
  18. <script src="./base/angular-sanitize.js"></script>
  19. <script>
  20. var app = angular.module("myapp", ['ngSanitize'])
  21. app.controller("yourController", function($scope, $http) {
  22. $scope.search = function() {
  23. $http({
  24. url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
  25. method: "jsonp",
  26. params: {
  27. wd: $scope.wd,
  28. cb: 'JSON_CALLBACK'
  29. }
  30. }).success(function(results) {
  31. $scope.dataList = results.s
  32. })
  33. }
  34. })
  35. </script>
  36. </body>
  37. </html>

AJAX

ajax是指通过使用xmlhttprequest对象进行异步数据交互的技术,实现无刷新状态更新页面和异步提交

ajax实现过程:

  1. 创建xmlhttprequest对象
  2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
  3. 设置向响应HTTP请求状态变化的函数
  4. 发送HTTP请求
  5. 获取异步调用返回的数据
  6. 使用JavaScript和DOM实现局部刷新

优点:

  1. 不需要插件支持
  2. 用户体验极佳
  3. 提升web程序性能
  4. 减轻服务器和宽带的负担

缺点:

  1. 前进后提按钮被破坏
  2. 搜索引擎的支持不够
  3. 开发调试工具缺乏

JSON

JSON和XML一样也是一种简单文本格式。是一种比较流行的标准格式,是数据的载体,相对于XML。JSON更加易读、更便于肉眼检查。在语法的层面上,JSON与其他格式的区别是在于分隔数据的字符,JSON中的分隔符限于单引号、小括号、中括号、大括号、冒号和逗号

优点:

  1. 作为一种数据传输格式,JSON与XML很相似,但是它更加灵巧。
  2. JSON不需要从服务器端发送含有特定内容类型的首部信息

缺点:

  1. 语法过于严谨
  2. 代码不易读
  3. eval函数存在风险

jsonp,ajax,json问题的更多相关文章

  1. 前端跨域问题,以及ajax,jsonp,json的区别

    看了很多网上的资料,小七感觉都没有完全解决我的疑惑以及问题,所以特意拿出通俗易懂的话讲解跨域问题,以及ajax,jsonp,json的区别.首先先说跨域问题什么时候需要跨域?[1]域名不同(即网址不同 ...

  2. Django 之Ajax&Json&CORS&同源策略&Jsonp用法

    什么是Json 定义: JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规范)的一个子集 ...

  3. php ajax json jquery 记录

    php+jquery+ajax+json简单小例子 <html> <title>php+jquery+ajax+json简单小例子</title> <?php ...

  4. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  5. AJAX && JSON之讲解

    Ajax技术的核心是XMLHttpRequest对象(简称XHR),可以通过使用XHR对象获取到服务器的数据,然后再通过DOM将数据插入到页面中呈现.虽然名字中包含XML,但Ajax通讯与数据格式无关 ...

  6. struts2 + ajax + json的结合使用,实例讲解

    struts2用response怎么将json值返回到页面javascript解析,这里介绍一个struts2与json整合后包的用法. 1.准备工作 ①ajax使用Jquery:jquery-1.4 ...

  7. AJAX,JSON搜索智能提示

    效果 开发结构参考AJAX,JSON用户校验 主要有两个核心文件 1,处理输入字符,进行后台搜索的servlet Suggest.java package org.guangsoft.servlet; ...

  8. 练习 jquery+Ajax+Json 绑定数据 分类: asp.net 练习 jquery+Ajax+Json 绑定数据 分类: asp.net

    练习 jquery+Ajax+Json 绑定数据

  9. Jquery+ajax+json+servlet原理和Demo

    Jquery+ajax+json+servlet原理和Demo 大致过程: 用户时间点击,触发js,设置$.ajax,开始请求.服务器响应,获取ajax传递的值,然后处理.以JSON格式返回给ajax ...

  10. 玩转Web之Json(一)-----easy ui+ajax + json 中关于Json的解析问题

    在easy ui中使用Ajax+Json实现前后的数据交互时,当后台数据传输到客户端是需对Json数据进行解析,这里将对Json数据解析做简单总结. (一) 对于服务器返回的数据若没有做类型说明,需要 ...

随机推荐

  1. conductor编译镜像

    # git clone https://github.com/Netflix/conductor.git # git checkout -b 2.0 remotes/origin/2.0 # cd s ...

  2. 安装PostGIS 2.1.1 时遇到checking for library containing GDALAllRegister... no

    在postgis中执行./configure时,遇到 checking for library containing GDALAllRegister... no 的错误信息 [root@test po ...

  3. HashMap、LinkedHashMap、ConcurrentHashMap、ArrayList、LinkedList 底层实现

    HashMap相关问题 1.你用过HashMap吗?什么是HashMap?你为什么用到它? 用过,HashMap是基于哈希表的Map接口的非同步实现,它允许null键和null值,且HashMap依托 ...

  4. Jetty 与 Tomcat 的比较

    Tomcat 和 Jetty 都是作为一个 Servlet 引擎应用的比较广泛,可以将它们比作为中国与美国的关系,虽然 Jetty 正常成长为一个优秀的 Servlet 引擎,但是目前的 Tomcat ...

  5. QPS/TPS/并发量/系统吞吐量的概念

    我们在日常工作中经常会听到QPS/TPS这些名词,也会经常被别人问起说你的系统吞吐量有多大.这个问题从业务上来讲,可以理解为应用系统每秒钟最大能接受的用户访问量.或者每秒钟最大能处理的请求数: QPS ...

  6. SpringMVC点滴(1)

    在使用springMVC很久,却一直没有总结其中的一些便捷配置和功能,恰好有空,加以总结 Servlet 3之后,在web.xml中加入async的支持,从而实现异步请求,需要在servlet和fil ...

  7. oracle导入大sql文件

    最近遇到一个需要导入大SQL文件的问题,最先直接用SQL developer 导入大SQL文件,结果报IO Exception,只好采用sqlplus 导入,操作过程如下: sqlplus 用户名/密 ...

  8. 执行SDK的aapt报错./aapt: /lib64/libc.so.6: version `GLIBC_2.14' not found (required by ./aapt)

    问题| 执行SDK下的aapt报错./aapt: /lib64/libc.so.6: version `GLIBC_2.14' not found (required by ./aapt)   ../ ...

  9. Django路由配置系统,视图函数

    一.路由配置系统(URLconf) URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表:你就是以这种方式告诉Django,对于这个 ...

  10. 织梦 百度sitemap制作教程

    一.新建一个sitemap.htm模板 登录dedecms后台,选择[模板]-[模板管理]-[默认模板管理] 点击最下面的[新建模板]新建一个模板,并复制下面这段代码进去(将代码中的域名改为自己的): ...