您的位置：首页 > Web前端 > JavaScript

jsonp，ajax，json问题

2017-11-23 17:22 405 查看

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实现过程：

  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函数存在风险
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航