返回 ajax原理总...... 登陆

ajax原理总结

1Pong 2018-11-14 17:10:55 255

ajax是代理用户发起http访问请求的js代码,可以通过同步或者异步的方式请求html、json、xml等数据,然后返回到前端接收,并渲染到界面的技术,是一种无刷新页面,即可获取数据的技术。

通过ajax异步获取html 的数据,代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>获取html内容</title>
</head>
<body>
<button id="btnXinWen">获取NBA新闻</button>

<script>
    let btn = document.getElementById("btnXinWen");
    btn.onclick = function () {
        //1.创建xhr对象
        let xhr = new XMLHttpRequest();

        //2.监听响应状态
        xhr.onreadystatechange = function(){
            if (xhr.readyState === 4) { // 准备就绪
                // 判断响应结果:
                console.log(xhr.status);
                if (xhr.status === 200) {
                    // 响应成功,通过xhr对象的responseText属性可以获取响应的文本,此时是html文档内容
                    let div = document.createElement('div');  //创建新元素放返回的内容
                    div.style.width = '600px';  // 设置内容区的宽和高
                    div.style.height = '600px';
                    div.style.margin='0px auto';
                    div.innerHTML = xhr.responseText;   // 将响应文本添加到新元素上
                    document.body.appendChild(div); // 将新元素插入到当前页面中
                } else {
                    // 响应失败,并根据响应码判断失败原因
                    alert('响应失败'+xhr.status);
                }
            } else {
                //还未就绪
            }

        }

        //3.设置请求参数
        xhr.open('get','index.html',true);

        //4.发送请求
        xhr.send(null);

        //将点击按钮禁用,防止重复点击
        btn.disabled = true;
    }
</script>
</body>
</html>

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>内容简介</title>
</head>
<body>
<h1>周琦16+10+2上演隔人暴扣 毒蛇负马刺下属球队</h3>
<div>
    <p>腾讯体育11月14日讯 在今天结束的一场NBA发展联盟的比赛中,周琦砍下16分、10个篮板和2个盖帽,并且上演了一次精彩的隔人暴扣,但是他所在的毒蛇队(火箭下属球队)仍然在客场以97-114负于奥斯汀马刺队(马刺下属球队)。</p>
</div>
</body>
</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤 • 省市区接口说明 • 用thinkphp,后台新增栏目 • 管理员添加编辑删除 • 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消 回复 发送
  • PHP中文网