手写Ajax(注释)详解

全能技术师

已于 2023-03-15 18:28:10 修改

阅读量177

点赞数

分类专栏： web前端开发学习文章标签： ajax javascript 前端开发语言

于 2023-03-15 10:04:36 首次发布

努力的小周同学

本文链接：https://blog.youkuaiyun.com/qq_60870118/article/details/129545774

版权

web前端开发学习专栏收录该内容

19 篇文章

订阅专栏

Ajax是一种创建快速动态网页的技术，允许在不完全刷新页面的情况下更新内容。它涉及XMLHttpRequest对象的使用，但现在更常见的是使用JSON格式进行数据交换，因为JSON更轻量且与JavaScript兼容。文章通过示例代码展示了如何手写Ajax请求，并解释了同步与异步提交的区别。

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

Ajax是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页(不使用 Ajax)如果需要更新内容，必须重载整个网页面

前面谈到ajax是什么，其主要也就是异步提交，大家是否知道同步和异步提交的区别吗?

同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。

异步提交：当用户发送请求时，当前页面还可以继续使用，当异步请求的数据响应给页面，页面把数据显示出来。

AJAX 的步骤

创建 XMLHttpRequest 实例

发出 HTTP 请求

服务器返回 XML 格式的字符串

JS 解析 XML，并更新局部页面

不过随着历史进程的推进，XML 已经被淘汰，取而代之的是 JSON。

JSON（JavaScript Object Notation，JavaScript对象表示法）是一种由 Douglas Crockford 构想和设计、轻量级的数据交换语言。它是 JavaScript 的一个子集，因此 JSON 在语法上保留了很多 JavaScript 的特征。

区别：

JSON 没有 function、undefined，也没有 Number 中的 NaN 和 Infinity

JSON 字符串的首尾必须是双引号，这意味着对象的键也必须加上双引号

JSON 只是一种数据格式，数据格式其实就是一种规范，格式、形式、规范是不能用来存诸数据的。因此诸如 var obj={"width":100,"height":200,"name":"rose"} 这样的不能称之为 JSON 对象，而是一种 JSON 格式的 JS 对象。

直接上代码如下:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1> 手写 ajax </h1>

<script>
var url = ''; //传入一个接口
//对象
var xhr = new XMLHttpRequest();
xhr.open('get',url);  //数据提交
xhr.send(); //发送请求
//准备状态改变时   200正常   404路径错误    500代码错误
xhr.onreadystatechange = function(){
    if(xhr.status == 200 && xhr.readyState ==4 ){
        var info = xhr.responseText; //返回数据
        //String --- > json
        var obj = JSON.parse (info) // 以JSON格式存储
        console.log(info);
        console.log (obj);
}
}

</script>

</body>
</html>