第一种 XMLHttpRequest
- ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。
** 所以我用一句话来总结两者的关系：我们使用XMLHttpRequest对象来发送一个Ajax请求 **
<script>
var xhr = new XMLHttpRequest();
xhr.open("get", "http://i2.mediapower.mobi/adpower/vm/Bora/js/test.js", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.send(null);
</script>
第二种jquery的$.ajax方法
- 场景1. 用Ajax进行数据验证
- 场景2.按需取数据
- 场景3.自动更新页面
异步请求方式，jQuery都封装好了，具体的业务可以通过设置不同的属性去实现
<script src="js/jquery-1.11.3.js"></script>
<script>
$(function(){
$.ajax({
async: false,
type: "GET",
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'callbackfunction',
url: "http://i2.mediapower.mobi/adpower/vm/Bora/js/test.js",
data: "",
timeout: 3000,
contentType: "application/json;utf-8",
success: function(msg) {
console.log(msg);
}
});
})
</script>
第三种 postMessage+iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>testa</title>
</head>
<script>
window.onload = function() {
document.getElementById('ifr').contentWindow.postMessage('我是一条测试数据', 'https://mp.csdn.net/mdeditor/100514686');
};
</script>
<body>
<iframe id="ifr" src="https://mp.csdn.net/mdeditor/100514686.html"></iframe>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>testb</title>
</head>
<script>
//可以调用window中的时间监听对跨域访问的postmessage经行监听
window.addEventListener('message', function(event) {
// 通过origin属性判断消息来源地址
if (event.origin === 'http://127.0.0.1:8080') {
alert(event.data);
}
}, false);
</script>
<body>
</body>
</html>
