AJAX——介绍

同步与异步

原生的AJAX

代码

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生Ajax</title>
</head>
<body>
    
    <input type="button" value="获取数据" onclick="getData()">

    <div id="div1"></div>
    
</body>
<script>
    function getData(){
        //1. 创建XMLHttpRequest 
        var xmlHttpRequest  = new XMLHttpRequest();
        
        //2. 发送异步请求
        xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
        xmlHttpRequest.send();//发送请求
        
        //3. 获取服务响应数据
        xmlHttpRequest.onreadystatechange = function(){
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
            }
        }
    }
</script>
</html>
相关推荐
YGY_Webgis糕手之路5 分钟前
OpenLayers 综合案例-切片坐标与经纬网调试
前端·gis
白白白鲤鱼7 分钟前
Vue2项目—基于路由守卫实现钉钉小程序动态更新标题
服务器·前端·spring boot·后端·职场和发展·小程序·钉钉
xianxin_22 分钟前
HTML5 地理定位
前端
Running_C29 分钟前
Vue组件化开发:从基础到实践的全面解析
前端·vue.js·面试
Clain29 分钟前
如何搭建一台属于自己的服务器并部署网站,超详细小白教程
linux·运维·前端
胡清波31 分钟前
小程序中使用字体图标的最佳实践
前端
xianxin_33 分钟前
HTML5 客户端存储
前端
南玖i33 分钟前
使用vue缓存机制 缓存整个项目的时候 静态的一些操作也变的很卡,解决办法~超快超简单~
前端·javascript·vue.js
计算机毕设定制辅导-无忧学长1 小时前
InfluxDB 集群部署与高可用方案(二)
java·linux·前端
袁煦丞1 小时前
MongoDB数据存储界的瑞士军刀:cpolar内网穿透实验室第513号成功挑战
前端·程序员·远程工作