一、跨域
跨域可以简单的理解为从一个域名访问另一个域名,出于安全考虑,浏览器不允许这么做。
https://www.baidu.com/->跨域http://www.qq.com/img、script、iframe等元素的src属性可以直接跨域请求资源
二、ajax跨域
1. 可以让服务器去别的网站获取内容然后返回页面
2. 给页面的ajax一个url,ajax把这个url传给服务器,由服务器去访问跨域地址
三、ajax四个步骤(代码演示)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax4</title>
</head>
<body>
<div id="box"></div>
<input type="button" value="请求数据" id="btn">
</body>
<script>
var box=document.getElementById('box');
var btn=document.getElementById('btn');
btn.onclick=function() {
// 1.创建.XMLHttpRequest对象
if (window.XMLHttpRequest) {
var xhr=new XMLHttpRequest();
}else{
var xhr=new ActiveXObject('Microsoft.XMLHTTP')
};
// 2.创建与服务器的链接
xhr.open('GET','http://localhost/4.27ajax/test1.json',true);
// 3.发送请求
xhr.send(null);
xhr.onreadystatechange=function() {
// alert(xhr.readyState);
if (xhr.readyState==4) {//服务器准备就绪
if (xhr.status==200) {//数据返回成功
var json=xhr.responseText;
var jsons=eval('('+json+')');
// alert(jsons.title.length);
var text='';
for (var i = 0; i < jsons.title.length; i++) {
text+=jsons.title[i]+'作者:'+jsons.author[i]+'</br>';
};
box.innerHTML=text;
}else{
alert(xhr.status);
}
};
};
};
</script>
</html>