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>
相关推荐
鹏多多几秒前
轻量+响应式!React瀑布流插件react-masonry-css的详细教程和案例
前端·javascript·react.js
用户345848285054 分钟前
java中的tomicInteger/AtomicLong介绍
前端·后端
一颗宁檬不酸5 分钟前
Vue.js 初学者基础知识点总结 第一弹
前端·javascript·vue.js
xiaoxue..7 分钟前
解析 LocalStorage与事件委托在前端数据持久化中的应用
前端·javascript·面试
Mintopia7 分钟前
「无界」全局浮窗组件设计与父子组件最佳实践
前端·前端框架·前端工程化
j***89467 分钟前
MySQL数据的增删改查(一)
android·javascript·mysql
@cc小鱼仔仔21 分钟前
vue 知识点
前端·javascript·vue.js
特级业务专家23 分钟前
《终章:从 Vite 专用到全构建工具生态 - 我的字体插件如何征服 Webpack、Rollup 全栈》
前端·javascript·vue.js
|晴 天|27 分钟前
Monorepo 实战:使用 pnpm + Turborepo 管理大型项目
前端
ByteCraze27 分钟前
如何处理大模型幻觉问题?
前端·人工智能·深度学习·机器学习·node.js