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>
相关推荐
前端 贾公子1 分钟前
微信小程序webview访问的url从https变成http原因排查
前端
2501_948122634 分钟前
React Native for OpenHarmony 实战:Steam 资讯 App 设置页面
javascript·react native·react.js·游戏·ecmascript·harmonyos
云和数据.ChenGuang4 分钟前
fastapi无法在微软的edge上运行程序
前端·edge·fastapi
2501_948122635 分钟前
React Native for OpenHarmony 实战:Steam 资讯 App 意见反馈实现
javascript·react native·react.js·游戏·ecmascript·harmonyos
IT_陈寒7 分钟前
Vue3性能优化实战:5个被低估的API让我减少了40%的代码量
前端·人工智能·后端
是罐装可乐8 分钟前
前端架构知识体系:深入理解 sessionStorage、opener 与浏览器会话模型
开发语言·前端·javascript·promise·语法糖
2501_944521009 分钟前
rn_for_openharmony商城项目app实战-账号安全实现
javascript·数据库·安全·react native·react.js·ecmascript
s19134838482d9 分钟前
web前端-设计表格
前端
Amumu1213811 分钟前
React路由(三)
javascript·react.js·ecmascript
vx_bisheyuange11 分钟前
基于SpringBoot的旅游管理系统
前端·javascript·vue.js·spring boot·毕业设计