JavaScript之AJAX

最新推荐文章于 2024-04-14 01:40:16 发布
最新推荐文章于 2024-04-14 01:40:16 发布
阅读量122 收藏
点赞数
分类专栏： 前端体系构建 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaobangsky/article/details/110739519
版权
AJAX(Async JavaScript AND XML)

用JS发送请求和接收响应，这就是AJAX的全部内容

AJAX是浏览器上的功能
  1. 浏览器可以发送请求，接收响应
  2. 浏览器在window上加一个XMLHttpRequest函数
  3. 用这个构造函数（类）可以构造出一个对象
  4. JS通过实现它来发送请求，接收响应
AJAX应用的四个步骤
  • 创建XMLHttpRequest对象（全称是XMLHttpRequest）
  • 调用对象的OPEN方法
  • 监听对象的onload&onerror事件，当然用onreadystatechange事件更靠谱
  1. 专业前端会用onreadystatechange
  • 调用对象的send方法（发送请求）

下面代码用ajax代码实现加载css\js\html\XML\json\分页

if(path === '/index.html'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    let string = fs.readFileSync("public/index.html").toString();
    // response.write(`<link rel="stylesheet" href="./style.css"><h1>你好</h1><br/><h2>你是一个小彩笔！</h2>`)
    const page1 = fs.readFileSync("db/page1.json").toString();
    const array = JSON.parse(page1);
    const result = array.map(item=>`<li>${item.id}</li>`).join('');
    string = string.replace('{page1}',`<ul id="xxx">${result}</ul>`);
    response.write(string);
    response.end()
  } else  if(path === '/xml.xml'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/xml;charset=utf-8')
    let string = fs.readFileSync("public/xml.xml");
    // response.write(`<link rel="stylesheet" href="./style.css"><h1>你好</h1><br/><h2>你是一个小彩笔！</h2>`)
    response.write(string);
    response.end()
  }else if(path === '/page2'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/json;charset=utf-8')
    response.write(fs.readFileSync('db/page2.json'))
    response.end()
  } else if(path === '/page3'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/json;charset=utf-8')
    response.write(fs.readFileSync('db/page3.json'))
    response.end()
  }else  if(path === '/test.html'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    let string = fs.readFileSync("public/test.html");
    // response.write(`<link rel="stylesheet" href="./style.css"><h1>你好</h1><br/><h2>你是一个小彩笔！</h2>`)
    response.write(string);
    response.end()
  } else if(path === '/main.js'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/javascript;charset=utf-8');
    let string = fs.readFileSync("public/main.js");
    response.write(string);
    response.end()
  }else if(path === '/test.js'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/javascript;charset=utf-8');
    let string = fs.readFileSync("public/test.js");
    response.write(string);
    response.end()
  }  else if(path === '/style.css'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/css;charset=utf-8');
    let string = fs.readFileSync("public/style.css");
    response.write(string);
    response.end()
  }else if(path === '/json.json'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'application/json;charset=utf-8');
    let string = fs.readFileSync("public/json.json");
    response.write(string);
    response.end()
  } else {
    response.statusCode = 404
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(`你访问的页面不存在!`)
    response.end()
  }

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>ajax测试示例</title>
    </head>
    <body>
        <h1>ajax测试demo <span id="myName"></span></h1>
        <p>
            <button id="cssBtn">请求CSS</button>
            <button id="jsBtn">请求JS</button>
            <button id="htmlBtn">请求HTML</button>
            <button id="xmlBtn">请求XML</button>
            <button id="jsonBtn">请求JSON</button>
            <button id="pageBtn">请求下一页</button>
        </p>
        <div>
            {{page1}}
        </div>
        <script src="main.js"></script>
    </body>
</html>

let n = 1;
    cssBtn = document.querySelector('#cssBtn'),
    jsBtn = document.querySelector('#jsBtn'),
    xmlBtn = document.querySelector('#xmlBtn'),
    jsonBtn = document.querySelector('#jsonBtn'),
    pageBtn = document.querySelector('#pageBtn'),
    htmlBtn = document.querySelector('#htmlBtn');

pageBtn.onclick = () => {
    let request = new XMLHttpRequest();
    request.open("GET",`/page${n+1}`);
    request.onreadystatechange = ()=>{
        let states = request.readyState,
            stauts = request.status;
        if(states === 4 && stauts === 200){
            const array = JSON.parse(request.response);
            array.forEach(element => {
                const li = document.createElement('li');
                li.textContent = element.id;
                xxx.appendChild(li);
            });
            n +=1;
        }
    }
    request.send();
}

jsonBtn.onclick = () => {
    let request = new XMLHttpRequest();
    request.open("GET","/json.json");
    request.onreadystatechange = ()=>{
        let states = request.readyState,
            stauts = request.status;
        if(states === 4 && stauts === 200){
            let json = request.response,
                obj = JSON.parse(json);
            myName.textContent = obj.name;
        }
    }
    request.send();
}

xmlBtn.onclick = ()=>{
    let request = new XMLHttpRequest();
    request.open("GET","/xml.xml");
    request.onreadystatechange = () => {
        let states = request.readyState,
            status = request.status;
        if(states === 4 && status === 200){
            let dom = request.responseXML;
            //注意我的系统此处是null
            console.log(request.responseXML);
            if(null === dom){
                dom = request.response;
                console.log(dom);
            }else{
                let text = dom.getElementsByTagName('waring')[0].textContent;
                console.log(text);
            }
        }  
    }
    request.send();
}    

htmlBtn.onclick = ()=>{
    let request = new XMLHttpRequest();
    request.open("GET","/test.html");
    request.onreadystatechange = () =>{
        let states = request.readyState,
            status = request.status;
        if(states === 4 && status === 200){
            let div = document.createElement("div");
            div.innerHTML = request.response;
            document.body.appendChild(div);
        }
    }
    request.send();
}
jsBtn.onclick = ()=>{
    let request = new XMLHttpRequest();
    request.open("GET","/test.js");
    request.onreadystatechange = () =>{
        let states = request.readyState,
            status = request.status;
        if(states === 4 && status === 200){
            let script = document.createElement("script");
            script.innerHTML = request.response;
            document.body.appendChild(script);
        }
    }
    request.send();
}
cssBtn.onclick = ()=>{
    let request = new XMLHttpRequest();
    request.open("GET","/style.css");
    request.onreadystatechange = () =>{
        let states = request.readyState,
            status = request.status;
        if(states === 4 && status === 200){
            let style = document.createElement("style");
            style.innerHTML = request.response;
            document.head.appendChild(style);
        }
    }
    request.send();
}
JSON
理解
  1. JSON是一门语言
  2. JSON是一门标记语言，用来展示数据
  3. 与HTML、CSS、XML、JavaScript一样，是一门独立的语言
  4. 请注意，我们应该说JSON中的对象而不是直接说JSON对象
  5. 中文官网
  6. 支持的数据类型
  • string-只支持双引号，不支持单引号和无引号
  • number-支持科学记数法
  • bool-true || false
  • null-没有undefined
  • object
  • array
  • 不支持函数，不支持变量
window.JSON
  1. JSON.parse
  • 将jSON格式的数据转换为JS对应类型的数据
  • JSON字符串 => JS数据
  • JSON6种数据，所以转换也只有6种
  • 不符合JSON语法，抛出Error对象
  • 一般用try/catch捕获错误
  1. JSON.stringify
  • JSON.parse的逆运算
  • JS数据 => JSON字符串
  • 由于JS的数据类型比JSON多，因此不一定能成功
  • 如果失败，抛出Error对象
xiaobangsky
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
测试浏览器对window.JSON的支持情况
CaiKanXP的专栏
02-07 1万+
ECMA-262标准第5版已经内置了JSON对象，最新的浏览器都已经支持了，但老的浏览器还未完全退出市场，不能完全忽略。 在地球被HTML5完全占领之前，测试一下各浏览器（主要是IE8）对内置 window.JSON 的支持情况，顺便也测了一下Box Model盒模型。 主页面代码：index.html 脚本代码：test.js function p
ALIPAY WEB 登陆rsa加密 分析记录
六桥风月IT随笔
04-02 1856
测试地址 https://auth.alipay.com/login/h5Login.htm?goto=https%3A%2F%2Fauthweb.alipay.com%2Fmobile%2Fauth%3Fv%3Dh5%26auth_type%3DAUTHACCOUNT%26biz_type%3Dopenservice%26sign%3DAIuHm3Q7BaDWv39Hu7udymjfpncLygKpen%252FNcZVABL8%253D%26pid%3D2088821693967553%26targe
android 面试算法题 实现单链表反转(1)，面试官问技术问题不太会怎么办
2401_84103675的博客
04-14 297
T行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！（5）反转后得到的链表最后一个结点是否为null？考虑完以上问题后，就能够写出正确的代码了。（2）假设链表为单节点链表，该怎样处理？（3）怎样防止在反转过程中断链？（4）反转后head是否更新？实现自定义链表反转类。
JavaScript之Ajax（一篇入门Ajax就够了）
热门推荐
weixin_50602266的博客
12-20 8万+
Ajax入门一篇就够
JavaScript中的Ajax
weixin_43466575的博客
04-10 6277
（1）什么是AjaxAjax：Asynchronous JavaScript And XML，异步JavaScript和XML技术。描述：不是一门新的语言或技术，是由JavaScript、XML、DOM、CSS等多种已有技术组合而成的一种浏览器端技术。功能：用于实现与服务器进行异步交互的功能。用js来实现页面的局部刷新。（2）Ajax工作流程。
Javascript---AJAX
xiangxiang的博客
08-26 202
AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX不是一种新的编程语言，而是一种技术;AJAX是异步的JavaScript和XML;AJAX是一种用于创建更好更快以及交互性更强的Web应用程序的技术;AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据（前端后端交互）;......
JavaScript实现栈
咩羊的博客
07-25 155
1.数据结构定义 在计算机中，存储和组织数据的方式。 注：数据结构与语言无关。 1.1常见的数据结构： 数组（Aarray）栈（Stack）链表（Linked List）图（Graph）散列表（Hash）队列（Queue）树（Tree）堆（Heap） 2.算法（Algorithm） ​ 一个有限指令集，每条指令的描述不依赖于语言 接受一些输入（有些情况下不需要输入） 产生输出 一定在有限步骤之后终止 注：数据结构的实现，离不开算法。 3.栈结构(Stack)—后进先出（LIFO） 是一种受限的线性
轻松理解JavaScript之AJAX
10-20
本文主要介绍了JavaScript中的AJAX的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧
javascript之AJAX框架使用说明
10-29
javascript之AJAX框架使用说明,需要的朋友可以参考下.`
JavaScript与Ajax开发课程大作业
最新发布
05-29
JavaScript和Ajax是Web开发中的重要技术，用于创建交互性强、响应快速的网页应用。这个"JavaScript与Ajax开发课程大作业"可能涵盖了从基础概念到高级技巧的全方位学习内容，旨在帮助学生深入理解和掌握这两种技术。 ...
javascript的ajax
我管它叫“知勤者笔记”，主要用来记录和分享我的日常生活与学习经历
03-04 2985
（域名）:443（端口号）/course/list（路径）协议、域名、端口号，任何一个不一样，就是不同域与路径无关，路径一不一样无所谓不同域同域。
【JavaScript】Ajax
南栀的博客
12-17 3613
Ajax
JavaScript-Ajax基础讲解
OuYyds的博客
04-16 1938
ajax概述： ajax全称：异步的JavaScript和xml，他是用于发送http请求（支持异步请求） ajax的特点： 1.支持异步请求 2.实现局部刷新 3.在局部刷新的时候可以保持浏览器不刷新（不会产生历史记录） ajax运用： 前端内置请求对象 --> 设置请求地址（携带数据）-- > 发送请求 --> 监听请求状态 —>请求完成后后端返回响应的数据 1.创建一个请求对象 request 请求 response 响应 let xhr = new
JavaScript-AJAX
yhwl66的博客
05-10 431
ajax （asynchronous JavaScript and xml）异步的JavaScript和xml（传输格式为xml 但一般为json），它主要是用于请求对应的数据来帮助渲染。优先使用强制缓存 如果没有强制缓存 使用协商缓存如果强制缓存了 那么协商缓存就不会被使用 且不会有请求发送如果没有强制缓存那么对应的协商缓存就会触发 主要比对的是最后修改时间和对应的文件标识如果都比对比成功那么就是使用协商缓存，如果没有比对上那么就不会缓存。
JavaScript核心技术之Ajax详解
热爱前端的大三在校生
10-10 1170
Ajax 的核心是 XMLHttpRequest 对象。所有现代浏览器都支持 XMLHttpRequest 对象。XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。首先我们在控制台打印一下，看看。
JS中的Ajax
桑稚远方的博客
08-22 1322
在 JavaScript 中，可以通过封装原生的 Ajax 请求来进行与服务器的数据交互。下面是一个封装了原生 Ajax 请求的示例代码，以及对代码的详细注解。
简单JS解密爬取股票信息案例
weixin_46913162的博客
10-28 776
前言： 今天给大家带来一个使用JS解密爬取股票信息的案例，本案例比较简单，主要介绍如何找出JS加密的过程，希望通过本案例可以带给大家学习JS的一些思路。 本案例网站：https://webapi.cninfo.com.cn/#/marketData 一、分析网页 我们通过查看开发者工具，可以看出该网页的主页里面并没有给我们响应什么数据，通过经验这个时候一般主页没有给我们响应数据，可以直接定位XHR这个选项，如图： 通过图片可以看出我们已经找到了包含数据的真正的API网址，就是箭头所指的这个，如图： 既
javascript进阶之AJAX
weixin_30607029的博客
04-05 227
AJAX 一 AJAX预备知识：json进阶 1.1 什么是JSON？ 　　JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。JSON是用字符串来表示Javascript对象； 　　请大家记住一句话：json字符串就是js对象的一种表现形式(字符串的形式) 　　既然我们已经学过python的json模块，我们就...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiaobangsky

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值