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>
相关推荐
被考核重击8 分钟前
【无标题】
前端·javascript·vue.js
Glommer8 分钟前
Akamai 逆向思路
javascript·爬虫·逆向
RJiazhen11 分钟前
论前端第三方库的技术选型 —— 以 Jodit Editor 为例
前端·前端工程化
用户81686947472513 分钟前
React 如何用 MessageChannel 模拟 requestIdleCallback
前端·react.js
izx88814 分钟前
从 Buffer 到响应式流:Vue3 实现 AI 流式输出的完整实践
javascript·vue.js·人工智能
heyCHEEMS15 分钟前
手搓 uniapp vue3 虚拟列表遇到的坑
前端
Duck不必17 分钟前
紧急插播:CVSS 10.0 满分漏洞!你的 Next.js 项目可能正在裸奔
前端·next.js
幸运小圣17 分钟前
动态组件【vue3实战详解】
前端·javascript·vue.js·typescript
用户4130798106117 分钟前
终于不漏了-Android开发内存泄漏详解
前端
孟祥_成都18 分钟前
nest.js / hono.js 一起学!hono的设计思想!
前端·node.js