<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
同源:当两个接口的协议,域名,端口号都相等时,这两个接口是同源的,只要有一个条件不相等,则非同源,不是同源的而两个页面不能互相访问本地缓存,不能互相修改dom节点,不能使用ajax请求对方接口数据
跨域请求数据
http://wthrcdn.etouch.cn/weather_mini?city=北京
创建XMLHttpRequest对象
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
//配置请求参数
xhr.open('GET','http://10.0.159.198/news.html',true);
//发送请求
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
alert(xhr.responseText)
}
}
JSONP:利用script标签请求外部服务器中的数据,从而绕开同源策略对AJAX的请求数据的限制
/*var script = document.createElement("script")
script.type = 'text/javascript';
script.src = 'http://10.0.159.198/news.php?callback=foo';
document.getElementsByTagName("head")[0].appendChild(script);
function foo(data){
alert(data);
}
封装jsonp数据
把创建script标签的步骤封装在一个函数中
function creatScriptTag(srcString){
var script = document.createElement("script");
script.type = 'text/javascript';
script.src =srcString;
document.getElementsByTagName("head")[0].appendChild(script);
creatScriptTag('http://10.0.159.198/data.php?callback=foo')
}
function foo(data){
alert(data);
}
</script>
</head>
<body>
</body>
</html>