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

浅浅的花香味﹌ 2023-02-17 03:41 11阅读 0赞

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

**JavaScript代码：**

var oBtn = document.getElementById("btn");
        var oUser = document.getElementById("user");
        var oAge = document.getElementById("age");
        // 1.初始化请求对象
        var xhr;
        if (window.XMLHttpRequest) { 
            xhr = new XMLHttpRequest();
            console.log(xhr.readyState);
        } else { 
            xhr = new ActiveXObject("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) {     
                    var obj=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/**

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关 ajax发送get和post请求

express.js文件 //1. 引入express const express = require('express'); //2. 创

待我称王封你为后i/ 2023年10月06日 17:19/ 0 赞/ 65 阅读

相关 jquery向服务器发送ajax请求标准写法

jquery向服务器发送ajax请求标准写法 $.ajax({ url:"url路径", //请求的url地址 dataTy

╰半夏微凉°/ 2023年07月12日 05:18/ 0 赞/ 34 阅读

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

详细解析Ajax的使用之向服务器发送GET请求上篇文章讲的如何使用Ajax发送get请求，这篇文章说如何使用Ajax发送post请求。 HTML代码： <h

- 日理万妓/ 2023年02月17日 03:42/ 0 赞/ 7 阅读

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

详细解析Ajax的使用之向服务器发送GET请求前面一篇博客我们讲到了如何使用form表单像服务器发送请求，但是请求方式是同步的，效率太低，现在我们讲一下如何使用Ajax

浅浅的花香味﹌/ 2023年02月17日 03:41/ 0 赞/ 12 阅读

相关 AJAX入门之向服务器发送请求与服务器的响应（二）

AJAX 工作原理 1.客户端触发一个事件，时间产生一个 XMLHttpRequest 对象，发送 Http 请求到 Internet 。 2.服务器端接收到 Http 请

心已赠人/ 2022年09月23日 08:08/ 0 赞/ 211 阅读

相关 ajax的get和post方法吗,AJAX 的GET和POST方法(向服务器发送请求)

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：方法描述 open(method,url,async) 规

今天药忘吃喽~/ 2022年09月03日 11:15/ 0 赞/ 182 阅读

相关 Android向Web站点发送GET请求、POST请求

import java.io.BufferedReader; import java.io.IOException; import java.

超、凢脫俗/ 2022年06月18日 05:50/ 0 赞/ 179 阅读

相关 Ajax 向同一个action发送多次请求

　　Ajax，默认是异步请求。所谓异步就是，不会去等待服务器做出响应后再去执行别的请求，所谓同步就是，客户端一次请求，服务端一次响应，响应结束后才会发送下次请求，然后下次响应。

迷南。/ 2022年06月01日 03:58/ 0 赞/ 252 阅读

相关 AJAX发送请求(GET方式)

AJAX请求 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术：这里介绍一下AJAX发送请求（GET）首先我们看一下效果 > 当

分手后的思念是犯贱/ 2022年05月23日 23:58/ 0 赞/ 379 阅读

相关向指定地址发送get、post请求

URL的openConnection()方法将返回一个URLConnection对象，该对象表示应用程序和 URL 之间的通信链接。程序可以通过URLConnection实例向

﹏ヽ暗。殇╰゛Y/ 2022年05月10日 05:46/ 0 赞/ 209 阅读