同源策略
1、同源策略是浏览器的一种安全策略，所谓同源指的是请求URL地址中的协议、域名和端口都相同，只要其中之一不相同就是跨域
2、同源策略主要为了保证浏览器的安全性
3、在同源策略下，浏览器不允许Ajax跨域获取服务器数据
script跨域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>script跨域</title>
<script src="http://tom.com/data.php"></script>
<script type="text/javascript">
console.log(data.username); //zhangsan
console.log(data.password); //12456
</script>
</head>
<body>
</body>
</html>
php文件
<?php
$arr = array("username"=>"zhangsan", "password"=>"123456");
echo "var data =".json_encode($arr);
?>
script标签的async属性
script标签里面的async属性表示异步加载资源，默认情况下是同步加载
这种方式存在的两个主要的问题：
1、必须保证加载的顺序
2、不方便通过程序传递参数
动态创建script
动态创建script标签发出去的请求是异步请求,而且不能修改;
服务器响应的内容是【函数调用】 foo(实参)
php代码
<?php
$arr = array("username"=>"zhangsan", "password"=>"123456");
$cb = $_GET['_cb'];
$username = $_GET['username'];
$pwd = $_GET['password'];
echo $cb.'('.'{"username":"'.$username.'", "password":"'.$pwd.'"}'.')';
?>
js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
/*
hello就是回调函数
这就是jsonp的本质：动态创建script标签，然后通过它的src属性发送跨域请求，然后服务器端响应的数据格式为【函数调用（foo(实参)）】，所以在发送请求之前必须先声明一个函数，并且函数的名字与参数中传递的名字要一致。这里声明的函数是由服务器响应的内容（实际就是一段js代码-函数调用）来调用
*/
function hello(data){
console.log(data);
}
var script = document.createElement('script');
script.src = 'http://tom.com/data.php?_cb=hello&username=zhangsan&password=123';
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
</script>
</head>
<body>
</body>
</html>
jquery使用jsonp
php代码
<?php
$arr = array("username"=>"zhangsan", "password"=>"123456");
$cb = $_GET['cb'];
echo $cb.'('.json_encode($arr).')';
?>
js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonp</title>
<script src="jquery/jquery-3.3.1.min.js"></script>
<script>
$(function () {
$("#btn").click(function () {
$.ajax({
type: "get",
url: "http://tom.com/jsonp.php",
dataType: "jsonp",
jsonp: 'cb', //jsonp属性的作用就是自定义参数名字(默认是callback), callback=abc 相当于等号前面
jsonpCallback: "abc", //自定义回调函数的名字, callback=abc, 相当于等号后面
data: {},
success: function (data) {
alert(data.username);
},
error: function (data) {
console.log(data);
}
})
});
})
</script>
</head>
<body>
<input type="button" value="点击" id="btn">
</body>
</html>
基于百度接口的智能搜索框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.container{
background-color: antiquewhite;
400px;
height: 300px;
padding: 10px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="keyword">
<input type="button" value="搜索">
<div id="msg"></div>
</div>
</body>
<script src="jquery/jquery-3.3.1.min.js"></script>
<script>
$(function(){
$("#keyword").keyup(function () {
var kw = $(this).val();
$.ajax({
url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
data: {wd:kw},
jsonp : 'cb',
dataType: 'jsonp',
success: function (data) {
var msg = data.s;
var tag = '<ul>';
$.each(msg, function (i ,e) {
tag += "<li>"+ e+"</li>";
});
tag += "</ul>";
$("#msg").html(tag);
}
})
});
})
</script>
</html>