AJAX的学习记录

最新推荐文章于 2023-03-13 23:13:10 发布
最新推荐文章于 2023-03-13 23:13:10 发布
阅读量140 收藏
点赞数 1
分类专栏： 前端技术栈 文章标签： javascript html5 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xa18064036359/article/details/110250486
版权
本文深入讲解了AJAX的基础知识，包括HTTP协议、请求响应报文格式，以及如何处理不同状态码。通过实例展示了原生AJAX的GET和POST请求用法，还涉及JSON响应处理、IE缓存问题、请求超时和网络异常的解决方案。此外，提到了fetch函数的使用以及跨域问题的两种解决方法：JSONP和CORS。
摘要由CSDN通过智能技术生成

AJAX 的开发笔记

HTTP

HTTP（hypertext transport protocol）协议『超文本传输协议』，协议详细规定了浏览器和万维网服务器之间互相通信的规则。
约定, 规则

请求报文

重点是格式与参数

行      POST  /s?ie=utf-8  HTTP/1.1
头      Host: atguigu.com
        Cookie: name=guigu
        Content-type: application/x-www-form-urlencoded
        User-Agent: chrome 83
空行
体      username=admin&password=admin

响应报文

行      HTTP/1.1  200  OK
头      Content-Type: text/html;charset=utf-8
        Content-length: 2048
        Content-encoding: gzip
空行
体      <html>
            <head>
            </head>
            <body>
                <h1>尚硅谷</h1>
            </body>
        </html>

响应的状态码

  • 404
  • 403
  • 401
  • 500
  • 200

原生AJAX

GET请求的使用

// 获取button元素对象
        const btn = document.querySelector('button');  // 通过该方法可以直接通过标签选择器来获取对象
        const box = document.querySelector('.box');
        // 绑定事件
        btn.onclick = function(){
            // 分4步
            // 1，创建对象
            const xhr = new XMLHttpRequest();
            // 2,初始化，设置请求方法和url 即要请求的url地址
            xhr.open('GET','http://127.0.0.1:8000/server');
            // 3,发送
            xhr.send();
            // 4，事件绑定 处理服务器返回的结果
            // on  when  当...时候  触发
            // readystate   是 xhr 对象中的属性， 表示请求的状态  0 1 2  3 4
            // change 改变
            xhr.onreadystatechange = function(){
                // 判断  当服务器返回了所有的结果时
                if(xhr.readyState === 4){
                    // 判断状态码  200  404  403  401  500
                    //  只要是200到300以内的状态码  都是表示成功
                    if(xhr.status >= 200 && xhr.status < 300){
                        // 处理结果  处理响应的  行 头 空行 体
                        //响应
                        // console.log(xhr.status);  // 状态码
                        // console.log(xhr.statusText);  //  状态字符串
                        // console.log(xhr.getAllResponseHeaders());  // 所有响应头
                        // console.log(xhr.response);  // 响应体

                        // 将获取到响应体  显示在box div中
                        box.innerHTML = xhr.response;

                    }
                }
            }


        }

POST请求的使用

  // 获取元素对象
        const box = document.querySelector('.box');
        // 绑定事件   当鼠标移到该div对象上时，触发该事件
        box.addEventListener('mousemove',function(){
            // console.log('text');
            // 4步
            //1，创建对象
            const xhr = new  XMLHttpRequest();
            //2,初始化 设置类型与URL
            xhr.open('POST','http://127.0.0.1:8000/server');
            // 设置请求头
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            //3,发送
            xhr.send('name = "小爱"……age=18');  // send的方法可以发送请求参数  数据要用引号包起来，因为只能是字符串
            //4,事件绑定
            xhr.onreadystatechange = function(){
                // 该事件只会在请求请求发送后结束后就会触发
                // 判断发送结束，返回的状态
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        // 处理服务端返回的结果
                        box.innerHTML = xhr.response;
                    }
                }
            }

        })

JSON响应的处理

游览器端

 const box = document.querySelector('.box');
        // 绑定键盘的按下事件，这个可以是任意键
        window.onkeydown = function(){
            // 发送ajax请求  4步走
            const xhr = new XMLHttpRequest();
            // 设置响应体数据的类型
            xhr.responseType = 'json';   // 如果是手动转换就不要该行代码
            // 初始化，设置发送的请求类型和要请求的url地址
            xhr.open('GET','http://127.0.0.1:8000/json-server')
            // 发送请求参数
            xhr.send();
            // 事件绑定  一旦发送结束，就触发该事件
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){  // 该判断表示已经得到返回的请求的结果了
                    if(xhr.status >= 200 && xhr.status <300){
                        // box.innerHTML = xhr.response;

                        // 手动对数据转换
                        // 通过JSON对象的parse()方法将一个json字符串转换为一个对象
                        // let obj = JSON.parse(xhr.response);
                        // box.innerHTML = obj.name;
                        // console.log(obj);

                        //自动转换
                        console.log(xhr.response);
                        box.innerHTML = xhr.response.name;
                    }

                }
            }

        }

服务器端

//1,第一步，引入express包

const express = require('express');

//2，第二步创建应用对象
const app = express();

//3,创建路由规则
// request  是对请求对象报文的封装  即请求对象
//  response  是对响应报文的封装，即响应对象

// 配置路由
// 接收get类型的请求
app.get('/server', (request, response) => {
    // 设置响应头，即请求头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('HELLO AJAX');
})

// 接收post类型的请求
app.post('/server', (request, response) => {
    // 设置响应头，即请求头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('HELLO AJAX');
})

// 接收任意类型的请求
app.all('/json-server', (request, response) => {
    // 设置响应头，即请求头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 响应一个对象给他
    const data = {
        name:'atguigu'
    }
    // t通过JSON对象的stringify()方法将一个对象转换为json类型的数据
    let str = JSON.stringify(data);
    
    // 设置回复该请求的响应体
    response.send(str);
})

// 4，监听端口启动服务
app.listen(8000, () => {
    console.log('服务已经启动 http://127.0.0.1:8000/server');
});

IE缓存问题

浏览器端

 // 2,设置请求的类型和要请求的url地址   发送一个请求参数，
            //将当前时间戳作为参数发送过去，这样浏览器就不会使用本地的缓存了
            xhr.open('GET','http://127.0.0.1:8000/ie?t='+Date.now());

服务器端

// 4,针对IE缓存问题
app.get('/ie', (request, response) => {
    // 设置响应头，即请求头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('HELLO IE');
})

发送请求超时与网络异常问题

浏览器端

   // 绑定事件 
        btn.addEventListener('click',function(){
            // 4,步骤
            // 1，新建一个ajax的对象
            const xhr = new XMLHttpRequest();
            // 设置延时2s
            xhr.timeout = 2000;
            // 延时回调  即xhr对象发送请求时，延时的时候会调用的函数
            xhr.ontimeout = function(){
                alert('网络异常，请稍后重试！！！');
            }

            // 网络异常回调  发送请求时，出现网络出现异常时，会自动调用的回调函数
            xhr.onerror = function(){
                alert('你的网络似乎出现了一些问题！')
            }



            // 2,设置请求的类型和要请求的url地址
            xhr.open('GET','http://127.0.0.1:8000/delay')

        })

服务器端

// 5,延时响应
app.get('/delay', (request, response) => {
    // 设置响应头，即请求头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    // 定义一个定时器函数
    setTimeout(() => {
            // 设置响应体
        response.send('HELLO err');
    }, 3000);
    
})

取消ajax请求

浏览器端

 btns[1].onclick = function(){
            // 通过ajax对象的abort()方法即可取消点这个发送请求
            x.abort();
        }

重复请求问题

浏览器端

 // 获取元素对象
        const btns = document.querySelectorAll('button');
        // 定义一个变量用来存放ajax对象
        let x = null;
        // 定义一个标识符变量。用来记录发送的状态
        let isSending = false; //  是否正在发送ajax请求

        // 绑定事件
        btns[0].addEventListener('click',function(){
            // 判断发送标识的状态
            if(isSending) {
                x.abort();  //如果正在发送，则取消该请求，然后后面创建一个新的ajax请求
            } 
            x = new XMLHttpRequest();
            // 修改发送请求的状态
            isSending = true; // 表示正在发送请求
            x.open('GET','http://127.0.0.1:8000/delay');
            x.send();
            if(x.readyState === 4){
                // 修改标识符
                isSending = false;  // 表示没有在发送请求，因为已经发送结果
            }
        })

fetch() 函数发送ajax请求

浏览器端

//获取对象
        const btn = document.querySelector('button');

        btn.onclick = function(){
            // 通过fetch函数发送ajax请求
            fetch('http://127.0.0.1:8000/fetch',{

                // 请求方法
                method:'POST',
                // 请求头
                headers:{
                    name:'wotule '
                },
                // 请求体
                body:'username=admin&password=admin'
            }).then(response =>{
                // fetch 函数的返回值也是一个promise异步对象
                // return response.text();
                // 如果服务器返回的是json字符串对象，即使用下面方法
                return response.json();
            }).then(response =>{
                console.log(response);
            })
        }

服务器端

// 6，axios服务响应
app.all('/fetch', (request, response) => {
    // 设置响应头，即请求头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    let obj = {
        name:'xiaoai',
        age :18
    }
    response.send(JSON.stringify(obj));
    
})

跨域问题，解决一 jsonp方法，使用script标签

浏览器端

<div id="result"></div>
    <script>
        //处理数据
        function handle(data) {
            //获取 result 元素
            const result = document.getElementById('result');
            result.innerHTML = data.name;
        }
    </script>
    <!-- <script src="http://127.0.0.1:5500/%E8%AF%BE%E5%A0%82/%E4%BB%A3%E7%A0%81/7-%E8%B7%A8%E5%9F%9F/2-JSONP/js/app.js"></script> -->
    <script src="http://127.0.0.1:8000/jsonp-server"></script>

服务器端

//jsonp服务
app.all('/jsonp-server',(request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        name: '尚硅谷atguigu'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果  返回的结果要是一个js代码的字符串
    response.end(`handle(${str})`);
});

跨域问题，解决二 ，使用官方的方法CORS

服务器端

app.all('/cors-server', (request, response)=>{
    //设置响应头，加上下面的3行代码即可实现跨域
    response.setHeader("Access-Control-Allow-Origin", "*");   // 表示允许任何url地址请求
    response.setHeader("Access-Control-Allow-Headers", '*');// 表示允许任何类型的请求头
    response.setHeader("Access-Control-Allow-Method", '*');  // 表示允许任何类型的请求方法
    // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500"); // 该行代码表示指定只能该url地址访问该服务器
    response.send('hello CORS');
});
小艾同学呀
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Ajax学习笔记
2301_82244607的博客
04-28 986
XMLHttpRequest()：创建 XHR 对象的构造函数status：响应状态码值，如 200、404statusText：响应状态文本，如 ’ok‘、‘not found’readyState：标识请求状态的只读属性 0-1-2-3-4onreadystatechange：绑定 readyState 改变的监听responseType：指定响应数据类型，如果是 ‘json’，得到响应后自动解析响应response：响应体数据，类型取决于 responseType 的指定。
史上最详细Ajax学习笔记
楠黎倾风的博客
09-19 7980
史上最强Ajax学习笔记
ajax学习记录
weixin_45090728的博客
03-13 97
ajax学习
ajax学习笔记
z20210911的博客
08-08 720
有一定关系，但是这两个是两回事。json是存储和交互数据的格式，jsonp是后端解决跨域的方式，为什么说他两有关系呢是因为后端返回数据必须打成JOSN字符串。3：已经回来一部分数据了，小的数据会在此阶段一次性接收完毕，较大的数据有待进一步接收，响应头回来了。3.put delete这两个请求都属于复杂请求，这些请求在真正请求之前都需要嗅探请求（也 可以叫做预请求）//xhr内部有5种状态，值分别为：0、1、2、3、4（了解即可）app.use(cors())使用中间件，全局都能使用了，可以随便请求了。...
AJAX学习笔记
tangwenboy的博客
03-07 129
AJAX请求报文： 行： post /s?ie=utf-8 HTTP1.1 头： host：atguigu.com cookie:name=guigu 体： username=admin&password=admin 响应报文 行： HTTP/1.1 200 OK 体: html代码段 运用express工具 响应网页发送的GET或POST请求 AJAX使用 AJAX请求设置参数: url参数：/server?a=100..
Ajax 学习笔记
C__herry的博客
10-21 203
AJAX简单了解
ajax学习记录总结
GuardianMANGO的博客
04-14 873
Ajax学习记录 URL 地址组成：客户端与服务器之间的通信协议 存有该资源的服务器名称 资源在服务器上具体的存放位置 客户端与服务器通信过程 请求-处理-相应 资源的请求方式 get请求用于获取服务器端资源 post用于向服务器提交数据 什么是Ajax Ajax的全称为Asynchronous Javascript And XML（异步Javascript和XML） 在网页中使用XMLHttpRequest对象和服务器进行数据交互的方式，就是ajax ajax可以实现网页和服务器之间的数据交
Ajax学习笔记整理
10-22
Ajax: Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据
jquery中ajax学习笔记4
10-28
### jQuery中Ajax学习笔记4：缓存问题与中文问题详解 #### 缓存问题解析 在Web开发过程中，经常会遇到浏览器缓存导致的数据更新问题。本文档将详细讲解如何识别和解决缓存问题。 ##### 什么是缓存问题？ 缓存...
16ajax学习笔记1
08-08
在本篇16ajax学习笔记1中，我们将探讨Ajax的基础概念、使用方法以及jQuery库中的Ajax实现。 1、发送请求： Ajax的首要任务是创建XMLHttpRequest对象，这是浏览器提供的API。在JavaScript中，我们可以通过new ...
Promise 异步对象的学习记录
热门推荐
xa18064036359的博客
05-05 6万+
Promise 异步对象的学习记录 // 定义一个Promise异步异步对象 const p1 = new Promise((resolve,reject)=>{ if(true){ // 调用resolve函数，改变异步对象的状态为成功，且返回一个成功的数据出去 resolve('我是成功状态！'); }else{ // 调用reject
vue的学习笔记&&基本语法的使用
xa18064036359的博客
12-17 634
1. Vue.js是什么? 1). 一位华裔前Google工程师(尤雨溪)开发的前端js库 2). 作用: 动态构建用户界面 3). 特点: * 遵循MVVM模式 * 编码简洁, 体积小, 运行效率高, 移动/PC端开发 * 它本身只关注UI, 可以轻松引入vue插件和其它第三库开发项目 4). 与其它框架的关联: * 借鉴angular的模板和数据绑定技术 * 借鉴react的组件化和虚拟DOM技术 5). vue包含一系列的扩展插件(库): * vue-cli: vue脚手架 * vue-
react项目搭建步骤
xa18064036359的博客
08-28 566
创建项目 create-react-app 项目名字 参考项目结构图，搭建项目各个文件夹 一，初始化全部的css 使用 reset .css git地址 https://github.com/search?q=reset.css 我们使用npm或者yarn下载 npm install --save normalize.css yarn add normalize.css 然后 在项目中全局导入即可，index.js中引入 二，配置项目文件路径的别名 方便获取其他位置的文件和引用他们 第一步。我们使用一个
使用node连接并操作MongoDB数据库 对数据进行 、增、 删、 改、 查
xa18064036359的博客
12-02 453
创建一个node项目，并初始化项目文件 npm init --yes 在项目根目录中创建主文件app.js
async与await两个关键字的使用
xa18064036359的博客
05-29 353
async与await两个关键字的使用 他们是es6的新语法，用来处理异步对象中的数据获取问题 async 用来声明一个异步函数，可以将一个普通函数声明为一个异步函数，获取里面的数据的话，需要通过await关键字来获取 await 关键字只能在异步函数中使用，可以直接获取到异步对象中的返回结果 // async与await两个关键字的使用 // // 1，async用来声明一个异步函数，可以将一个普通函数声明为一个异步函数 // 获取里面的数据的话，需要通过await关键字来获取 //
Git的学习笔记&&基本使用
xa18064036359的博客
12-17 282
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IJdk3yf5-1608197653775)(Pictures/logo.jpg)] everything-is-local Author：Shine Version：9.0.2 文章目录一、引言二、介绍三、Git安装3.1 下载Git3.2 安装3.3 基本配置3.4 测试四、架构五、仓库5.1 新建仓库5.2 工作区5.3 暂存区5.4 分支六、基本操作6.1 查看仓库状态6.2 暂存文件6.3 提交文件七、远程仓库7.
nodejs的常用模块学习记录
xa18064036359的博客
05-29 231
nodejs的学习记录
axios的简单使用
xa18064036359的博客
05-29 154
标题axios的使用 axios官网文档 get请求 浏览器端 <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script> <script> // 获取对象 const btns = document.querySelectorAll('button'); //配置 baseURL axios.defa
Ajax学习笔记pink老师
最新发布
07-29
您好！对于学习Ajax，我可以为您提供一些学习笔记。以下是一份简要的Ajax学习笔记，希望对您有所帮助： 1. 什么是Ajax？ - Ajax全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建交互式Web应用程序的技术。 - 它通过在后台与服务器进行数据交换，实现在不刷新整个页面的情况下更新部分页面内容。 2. Ajax的优点： - 异步处理：可以在后台发送和接收数据，而无需刷新整个页面。 - 提高用户体验：通过部分更新页面内容，可以提供更快的响应时间和更流畅的用户体验。 - 减轻服务器负担：只更新需要的部分内容，减少了不必要的数据传输和服务器负载。 3. Ajax的基本原理： - 使用XMLHttpRequest对象向服务器发送请求，并接收响应。 - 通过JavaScript在前端处理响应数据。 - 更新页面内容，以显示最新的数据。 4. Ajax的核心技术： - XMLHttpRequest对象：用于与服务器进行数据交换。 - JavaScript：用于处理响应数据和更新页面内容。 - XML或JSON：用于传输数据格式。 5. Ajax的使用步骤： - 创建XMLHttpRequest对象。 - 定义请求类型、URL和是否异步。 - 发送请求并接收响应。 - 处理响应数据并更新页面内容。 6. 常见的Ajax框架和库： - jQuery：一个流行的JavaScript库，提供了简化Ajax开发的方法和函数。 - Axios：一个基于Promise的HTTP客户端，用于浏览器和Node.js。 - Fetch API：一种用于发送和接收网络请求的新标准。 这只是Ajax学习的一些基本概念和步骤，您可以进一步深入学习Ajax的相关知识和实践。希望这些笔记对您有所帮助！如有更多问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小艾同学呀

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

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

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

打赏作者

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

抵扣说明：

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

余额充值