Danmo的学习之路（ajax）

最新推荐文章于 2024-04-30 11:49:18 发布
最新推荐文章于 2024-04-30 11:49:18 发布
阅读量121 收藏
点赞数
分类专栏： js/node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51235736/article/details/116103082
版权

视频教程：尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax最新版）

文章目录

请求的基本操作（P10）

html（客户端）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX GET 请求</title>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>

    <script>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById("result");
        //绑定事件
        btn.onclick = function(){
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置请求方法和 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
                    // 2xx 成功
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理结果  行 头 空行 体
                        //响应 
                        // console.log(xhr.status);//状态码
                        // console.log(xhr.statusText);//状态字符串
                        // console.log(xhr.getAllResponseHeaders());//所有响应头
                        // console.log(xhr.response);//响应体
                        
                        //设置 result 的文本
                        result.innerHTML = xhr.response;
                    }
                }
            }
        }
    </script>
</body>
</html>

判断xhr.readyState === 4 的原因参考：AJAX状态值与状态码

4: (完成)响应内容已经解析完成，用户可以调用

express（服务器）：

const express = require('express');

const app = express();

app.get('/server', (request, response) => {
    //设置响应头，设置允许跨域（之后讲）
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX');
});
//4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000 端口监听中....");
});

ajax中设置URL参数（P11）

xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
//参数之前用?分隔开，参数与参数之间用&分隔开

还是刚才的例子，点击按钮发送，此时：


设置参数

发送post请求（P13）

和发送get请求类似，把xhr.open里的第一个参数改为’'POST，xhr.send()的括号内可以有内容，发送请求体，如：

即：这样可以修改 请求体

xhr.send('a=100&b=200&c=300');
xhr.send('a:100&b:200&c:300');
xhr.send('1234567abcdefg');
//括号内可以是任意数据，只要服务器拿到请求体内数据后，可以对它进行解析即可

设置请求头（P14）

//预定义头信息
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//自定义头信息
xhr.setRequestHeader('name','atguigu');

自定义的头信息在发送请求时，浏览器由于保护机制，会报错，一般由后端人员解决，此处了解一下：
在express中，这样写：

//此处要把app.post改为app.all
app.all('/server', (request, response)=>{
    //设置响应头
    
    response.setHeader('Access-Control-Allow-Origin', "*");
    //加上这一句，表示所有类型的头信息都可以接受
    response.setHeader('Access-Control-Allow-Headers', '*');
    response.send('hello ajax');
});

服务端响应JSON数据（P15）

app.all('/json-server', (request, response) {
	//响应头
	response.setHeader('Access-Control-Allow-Origin', "*");
    response.setHeader('Access-Control-Allow-Headers', '*');
    //响应一个数据
    const data = {
    	name: 'atguigu'
    };
    //由于send()不能传入对象，先转为字符串
    let str = JSON.stringify(data);
    //设置响应体
    response.send(str);
})

//发送请求
const xhr = new XMLHttpRequest();
//设置响应体数据的类型（自动转换的关键）
xhr.responseType = 'json';
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status >= 200 && xhr.status < 300){
            // 1. 手动对数据转化
            // let data = JSON.parse(xhr.response);
            // result.innerHTML = data;
            
            // 2. 自动转换
            result.innerHTML = xhr.response;
        }
    }
}

IE缓存问题解决（P17）

IE缓存问题：IE浏览器不从服务器请求最新数据，而是拿缓存，可能得到的数据不是最新的。

解决方案：在URL最后添加参数，并且使参数每一次都是不同的

xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now());

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

请求超时与网络异常处理（P18）

服务器设置3s的定时器，当浏览器等待2s后由于超时，将执行ontimeout的回调

如果没有联网，此时会执行onerror的回调（在有网状态下，可以用Chrome中的Network-> Offline，在Disabled cache 右边）

const btn = document.getElementsByTagName('button')[0];
const result = document.querySelector('#result');

btn.addEventListener('click', function(){
    const xhr = new XMLHttpRequest();
    //超时设置 2s 
    xhr.timeout = 2000;
    //超时回调
    xhr.ontimeout = function(){
        alert("网络异常, 请稍后重试!!");
    }
    //网络异常回调
    xhr.onerror = function(){
        alert("你的网络似乎出了一些问题!");
    }

    xhr.open("GET",'http://127.0.0.1:8000/delay');
    xhr.send();
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status >= 200 && xhr.status< 300){
                result.innerHTML = xhr.response;
            }
        }
    }
})

//延时响应
app.all('/delay', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    setTimeout(() => {
        //设置响应体
        response.send('延时响应');
    }, 3000)
});

手动取消ajax请求（P19）

请求刚发过去时，处于pending状态，然后才会变为200OK。

现在设置了两个按钮，按第一个按钮会发送ajax请求，按第二个按钮会取消请求，先按第一个，然后立刻按第二个（在pending变为200之前），则请求会被cancel

//获取元素对象
const btns = document.querySelectorAll('button');
let x = null;

btns[0].onclick = function(){
    x = new XMLHttpRequest();
    x.open("GET",'http://127.0.0.1:8000/delay');
    x.send();
}

// abort
btns[1].onclick = function(){
    x.abort();
}

解决重复发送请求问题（P20）

当一个用户频繁向服务器发送相同的请求时，服务器压力较大，此时应该取消之前的请求，发送一个新的，从而使得服务器只用处理一个请求

做法是添加标识变量：

//获取元素对象
const btns = document.querySelectorAll('button');
let x = null;
//标识变量
let isSending = false; // 是否正在发送AJAX请求

btns[0].onclick = function(){
    //判断标识变量
    if(isSending) x.abort();// 如果正在发送, 则取消该请求, 创建一个新的请求
    x = new XMLHttpRequest();
    //修改 标识变量的值
    isSending = true;
    x.open("GET",'http://127.0.0.1:8000/delay');
    x.send();
    x.onreadystatechange = function(){
        if(x.readyState === 4){
            //修改标识变量
            isSending = false;
        }
    }
}

Axios发送ajax请求（P23）

先引入axios（用的时候查看官方文档，还有npm包下载）

<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>

配置baseURL：如果不配置的话，axios.get后的url就得写完整的，比如此处是：‘http://127.0.0.1:8000/axios-server’

axios使得加参数和请求头信息变得方便和清晰，只要像下边这样写即可：

// https://github.com/axios/axios
const btns = document.querySelectorAll('button');

//配置 baseURL
axios.defaults.baseURL = 'http://127.0.0.1:8000';

btns[0].onclick = function () {
    //GET 请求
    axios.get('/axios-server', {
        //url 参数
        params: {
            id: 100,
            vip: 7
        },
        //请求头信息
        headers: {
            name: 'atguigu',
            age: 20
        }
    }).then(value => {
        console.log(value);
    });
    //这里使用了Promise，在控制台输出，结果如下图所示：
}

btns[1].onclick = function () {
	//POST 请求
	//注意此处结构和GET请求不同：第一个参数是url，第二个参数是请求体，第三个参数是其他配置
    axios.post('/axios-server', {
        username: 'admin',
        password: 'admin'
    }, {
        //url 
        params: {
            id: 200,
            vip: 9
        },
        //请求头参数
        headers: {
            height: 180,
            weight: 180,
        }
    });
}

//axios 服务
app.all('/axios-server', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});

在这里插入图片描述
其中：

  • config：配置信息
  • data：响应体解析之后的结果（自动转为对象）
  • headers：请求头信息
  • request：请求的原生ajax对象

axios函数发送ajax请求（P24）

和前边的差不多，但是结构更清晰了，像手写报文一样

btns[2].onclick = function(){
    axios({
        //请求方法
        method : 'POST',
        //url
        url: '/axios-server',
        //url参数
        params: {
            vip:10,
            level:30
        },
        //头信息
        headers: {
            a:100,
            b:200
        },
        //请求体参数
        data: {
            username: 'admin',
            password: 'admin'
        }
    }).then(response=>{
        //响应状态码
        console.log(response.status);
        //响应状态字符串
        console.log(response.statusText);
        //响应头信息
        console.log(response.headers);
        //响应体
        console.log(response.data);
    })
}

同源策略（P26）

同源： 当前网页 和 ajax请求的目标资源 的URL的：协议、域名、端口号 必须完全相同。

默认情况下，不满足同源策略，无法发送ajax请求

同源的本质：网页资源是从某一个服务器A的某一个服务B来的，如果该网页发送请求时，依然向A的B服务发请求，那么目标请求的资源和网页资源来自同一台服务器的同一个服务，即同源，否则跨域

const btn = document.querySelector('button');

btn.onclick = function(){
    const x = new XMLHttpRequest();
    //这里因为是满足同源策略的, 所以 url 可以简写
    //（浏览器自动加上协议、域名和端口）
    x.open("GET",'/data');
    x.send();
    x.onreadystatechange = function(){
        if(x.readyState === 4){
            if(x.status >= 200 && x.status < 300){
                console.log(x.response);
            }
        }
    }
}

const express = require('express');

const app = express();

app.get('/home', (request, response)=>{
    //响应一个页面
    response.sendFile(__dirname + '/index.html');
});

app.get('/data', (request, response)=>{
    response.send('用户数据');
});

app.listen(9000, ()=>{
    console.log("服务已经启动...");
});

JSONP（P27）

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据（只支持get方法），通过<script>标签来实现

script这个请求过去以后，要的是一个函数调用的内容（一段JS代码），这样前端的浏览器才能解析并执行其中的内容，让前端已声明过的函数进行处理，这就是JSONP跨域原理

<div id="result"></div>
<script>
	//提前声明handle函数
    //处理数据
    function handle(data) {
        //获取 result 元素
        const result = document.getElementById('result');	
        //#result是一个div，此处没有体现它
        result.innerHTML = data.name;
    }
</script>
<script src="http://127.0.0.1:8000/jsonp-server"></script>
<!--跨域，完成函数调用-->

返回的结果是函数调用，而这个函数参数就是想给客户端返回的结果数据
函数必须提前声明（内嵌script标签内），否则会报错

//jsonp服务
app.all('/jsonp-server',(request, response) => {
    const data = {
        name: '尚硅谷atguigu'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);
    //不用send是因为send会加上请求头(没有深究)
});

JSONP实战（P28）

需求：输入username后敲回车键，默认该username已经存在（因为没有数据库），边框变红，并且在下方显示“用户名已经存在”

下边是JSONP的另一种写法，在DOM的最后插入script结点

用户名: <input type="text" id="username">
<p></p>
<script>
    //获取 input 元素
    const input = document.querySelector('input');
    const p = document.querySelector('p');
    
    //声明 handle 函数
    function handle(data){
        input.style.border = "solid 1px #f00";
        //修改 p 标签的提示文本
        p.innerHTML = data.msg;
    }

    //绑定事件
    input.onblur = function(){
        //获取用户的输入值
        let username = this.value;
        //向服务器端发送请求 检测用户名是否存在
        //1. 创建 script 标签
        const script = document.createElement('script');
        //2. 设置标签的 src 属性
        script.src = 'http://127.0.0.1:8000/check-username';
        //3. 将 script 插入到文档中
        document.body.appendChild(script);
    }
</script>

//用户名检测是否存在
app.all('/check-username',(request, response) => {
    const data = {
        exist: 1,
        msg: '用户名已经存在'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);
});

CORS响应头实现跨域（P30）

CORS：Cross-origin resource sharing 跨域资源共享

之前也用过了，只需要在服务端加上：

response.setHeader("Access-Control-Allow-Origin", "*");
// * 表示通配，如果只想适用于某个网页，把第二个参数改为它的URL即可

//一般还加下边两个
response.setHeader("Access-Control-Allow-Headers", '*');
response.setHeader("Access-Control-Allow-Method", '*');

服务端代码：

app.all('/cors-server', (request, response)=>{
    //设置响应头
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", '*');
    response.setHeader("Access-Control-Allow-Method", '*');
    // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
    response.send('hello CORS');
});

查看更多的响应头：MDN-跨源资源共享（CORS）

DanmoSAMA
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一.node的http模块；二.同步和异步；三.异步操作的实现：ajax；四.jQuery中对ajax封装；五.Node的Web框架
Mr_115的博客
11-23 139
一.node的http模块；二.同步和异步；三.异步操作的实现：ajax；四.jQuery中对ajax封装；五.Node的Web框架
微软云计算平台Azure的学习教程
爱程序，爱生活
08-24 1021
1. 创建数据工厂 - 使用用户界面（UI） - 使用"复制数据"工具（UI） - 1.新建容器 - 2.创建数据工厂 - 3.启动数据复制工具 - 使用python 数据的接入、ETL、Analysis 2. 移动/复制数据 - 使用数据复制工具（UI） - 数据库全表复制 - 自定义筛选复制 - 可定时配置复制 - 使用Pyth
Danmo的学习之路（express）
DanmoSAMA的博客~
04-10 149
基本感知（P48） let express = require('express'); //引包 let app = express(); //创建服务器应用程序 // 相当于 server.listen app.listen(3000, function () { console.log('app is running at port 3000.') }) 无需判断多重if，不管先后次序，直接使用app.js方法 不需要设置响应内容类型，也不担心中文出现乱码 app.get('/', funct
Unity3d开发学习之路
HeKu_DanXingXian的博客
09-09 269
Unity3D的发展前景及行业优势：
救护员证学习笔记
最新发布
MissXu666的博客
04-30 571
突发伤病在专业救护人员到达前向伤病人员提供的及时救护目的是：保存生命，减轻痛苦，防止病情恶化C 心脏的P 肺部的R 复活是一项针对呼吸、心脏骤停实时的最基本、最重要的抢救方式同时进行CRP-取AED-拨打急救电话A 自动的E 体外的D 除颤器地铁站、市民中心等公共场所有呼吸道的任何一个部位被异物阻塞，导致呼吸不畅或完全中断易发人群进食说话吞咽过快醉酒呕吐脑部疾病患脑血管疾病儿童小孩（在玩耍/哭闹/喂奶/吸食时）
Spring之AOP学习
此男子淡漠
01-14 222
现在学习一下spring之aop AOP概念 关键字 含义 aspect 切面，关注点(我可以做哪个方面的事情)。 PointCut 切点，定义切面规则（我可以帮哪些人做事情） Joinpoint 连接点，需要代理的具体方法(需要代理的具体的事情) Target Object 被代理的对象(目标对象) Advice 回调的通知 （在什么时间织入什么样的行为） 我...
感情淡漠时
MISSTOTO的博客
10-11 334
感情是什么？突然想着想着就觉得自己好像变腻了，好像唯一对她们感兴趣的就只有在发情的时候了....到底爱情会改变一个人什么？它到底是怎么改变的!我们要怎么样去处理这样的关系呢！提不起兴趣啊！！对其他的人    我好像并没有对爱情失去信心，也感觉它无时无刻都是存在的，只是不再相信它会在我身上再发生，男人和女人在一起到底是出于哪种    一百种人，一百种爱的方式。我相信每个人都有他没真诚的时候，可是
Web从入门到放弃-CSS的学习(五)
OnionQueen的博客
11-16 161
Web从入门到放弃
论情感的淡漠
麦哲思科技
12-08 1445
这是一个沉重的话题，10年前曾经和朋友讨论过，当时的结论是：随着社会的发展，人与人之间的感情越来越淡漠，家庭趋向于解体。最近也有和朋友讨论起这个话题，结论依旧。 试想一下： 你现在和父母生活在一起吗？相距有多远？你每年和父母在一起的时间有多长？ 你父母会依赖你养老吗？ 你将来会让你的孩子养老吗？ 你的孩子将来会和你生活在一个城市里吗？ 如果你兄弟姐妹生病了，你一年挣10万元人民币，你会拿出多少钱来
数组学习内容
Mr_115的博客
10-17 214
数组：内存中有一块连续的存储单元，这些存储单元具有共同的名称，不同的所有（下标）
冠脉造影后意识淡漠肌无力学习教案.pptx
11-19
冠脉造影后意识淡漠肌无力学习教案.pptx
冠脉造影后意识淡漠肌无力PPT学习教案.pptx
10-02
冠脉造影后意识淡漠肌无力PPT学习教案.pptx
淡漠夕阳引擎源码含控件2018全套
02-03
请使用delphi2007编译， 去除数个后门，去除注册限制 删除部分冗余代码，减小程序体积,包含所需控件
流光淡漠,日近黄昏.pdf
10-23
流光淡漠,日近黄昏.pdf
安全意识，一日不可淡漠.docx
10-01
安全意识，一日不可淡漠.docx
JS什么时候在for循环中用var会出问题
DanmoSAMA的博客~
02-04 1143
参考博客：阮一峰ES6教程 var 一直听说var声明变量，存在循环变量泄漏为全局变量问题，但总是想不明白这个“全局”有什么影响，还有，到底什么时候输出的结果是递增/减的值，什么时候输出一样的值，也不清楚。 现在总结一下： 正常情况 for(var i = 0; i < 10; i++){ console.log(i); } alert(i);//10 依次输出1~9，弹出10 问题情况 此处借用阮一峰博客的代码： var a = []; for (var i = 0; i < 10; i+
构造函数的return问题
DanmoSAMA的博客~
02-12 1118
参考博客:什么是构造函数？构造函数与普通函数的区别？ return 语句的使用： 普通函数return后面有值正常返回，没有值或者没有写return就返回undefined。 构造函数一般不需要使用return,如果返回基本类型值，可以忽略return语句。 如果返回值是引用类型时，会直接返回引用类型本身。 // 构造函数 返回引用类型 function Person(name) { this.name = name; return { a: 1 }; } let p2
Danmo的学习之路（JavaScript基础_上）
DanmoSAMA的博客~
11-21 1003
11.21 虽然还没学完H5和CSS，怀着好奇心，先来了解一下JS。 ECMAScrpt是JavaScript标准，一般情况下我们认为这两个词是一个意思。 但一个完整的JavaScrpt由三部分构成：ECMAScript（标准/浏览器端）、DOM（文档对象模型，提供操作对象使我们操纵网页）、BOM（提供操作对象使我们操纵浏览器） ...
JS五种继承方法和优缺点
DanmoSAMA的博客~
02-12 588
虽然ES6的Class继承确实很方便，但是ES5的继承还是要好好了解一下： 参考视频：详解JS继承（超级详细且附实例） 预备知识 构造函数的属性 function A(name){ this.name = name; //实例基本属性(该属性，强调私有，不共享) this.arr = [1]; //实例引用属性(该属性，强调私用，不共享) this.say = function(){ //实例引用属性(该属性，强调复用，需要共享) console.log('hello'); } } 注意：数
1. 当前，在高职学生中出现了如下现象：劳动观念淡漠，上了大学生活不能自理 甚至疫室卫生都没人打扫：厌恶劳动，不愿意干体力活，看不起劳动者：随意浪费水电、粮食，不学重他人劳动成果：贪图安返，不愿意下基层锻炼学习等等。针对上述五象，请谈谈对学生进行劳动教育的认识和实施途径。（总字数 200 字以上)
06-10
当前高职学生中出现的这些现象，反映出了他们缺乏正确的劳动观念和价值观。因此，对于这些学生进行劳动教育是非常必要的。下面谈谈我的认识和实施途径： 首先，对于学生的劳动观念，我们需要进行思想教育。让学生认识到劳动是一种光荣的、必要的社会活动，是实现自我价值的重要途径。我们可以通过课程教育、主题班会等方式，让学生了解劳动的价值，从而树立正确的劳动观念。 其次，针对学生不愿意干体力活的现象，我们可以开展志愿服务活动，让学生参与到社区、乡村等地的义务劳动中，提高他们的身体素质和劳动技能。在这个过程中，帮助学生认识到劳动所带来的快乐和成就感，从而改变他们对劳动的刻板印象。 再次，我们需要加强对学生节约用水、用电和粮食的宣传和教育。通过开展主题班会、组织宣传活动等方式，让学生了解资源的宝贵性和节约的重要性，引导他们从小事做起，养成良好的节约习惯。 最后，对于学生贪图安逸，不愿意下基层锻炼的现象，我们可以组织实践课程、社会实践等活动，让学生深入到基层，了解基层的实际情况和工作内容，从而提高他们的实践能力和责任感。同时，还可以引导学生多读书、多看报，了解社会发展的需要和自身的定位，从而增强对基层锻炼的认识和意愿。 综上所述，劳动教育是非常重要的，我们需要采取多种措施，从多个方面入手，让学生从根本上改变错误的劳动观念和价值观，走向光明的未来。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值