详细解析Ajax的使用之向服务器发送GET请求

简介: 详细解析Ajax的使用之向服务器发送GET请求前面一篇博客我们讲到了如何使用form表单像服务器发送请求,但是请求方式是同步的,效率太低,现在我们讲一下如何使用Ajax的技术向服务器发送异步请求。HTML代码: <h1>ajax的get请求</h1> <button id="btn">获取数据</button> <p>姓名:<span id="user"></span></p> <p>年龄:<span id="age"></span></p> 1 2 3 4JavaScript代码: var oBtn =

详细解析Ajax的使用之向服务器发送GET请求




前面一篇博客我们讲到了如何使用form表单像服务器发送请求,但是请求方式是同步的,效率太低,现在我们讲一下如何使用Ajax的技术向服务器发送异步请求。


HTML代码:


<h1>ajax的get请求</h1><buttonid="btn">获取数据</button><p>姓名:<spanid="user"></span></p><p>年龄:<spanid="age"></span></p>


JavaScript代码:


varoBtn=document.getElementById("btn");
varoUser=document.getElementById("user");
varoAge=document.getElementById("age");
// 1.初始化请求对象varxhr;
if (window.XMLHttpRequest) {
xhr=newXMLHttpRequest();
console.log(xhr.readyState);
    } else {
xhr=newActiveXObject("Microsoft.XMLHTTP");
    }
// 2.发送请求   // 2-1.设置请求的方式 地址等xhr.open("GET", "data.json", true);
console.log(xhr.readyState);
// 2-2.发送请求xhr.send();
console.log(xhr.readyState);
xhr.onreadystatechange=function () {
oBtn.onclick=function () {
console.log(xhr.readyState);
if (xhr.readyState==4&&xhr.status==200) {    
varobj=JSON.parse(xhr.responseText);
// console.log(obj);// console.log(JSON.stringify(obj));oUser.innerText=obj.name;
oAge.innerText=obj.age;
            }
        }
    }
// onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。// readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。// 0: 请求未初始化// 1: 服务器连接已建立// 2: 请求已接收// 3: 请求处理中// 4: 请求已完成,且响应已就绪


JSON数据:


{
"name":"张三",
"age":20    }

 

注意: get请求对数据的大小有限制,其次是发送的数据会拼接在URL后面,所以安全性低。


视频讲解链接:
https://www.bilibili.com/video/BV1Lt4y1y7Ae/

相关文章
|
3天前
|
域名解析 监控 负载均衡
【域名解析DNS专栏】智能DNS解析:自动选择最快服务器的奥秘
【5月更文挑战第27天】智能DNS解析是动态根据用户网络环境和服务器负载,选择最佳服务器的技术,提升用户体验。它通过实时监控服务器负载、网络延迟,运用负载均衡算法、地理位置识别和实时测试,自动选择最快服务器。伪代码展示了其基本工作流程,包括获取用户位置、计算服务器权重并选择最佳服务器进行域名解析。智能DNS解析优化了网络服务的稳定性和效率。
|
4天前
|
域名解析 网络协议 Ubuntu
【域名解析DNS专栏】搭建私有DNS服务器:从BIND到CoreDNS的选择
【5月更文挑战第26天】本文对比了两种流行的DNS服务器软件BIND和CoreDNS。BIND以其稳定性及丰富功能著称,广泛兼容各类平台,适合复杂环境;CoreDNS则以其高性能、模块化设计和易用性脱颖而出。根据需求、资源和技术水平,用户可选择适合自己的DNS服务器。安装示例包括BIND在Ubuntu上的apt安装及基本配置,以及CoreDNS的snap安装和YAML配置。
|
6天前
|
存储 弹性计算 人工智能
【阿里云弹性计算】深度解析阿里云ECS弹性裸金属服务器:性能与弹性的完美平衡
【5月更文挑战第24天】阿里云ECS弹性裸金属服务器融合物理机高性能与云服务弹性,提供计算、存储及网络优势。支持秒级伸缩、自动扩展,适用于高性能计算、游戏、企业应用及AI场景。示例代码展示如何通过CLI创建实例,是高需求场景的理想选择。
54 0
|
6天前
|
域名解析 缓存 网络协议
【域名解析DNS专栏】深入理解DNS根服务器与顶级域服务器
【5月更文挑战第24天】DNS的根服务器和顶级域服务器在域名解析中起关键作用。根服务器是核心,负责提供顶级域服务器引用,维护顶级域列表;顶级域服务器管理如.com的域名,处理二级域名解析和管理。这两者影响解析速度、可靠性和安全性。了解它们有助于优化DNS配置和提升网站访问体验。
【域名解析DNS专栏】深入理解DNS根服务器与顶级域服务器
|
8天前
|
弹性计算 数据挖掘 应用服务中间件
阿里云服务器通用算力型U1实例解析,实例性能、适用场景及常见问题参考
在阿里云服务器的所有实例规格中,通用算力型u1实例主打的是高性价比,通用算力型U1实例云服务器自推出以来,就受到了广大用户的关注,也是目前阿里云的活动中比较热门的云服务器实例,这个实例规格的性能要好于经济型e等共享型实例,价格又比计算型c7、通用型g7等其他企业级实例要低一些。本文将深入解析通用算力型U1实例的特点、适用场景以及价格优势,帮助用户更好地了解该云服务器实例。
阿里云服务器通用算力型U1实例解析,实例性能、适用场景及常见问题参考
|
10天前
|
网络协议
阿里云服务器搭建DNS解析服务步骤
在阿里云搭建DNS解析服务,首先注册阿里云账号并购买适合的云服务器。获取服务器公网IP后,配置服务器并安装DNS软件如Bind9。接着设置DNS解析,包括定义顶级和子域名的指向。最后,通过ping测试或浏览器访问验证DNS解析功能是否正常。
|
10天前
|
存储 弹性计算 监控
【阿里云弹性计算】阿里云ECS全面解析:弹性计算服务的核心优势与应用场景
【5月更文挑战第20天】阿里云ECS是提供可伸缩计算能力的云服务,支持多种规格实例,满足不同需求。其核心优势包括灵活性、高性能、高可用性、安全性和易用性。适用场景包括网站托管、大数据处理、游戏多媒体应用及测试开发环境。通过Python示例代码展示了如何创建ECS实例,助力企业专注业务发展,简化基础设施管理。
46 5
|
6天前
|
移动开发 网络协议 安全
HTML5页面被运营商DNS问题及解决方案,app中h5页面源码的获取
HTML5页面被运营商DNS问题及解决方案,app中h5页面源码的获取
61 4
|
6天前
|
域名解析 网络协议 应用服务中间件
2024最新彩虹聚合DNS管理系统源码v1.3 全开源
聚合DNS管理系统可以实现在一个网站内管理多个平台的域名解析,目前已支持的域名平台有:阿里云、腾讯云、华为云、西部数码、DNSLA、CloudFlare。 本系统支持多用户,每个用户可分配不同的域名解析权限;支持API接口,支持获取域名独立DNS控制面板登录链接,方便各种IDC系统对接。
56 0
|
13天前
|
Linux 网络安全 Windows
网络安全笔记-day8,DHCP部署_dhcp搭建部署,源码解析
网络安全笔记-day8,DHCP部署_dhcp搭建部署,源码解析

推荐镜像

更多