详细解析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/

相关文章
|
1天前
|
JSON JavaScript 中间件
使用 Node.js 开发一个简单的 web 服务器响应 HTTP get 请求
使用 Node.js 开发一个简单的 web 服务器响应 HTTP get 请求
9 2
|
2天前
|
负载均衡 Go 调度
使用Go语言构建高性能的Web服务器:协程与Channel的深度解析
在追求高性能Web服务的今天,Go语言以其强大的并发性能和简洁的语法赢得了开发者的青睐。本文将深入探讨Go语言在构建高性能Web服务器方面的应用,特别是协程(goroutine)和通道(channel)这两个核心概念。我们将通过示例代码,展示如何利用协程处理并发请求,并通过通道实现协程间的通信和同步,从而构建出高效、稳定的Web服务器。
在自定义服务器框架中处理 GET 请求
在自定义服务器框架中处理 GET 请求
|
2天前
|
Linux 网络安全 数据库
linux centos系统搭建samba文件服务器 NetBIOS解析 (超详细)
linux centos系统搭建samba文件服务器 NetBIOS解析 (超详细)
|
2天前
|
域名解析 存储 缓存
Linux中搭建DNS 域名解析服务器(详细版)
Linux中搭建DNS 域名解析服务器(详细版)
|
2天前
|
存储 弹性计算 固态存储
阿里云服务器配置选择指南,2024年全解析
阿里云服务器配置选择涉及CPU、内存、带宽和磁盘。个人开发者或中小企业推荐使用轻量应用服务器或ECS经济型实例,如2核2G3M配置,适合网站和轻量应用。企业用户则应选择企业级独享型ECS,如计算型c7、通用型g7,至少2核4G起,带宽建议5M,系统盘考虑SSD云盘或ESSD云盘以保证性能。阿里云提供了多种实例类型和配置,用户需根据实际需求进行选择。
|
2天前
|
缓存 负载均衡 网络协议
【亮剑】一次完整的HTTP请求的重要性和详细过程
【4月更文挑战第30天】本文介绍了HTTP请求的重要性和详细过程。首先,DNS解析将域名转换为IP地址,通过递归和迭代查询找到目标服务器。接着,TCP三次握手建立连接。然后,客户端发送HTTP请求,服务器处理请求并返回响应。最后,理解这个过程有助于优化网站性能,如使用DNS缓存、HTTP/2、Keep-Alive、CDN和负载均衡等实践建议。
|
2天前
|
网络协议 Windows
Windows Server 各版本搭建 DNS 服务器实现域名正反向解析
Windows Server 各版本搭建 DNS 服务器实现域名正反向解析
|
2天前
|
存储 缓存 网络协议
【专栏】理解并优化DNS设置对于提高网络速度至关重要
【4月更文挑战第28天】本文探讨了DNS服务器是否能加快网络访问速度。DNS负责将域名转换为IP地址,其查询时间、缓存机制和地理位置都影响网络速度。优化DNS配置,如选择快速的公共DNS服务、使用附近的服务器、确保设备正确配置和利用DNS缓存,都能有效提升网络体验。理解并优化DNS设置对于提高网络速度至关重要。
|
2天前
|
前端开发 API UED
AngularJS的$http服务:深入解析与进行HTTP请求的技术实践
【4月更文挑战第28天】AngularJS的$http服务是核心组件,用于发起HTTP请求与服务器通信。$http服务简化了通信过程,通过深入理解和实践,能构建高效、可靠的前端应用。

热门文章

最新文章

推荐镜像

更多