使用Ajax
1.原生JavaScript使用Ajax
1.1使用步骤
1.2实现代码
完整代码
<body>
<!-- 代码59为了渲染数据的函数方法 -->
<h1>渲染数据</h1>
<div class="banner" id="banner"></div>
<a href=""><img src="" alt=""></a>
<script>
//第1步:封装xhr,创建xhr对象
//封装通用的xhr,兼容各个版本
function createXHR() {
//判断浏览器是否将XMLHttpRequest作为本地对象实现,针对IE7,Firefox,Opera等浏览器
if (typeof XMLHttpRequest != "undefined") {
return new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined") {
var xhrArr = [
'Microsoft.XMLHTTP',
'MSXML2.XMLHTTP.6.0',
'MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0',
'MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP'
];
//遍历创建XMLHttpRequest对象
var len = xhrArr.length;
for (var i = 0; i < len; i++) {
try {
xhr = new ActiveXObject(xhrArr[i]);
break;
} catch (ex) {
}
}
return xhr;
} else {
throw new Error('No XHR object available!');
}
}
//第2步:创建XMLHttpRequest对象实例
var xhr = createXHR(),
data = null;
//第3步:响应XMLHttpRequest对象状态变化的函数,onreadystatechange在readyState属性发生改变时触发
xhr.onreadystatechange = function () {
//xhr.readyState === 4异步调用成功,响应内容解析成功,可以在客户端调用
if (xhr.readyState === 4) {
//此处一定要xhr.status >= 200,写成xhr.status > 200会出错
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
data = JSON.parse(xhr.responseText)
最低0.47元/天 解锁文章
2030
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
