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

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: 详细解析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/

相关文章
|
13天前
|
XML 前端开发 JavaScript
|
7天前
|
机器学习/深度学习 人工智能 弹性计算
阿里云GPU服务器全解析_GPU价格收费标准_GPU优势和使用说明
阿里云GPU云服务器提供强大的GPU算力,适用于深度学习、科学计算、图形可视化和视频处理等场景。作为亚太领先的云服务商,阿里云GPU云服务器具备高灵活性、易用性、容灾备份、安全性和成本效益,支持多种实例规格,满足不同业务需求。
|
30天前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
57 22
|
30天前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
37 18
|
21天前
|
存储 弹性计算 NoSQL
"从入门到实践,全方位解析云服务器ECS的秘密——手把手教你轻松驾驭阿里云的强大计算力!"
【10月更文挑战第23天】云服务器ECS(Elastic Compute Service)是阿里云提供的基础云计算服务,允许用户在云端租用和管理虚拟服务器。ECS具有弹性伸缩、按需付费、简单易用等特点,适用于网站托管、数据库部署、大数据分析等多种场景。本文介绍ECS的基本概念、使用场景及快速上手指南。
62 3
|
25天前
|
监控 网络协议 安全
DNS服务器故障不容小觑,从应急视角谈DNS架构
DNS服务器故障不容小觑,从应急视角谈DNS架构
46 4
|
30天前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
53 4
|
1月前
|
存储 固态存储 安全
阿里云服务器X86计算架构解析与X86计算架构云服务器收费价格参考
阿里云服务器架构分为X86计算、Arm计算、高性能计算等多种架构,其中X86计算是用户选择最多的一种架构,本文将深入探讨阿里云X86计算架构的云服务器,包括其技术特性、适用场景、性能优势以及最新价格情况。
|
24天前
|
人工智能 关系型数据库 双11
2024年阿里双十一活动解析:助力大家优惠上云!云服务器79元1年起
2024年阿里云双十一活动已启动,提供云服务器79元1年起等特惠,涵盖云数据库、对象存储、无影云电脑等140余款产品免费试用,企业用户还可申请百万补贴金及5亿算力补贴,助力优惠上云。
|
1月前
|
前端开发 JavaScript UED
axios取消请求CancelToken的原理解析及用法示例
axios取消请求CancelToken的原理解析及用法示例
89 0

推荐镜像

更多