ajax原理总结_php.cn手记

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

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>

Correcting teacher：查无此人Correction time：2018-11-14 17:36:30
Teacher's summary：总结的不错，代码也ok。少年，继续加油。

ajax原理总结

Popular Entries