通过Ajax构造HTTP请求

最新推荐文章于 2024-09-17 14:30:35 发布

老师好我叫王同学。

最新推荐文章于 2024-09-17 14:30:35 发布

阅读量364

点赞数

分类专栏： Tomcat 文章标签： ajax http javascript

本文链接：https://blog.youkuaiyun.com/qq_51263139/article/details/125211432

版权

Tomcat 专栏收录该内容

3 篇文章

订阅专栏

Ajax，即异步JavaScript和XML，允许JavaScript发起HTTP请求，实现页面无刷新数据传输。本文介绍了Ajax的使用，包括XMLHttpRequest对象的运用，以及JSON字符串在JavaScript中的解析方法。在执行过程中，详细阐述了从用户输入URL到浏览器加载完成，包括HTML、JS脚本加载及JSON数据获取的整个流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ajax（Asynchronous Javascript And XML）的使用

JS中如何解析JSON字符串

执行过程

Asynchronous Javascript And XML，是一种JavaScript给服务器发送HTTP请求的方式。

特点：可以不需要刷新页面或者跳转页面就可以进行数据传输。

Ajax（Asynchronous Javascript And XML）的使用

提供给JS可以发起HTTP请求的能力（同一个域名下才有权限）：

XMLHttpRequest()对象的使用

open(method,url)方法的使用，send()方法 οnlοad=function(){...}

responseText：响应体

JS中如何解析JSON字符串

JSON.parse(jsonString)方法；

代码使用：

students.js:

// 利用这个对象发起 HTTP 请求
var xhr = new XMLHttpRequest();
xhr.open("get", "/data/students.json");
// 以时间驱动的方式，读取响应 —— 当 xhr 完成响应时，执行我们准备好的函数
xhr.onload = function () {
    console.log(this);      // this 就是 xhr 对象
    console.log(this.responseText); // string 类型
    console.log(xhr.responseText);  // string 类型

    // 我们希望把 json 字符串解析成 js 的具体数据类型
    var sts = JSON.parse(this.responseText);
    console.log(sts);

    var body=document.querySelector('body');
    for(var i in sts){
        var st=sts[i];
        body.innerHTML+=`<div>${st.name}</div>`;
    }
}
xhr.send(); // 发送 HTTP 请求

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax 请求</title>
</head>
<body>
    <script src="js/script.js"></script>
</body>
</html>