AJAX-同源策略 跨域访问
## 同源策略
概述： 同源策略是浏览器的一种安全策略，视为同源是指域名，协议，端口完全相同。只有同源的地址才可以通过AJAX方式请求。同源或者不同源说的是两个地址的关系，不同源地址之间请求我们称之为跨域请求。
即是不同源地址之间，不能发送 AJAX 请求。
JSONP
1，JSONP的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。
2，JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSON数据
类似：
hehe({q:"123",p:false,s:["12306","12306铁路客户服务中心","12306火车票网上订票官网","12333","12315","12345","12329","12366电子税务局","12366","12333社保查询网"]});
###2,寻找一个有效的方法 实现跨域请求
请求方url：http://www.lisi.com/ajax-02/day02/xinlang.html
响应方url：http://www.zhangsan.com/02_ajax/server/test.php
跨域方法如下：
<!-- img link script iframe -->
<!-- 尝试找到一种发送不同源的请求方式 -->
<!-- 校验目的：
1，能发出去
2，能收回来
img 能够得到响应 但是不能得到字符串
link 能够得到响应 但是会按照css来执行
script 得到响应会按照 js 语法来执行 -->
<!-- 所以可以使用这个特点 使用jsonp 来实现跨域信息的获取 -->
<!-- http://www.zhangsan.com/02_ajax/server/test.php -->
<img src="https://wx4.sinaimg.cn/mw690/671419afgy1g0ff9kv6zmj21sc2dskjm.jpg">
<!-- <script id="script1" type="text/javascript" src="template-web.js">
window.onload =function() {
var script = document.getElementById('script');
console.log(1);
console.log(script);
};
</script> -->
<script type="text/javascript">
var script =document.createElement('script');
script.src = "http://www.zhangsan.com/02_ajax/server/test.php";
document.body.appendChild(script);
console.log(script);
function foo(data) {
console.log(data);
}
</script>
服务端返回: foo('var a = 123')
//控制台輸出：var a = 123;
script: 使用script标签 和 jsonp （利用js代码执行特性）实现跨域。
###3，跨域封裝。
// "https://suggest.taobao.com/sug?q="+keywordValue+"&callback=hehe";
obj = {
url:"https://suggest.taobao.com/sug",
data:{q:"123",pwd:"3456"},
success:function(data) {}
}
function myAjax(obj) {
var defaults = {
type:"get",
url:"#",
data:{},
success:function(data) {},
jsonp:"callback",
jsonpCallBackName: "hehe"
};
for (var key in obj) {
defaults[key] = obj[key];
//如何赋值的？如果defaults 中没有 obj中有key。 一样赋值
}
var params = "";
for (var attr in defaults.data) {
params += attr + "=" + defaults.data[attr] + "&";
}
if(params) {
params = params.substring(0,params.length-1);
defaults.url += "?" + params;
}
defaults.url += "&"+defaults.jsonp+"="+defaults.jsonpCallBackName;
console.log(defaults.url);
var script = document.createElement("script");
script.src = defaults.url;
window[defaults.jsonpCallBackName] = function(data) {
defaults.success(data);
}
var head = document.querySelector("head");
head.appendChild(script);
}
調用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>百度提示词---跨域百度数据服务器</title>
<script type="text/javascript" src="myutis(wangzheng).js"></script>
<script type="text/javascript">
window.onload = function() {
var btn = document.querySelector("#btn"); btn.onclick = function() { var keywordValue =document.querySelector("#keyword").value;
console.log(keywordValue); myAjax({
url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
data:{wd:keywordValue},
//声明所需要的函数，真正执行的函数是响应体返回的
success:function(data) {
var liTag = "";
console.log(data);
for(var i = 0; i<data.s.length;i++) {
var tempSug = data.s[i]; liTag += "<li>" + tempSug + "</li>"; }
var ulTag = document.querySelector("ul");
ulTag.innerHTML = liTag;
},
jsonp:"cb",
jsonpCallBackName:"haha"
});
};
};
</script>
</head>
<body>
<input type="text" name="" id="keyword" placeholder="请输入关键词">
<input type="button" name="" id="btn" value="查询">
<ul>
<li></li>
<li></li>
<li></li> </ul>
</body>
</html>
注：學習筆記
AJAX-同源策略 跨域访问的更多相关文章
- JavaScript JSON AJAX 同源策略 跨域请求
网页和Ajax和跨域的关系 1 Ajax使网页可以动态地.异步地的与服务器进行数据交互,可以让网页局部地与服务器进行数据交互 2 Ajax强调的是异步,但是会碰到跨域的问题. 3 而有很多技术可以解决 ...
- (转)jquery ajax使用及跨域访问解决办法
原文地址:***/UIweb/jquery_ajax_kuayujiejue.html 最近开发中,设计到智能手机项目,给领导做几个demo.主要是用jquery和jqeury mobile. 越来越 ...
- AJax与Jsonp跨域访问
一.JavaScript的AJax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML) 设计AJax使用的一种重要技术 ...
- java 设置允许ajax XMLHttpRequest 请求跨域访问
怎样才能算跨域?协议,域名,端口都必须相同,才算在同一个域. 方案1: 使用XMLHttpRequest... 异步请求不能跨域访问,除非要访问的网页响应头信息设置为允许跨域访问. 将网页设置为允许 ...
- jQuery发送ajax请求实现跨域访问
Java代码的话,在返回响应之前调用如下代码中的allowCrossDomainAccess()方法: /** * 允许跨域访问 */ public void allowCrossDomainAcce ...
- ajax异步请求/同源策略/跨域传值
基本概念 Ajax 全称是异步的 JavaScript 和 XML . 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进 ...
- JavaScript JSON timer(计时器) AJAX HTTP请求 同源策略 跨域请求
JSON 介绍 1. JSON: JavaScript Object Notation 是一种轻量级的数据交换格式. 它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是 ...
- ajax，jsonp跨域访问数据
访问高德aip天气接口 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...
- 什么是跨域访问，JSON&JSONP
http://blog.csdn.net/notechsolution/article/details/50394391 更详细的讲解,关于同源策略等: http://www.cnblogs.com/ ...
随机推荐
- python之yield的一些应用
生成器 yield是用于生成器.生成器通俗的认为,在一个函数中,使用了yield来代替return的位置的函数,就是生成器.它不同于函数的使用方法是:函数使用return来进行返回值,每调用一次,返回 ...
- java调用webservice，restful
java调用webservice public String redoEsb(String loguid, String user, String comments, String newMsg, S ...
- [原创]Modelsim后仿真
因调试需要,进行后仿真,ISE生成的sim文件和sdf文件 `timescale ns/ ps module lut_dly ( clkout, fpga_clk, config_in ); outp ...
- RabbitMQ通过Exchange.topic 对routingkey 进行正则表达式匹配
消费者: static void Main(string[] args) { ConnectionFactory factory = new ConnectionFactory() { HostNam ...
- 4、Nginx安装与配置
一.简介 Nginx官网:http://nginx.org/ Nginx(发音同engine x)是一个异步框架的 Web服务器,也可以用作反向代理,负载平衡器 和 HTTP缓存.该软件由 Igor ...
- day26.面向对象-反射封装内置方法
封装 隐藏对象的属性和实现细节,近对外提供公共访问方式 广义:代码保护,面向对象思想 狭义:将属性,方法隐藏起来 class Person: __key = 123456 # 私有的静态属性 def ...
- Codeforces 1015F Bracket Substring AC自动机 + dp
Bracket Substring 这么垃圾的题怎么以前都不会写啊, 现在一眼怎么就会啊.... 考虑dp[ i ][ j ][ k ][ op ] 表示 已经填了 i 个空格, 末尾串匹配到 所给串 ...
- dos choice 命令
dos choice 命令 choice /c YNC /m "Are you sure?" if %errorlevel%==1 goto Y if %errorlevel%== ...
- vue vue-resource的特点
1.vue-resource 实现 get, post, jsonp请求. 2.JSONP的是实现原理: 由于浏览器的安全性限制,不允许AJAX访问 协议不同.域名不同.端口不同的数据接口,浏览器认为 ...
- SpringBoot使用Graylog日志收集
本文介绍SpringBoot如何使用Graylog日志收集. 1.Graylog介绍 Graylog是一个生产级别的日志收集系统,集成Mongo和Elasticsearch进行日志收集.其中Mongo ...