jsonp,ajax,json问题
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
百度搜索小例子
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div ng-controller="yourController">
<input type="text" ng-change="search()" ng-model="wd">
<ul>
<li ng-repeat="word in dataList"><a href="https://www.baidu.com/s?ie=utf-8&wd={{word}}">{{word}}</a></li>
</ul>
</div>
<script src="./base/angular.min.js"></script>
<script src="./base/angular-sanitize.js"></script>
<script>
var app = angular.module("myapp", ['ngSanitize'])
app.controller("yourController", function($scope, $http) {
$scope.search = function() {
$http({
url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
method: "jsonp",
params: {
wd: $scope.wd,
cb: 'JSON_CALLBACK'
}
}).success(function(results) {
$scope.dataList = results.s
})
}
})
</script>
</body>
</html>
AJAX
ajax是指通过使用xmlhttprequest对象进行异步数据交互的技术,实现无刷新状态更新页面和异步提交
ajax实现过程:
- 创建xmlhttprequest对象
- 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
- 设置向响应HTTP请求状态变化的函数
- 发送HTTP请求
- 获取异步调用返回的数据
- 使用JavaScript和DOM实现局部刷新
优点:
- 不需要插件支持
- 用户体验极佳
- 提升web程序性能
- 减轻服务器和宽带的负担
缺点:
- 前进后提按钮被破坏
- 搜索引擎的支持不够
- 开发调试工具缺乏
JSON
JSON和XML一样也是一种简单文本格式。是一种比较流行的标准格式,是数据的载体,相对于XML。JSON更加易读、更便于肉眼检查。在语法的层面上,JSON与其他格式的区别是在于分隔数据的字符,JSON中的分隔符限于单引号、小括号、中括号、大括号、冒号和逗号
优点:
- 作为一种数据传输格式,JSON与XML很相似,但是它更加灵巧。
- JSON不需要从服务器端发送含有特定内容类型的首部信息
缺点:
- 语法过于严谨
- 代码不易读
- eval函数存在风险
jsonp,ajax,json问题的更多相关文章
- 前端跨域问题,以及ajax,jsonp,json的区别
看了很多网上的资料,小七感觉都没有完全解决我的疑惑以及问题,所以特意拿出通俗易懂的话讲解跨域问题,以及ajax,jsonp,json的区别.首先先说跨域问题什么时候需要跨域?[1]域名不同(即网址不同 ...
- Django 之Ajax&Json&CORS&同源策略&Jsonp用法
什么是Json 定义: JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规范)的一个子集 ...
- php ajax json jquery 记录
php+jquery+ajax+json简单小例子 <html> <title>php+jquery+ajax+json简单小例子</title> <?php ...
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
- AJAX && JSON之讲解
Ajax技术的核心是XMLHttpRequest对象(简称XHR),可以通过使用XHR对象获取到服务器的数据,然后再通过DOM将数据插入到页面中呈现.虽然名字中包含XML,但Ajax通讯与数据格式无关 ...
- struts2 + ajax + json的结合使用,实例讲解
struts2用response怎么将json值返回到页面javascript解析,这里介绍一个struts2与json整合后包的用法. 1.准备工作 ①ajax使用Jquery:jquery-1.4 ...
- AJAX,JSON搜索智能提示
效果 开发结构参考AJAX,JSON用户校验 主要有两个核心文件 1,处理输入字符,进行后台搜索的servlet Suggest.java package org.guangsoft.servlet; ...
- 练习 jquery+Ajax+Json 绑定数据 分类: asp.net 练习 jquery+Ajax+Json 绑定数据 分类: asp.net
练习 jquery+Ajax+Json 绑定数据
- Jquery+ajax+json+servlet原理和Demo
Jquery+ajax+json+servlet原理和Demo 大致过程: 用户时间点击,触发js,设置$.ajax,开始请求.服务器响应,获取ajax传递的值,然后处理.以JSON格式返回给ajax ...
- 玩转Web之Json(一)-----easy ui+ajax + json 中关于Json的解析问题
在easy ui中使用Ajax+Json实现前后的数据交互时,当后台数据传输到客户端是需对Json数据进行解析,这里将对Json数据解析做简单总结. (一) 对于服务器返回的数据若没有做类型说明,需要 ...
随机推荐
- 安装 telnet
yum install telnet-server yum install telnet service xinetd restart 查询是否正常启动telnet netstat -tn ...
- linux 设备驱动分类
1. 字符设备 :在I/O传输过程中以字符为单位. 2. 块设备: 在传输过程中以块为单位,相关概念有 缓冲,I/O调度,请求队列.主要体现出与字符设备在操作硬件的接口实现方式上是不一样的. 3. 网 ...
- 函数式编程语言(Functional Program Language)
(一) 什么是函数编程语言 简单说,"函数式编程"是一种"编程范式"(programming paradigm),也就是如何编写程序的方法论. 是一种编程典范, ...
- 2018面向对象程序设计(Java)第4周学习指导及要求
2018面向对象程序设计(Java) 第4周学习指导及要求(2017.9.19-2017.9. 26) 学习目标 掌握类与对象的基础概念,理解类与对象的关系: 掌握对象与对象变量的关系: 掌握预定 ...
- sql 求max和min,但是第二大,第二小怎么算?
利用子查询,但这样速度较慢. SELECT Baoming.id, Baoming.addtime AS '报名时间', CONCAT(Members.realname,Members.usernam ...
- PO ITEM_BOM_工艺路线SQL
---物料主数据接口 SELECT count(*)PO_MARA FROM STG.PO_MARA; SELECT count(*)PO_MARC FROM STG.PO_MARC; SELECT ...
- 找回密码的url分析
https://www.example.com/reset?email=user@example.com&key=b4c9a289323b21a01c3e940f150eb9b8c542587 ...
- git图片
- 安装tensorflow ubuntu18.04
1.首先安装环境是ubuntu18.04. $sudo apt-get install python-pip python-dev python-virtualenv2.安装virtualenv虚拟环 ...
- 【mysql】分区表
分区表是什么? 分区表可以按照事先创建的规则,对mysql的记录进行分组,每一个组具有一个独立的逻辑单元来存储该组的数据.典型的如:按照创建时间的年份分组,按照id的顺序分组(每1000万条数据分一个 ...