#Ajax课程笔记

最新推荐文章于 2024-07-26 11:41:15 发布
最新推荐文章于 2024-07-26 11:41:15 发布
阅读量80 收藏
点赞数
分类专栏： Ajax 文章标签： ajax javascript ecmascript
本BLOG上原创文章为前端小将_Lue所创，未经本人许可，不得用于商业用途。转载请注明出处，否则保留追究法律责任的权利。
本文链接：https://blog.csdn.net/2301_77135626/article/details/130019933
版权

初识Ajax

第一章原生Ajax

1.1Ajax简介

Ajax就是异步JS和XML。

通过Ajax可以在浏览器向服务器发送异步请求，最大的优势：无刷新获取数据

Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

1.2XML简介

XML 可拓展标记语言

XML 被设计用来传输和存储数据

HTML 是用来在浏览器当中呈现数据的

XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据

预定义标签：标签是提前定义好的

XML现在已经被JSON取代了（更加简洁，数据转换更加容易）

1.3 Ajax的特点

1.3.1 Ajax的优点

（1）可以无刷新页面与服务器端进行通信

（2）允许你根据用户事件来更新部分页面内容

1.3.2 Ajax的缺点

（1）没有浏览历史，不能回退

（2）存在跨域问题（同源）

跨域：这个服务向另一个服务发送请求（不被允许）

（3）SEO不友好

SEO:搜索引擎优化

1.4 express框架

1.4.1 express框架安装与引用
安装
  1. 启动终端
  2. 输入命令 : npm init -y
  3. 输入命令：npm i express
express引用
//引入express

const express = require("express");

//创建服务器对象
const app = express();

//创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX');
});

//监听端口启动服务
app.listen(3000, () => {
    console.log('服务启动成功，端口监听中')
})

1.5 Ajax请求的基本操作

GET.html

<!DOCTYPE html>
<html lang="en">

<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>Ajax GET 请求</title>
    <style>
        #result {
            width: 200px;
            height: 200px;
            border: solid 1px #90b;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
</body>

<script>
    const btn = document.getElementsByTagName('button')[0];
    const result = document.getElementById('result');
    //绑定事件
    btn.onclick = function() {
        //1.创建对象
        const xhr = new XMLHttpRequest();
        //2.初始化   设置请求和方法
        xhr.open('Get', 'http://127.0.0.1:3000/server');
        //3.发送
        xhr.send();
        //4.事件绑定，处理服务端返回的结果
        //on:when 当..的时候
        //readystate:xhr对象属性，表示状态 0 1 2 3 4
        //change:改变,改变的时候触发
        xhr.onreadystatechange = function() {
            //判断(服务端返回了所有结果)
            if (xhr.readyState === 4) {
                //判断响应状态码
                if (xhr.status >= 200 && xhr.status < 300) {
                    //处理结果  行 头 空行 体
                    //1.响应行
                    console.log(xhr.status); //状态码
                    console.log(xhr.statusText); //状态字符串
                    console.log(xhr.getAllResponseHeaders); //所有响应头
                    console.log(xhr.response); //响应体

                    //设置result的文本
                    result.innerHTML = xhr.response;

                } else {

                }

            }

        };

    }
</script>

</html>

server.js

//引入express

const express = require("express");

//创建服务器对象
const app = express();

//创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX');
});

//监听端口启动服务
app.listen(3000, () => {
    console.log('服务启动成功，端口监听中')
})
1.5.1 Ajax设置请求参数

get请求：在url后面使用"?“分隔符后填写参数，若有多个参数则使用”&"字符，格式为:参数名 = 参数值

post请求：请求体是写在send()方法里

1.5.2 Ajax POST请求
1. POST代码案例

POST.html

<!DOCTYPE html>
<html lang="en">

<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>ajax post请求</title>
    <style>
        #result {
            height: 100px;
            width: 200px;
            border: solid 1px #903;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById('result');
        result.addEventListener('mouseover', function() {
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置类型与URL
            xhr.open('POST', 'http://127.0.0.1:3000/server');
            //设置请求头
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            //3.发送
            xhr.send('a=100&b=200&c=300');
            //4.事件绑定
            xhr.onreadystatechange = function() {
                //判断
                if (xhr.readyState === 4) {
                    //判断响应状态码
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //处理服务器端返回的结果
                        result.innerHTML = xhr.response;

                    } else {
                    }
                }
            }
        })
    </script>

</body>

</html>

server.js

//引入express

const express = require("express");

//创建服务器对象
const app = express();

//创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX');
});

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

//监听端口启动服务
app.listen(3000, () => {
    console.log('服务启动成功，端口监听中')
})
设置请求头信息

调用方法xhr.setRequestHeader('参数','参数'); //第一个参数是头的名字,第二个参数是头的值

接收任意类型的请求app.all('',function(){});

1.5.3 Ajax服务端响应json数据

以下是示例代码以及注解

JSON.html

<!DOCTYPE html>
<html lang="en">

<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>JOSN响应</title>
    <style>
        #result {
            height: 100px;
            width: 200px;
            border: solid 1px #903;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById('result');
        window.onkeydown = function() {
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //设置响应体数据类型
            xhr.responseType = 'json';
            //2. 初始化 设置类型与URL
            xhr.open('GET', 'http://127.0.0.1:3000/json_server');
            //3.发送
            xhr.send();
            //4.事件绑定
            xhr.onreadystatechange = function() {
                //判断
                if (xhr.readyState === 4) {
                    //判断响应状态码
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //处理服务器端返回的结果
                        // console.log(xhr.response);
                        // result.innerHTML = xhr.response;
                        //手动对数据进行转换,转换为对象
                        // let data = JSON.parse(xhr.response);
                        // console.log(data);
                        console.log(xhr.response);
                        result.innerHTML = xhr.response.name;

                        //自动换行
                        // result.innerHTML = data.name;

                    } else {}
                }
            }
        }
    </script>

</body>

</html>

server.js

//引入express
const express = require("express");

//创建服务器对象
const app = express();

//创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX');
});

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

app.all('/json_server', (request, response) => {
    //设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应一个数据
    const data = {
        name: 'nigger'
    };
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    //设置响应体
    response.send(str); //send()方法里只能接收字符串或buffer
});

//监听端口启动服务
app.listen(3000, () => {
    console.log('服务启动成功，端口监听中.....')
})
1.5.4 IE缓存问题

IE缓存问题解决办法

xhr.open('Get', 'http://127.0.0.1:3000/ie?t='+Date.now());//ie缓存解决方法
1.5.5超时与网络异常

以下是代码以及相关注释

超时与网络异常.html

<!DOCTYPE html>
<html lang="en">

<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>超时与网络异常</title>
    <style>
        #result {
            width: 200px;
            height: 200px;
            border: solid 1px #90b;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('result');

        btn.addEventListener('click', function() {
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //超时设置2s设置
            xhr.timeout = 2000;
            //超时回调
            xhr.ontimeout = function() {
                alert('网络异常，请重试');
            }
            xhr.onerror = function() {
                    alert('你的网络出现问题');
                }
                //2.初始化   设置请求和方法
            xhr.open('Get', 'http://127.0.0.1:3000/delay');
            xhr.send();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        result.innerText = xhr.response;
                    }
                }
            }
        })
    </script>

</body>

</html>

server.js

//引入express
const express = require("express");

//创建服务器对象
const app = express();

//创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX');
});
//针对IE缓存
app.get('/ie', (request, response) => {
    //设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO ie');
});
//延时响应
app.get('/delay', (request, response) => {
    //设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置定时器,三秒后再将响应返回给客户端
    setTimeout(() => {
        //设置响应体
        response.send('HELLO ');
    }, 3000)
})

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

app.all('/json_server', (request, response) => {
    //设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应一个数据
    const data = {
        name: 'nigger'
    };
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    //设置响应体
    response.send(str); //send()方法里只能接收字符串或buffer
});

//监听端口启动服务
app.listen(3000, () => {
    console.log('服务启动成功，端口监听中.....')
})
1.5.6 取消请求

借助abort()方法取消请求，abort()属于Ajax对象

 <body>
    <button>发送请求</button>
    <button>取消请求</button>
    <script>
        const bt1 = document.getElementsByTagName('button')[0];
        const bt2 = document.getElementsByTagName('button')[1];
        let x = null;

        bt1.onclick = function() {

            x = new XMLHttpRequest();
            x.open('Get', 'http://127.0.0.1:3000/delay');
            x.send();

        }

        //借助abort()方法取消请求，abort()属于Ajax对象
        bt2.onclick = function() {
            x.abort();
        }
    </script>
</body>
1.5.7 Ajax重复发送请求问题

以下是相关代码以及解决方案

重复请求问题.html

<!DOCTYPE html>
<html lang="en">

<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>重复请求问题</title>

</head>

<body>
    <button>发送请求</button>
    <button>取消请求</button>
    <script>
        const bt1 = document.getElementsByTagName('button')[0];

        let x = null;
        //标示变量
        let isSending = false; //是否正在发送Ajax请求

        bt1.onclick = function() {
            //判断表示变量
            if (isSending) x.abort(); //如果正在发送，则取消上一个请求发送新的请求
            x = new XMLHttpRequest();
            //修改标示变量的值
            isSending = true;
            x.open('Get', 'http://127.0.0.1:3000/delay');
            x.send();
            x.onreadystatechange = function() {
                if (x.readyState === 4) {
                    isSending = false;
                }
            }

        }
    </script>
</body>

</html>
前端小将_Lue
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax | 前端 | 课程笔记
qq_42376600的博客
11-27 346
Ajax axios fetch jQuery CORS
【前端学习之路】Ajax 加强阶段 （黑马课程笔记）
a123456_9的博客
09-14 302
XMLHttpRequest （简称xhr）是浏览器提供的Javascript对象，通过它可以请求服务器上的数据资源，Ajax 函数就是基于 xhr 对象封装出来的。所以，xhr 对象也可以通过get\post函数请求服务器上的资源，不过相对麻烦一些xhr 对象的 readyState 属性查询字符串查询字符串是指在URL的末尾加上用于向服务器发送信息（数据）的字符串格式：将英文的?放在URL 的末尾，然后加上 参数=值 的键值对形式，若想传递多个参数，则用 & 符号分隔。URL 编码。
Ajax学习笔记
2401_84153079的博客
04-18 944
XMLHttpRequest()：创建 XHR 对象的构造函数status：响应状态码值，如 200、404statusText：响应状态文本，如 ’ok‘、‘not found’readyState：标识请求状态的只读属性 0-1-2-3-4onreadystatechange：绑定 readyState 改变的监听responseType：指定响应数据类型，如果是 ‘json’，得到响应后自动解析响应response：响应体数据，类型取决于 responseType 的指定。
AJAX笔记
m0_62422962的博客
07-11 949
本文主要介绍AJAX,包含以下内容：http协议，express框架，原生AJAX,jQuery-AJAX,Axios-AJAX,Fetch-AJAX,跨域问题（包含同源策略，JSONP，CORS）等
Ajax课程笔记
2301_77135626的博客
04-06 40
这里是Ajax知识分享，后面我会慢慢更新
JSON及AJAX超详细笔记
2301_78399805的博客
05-05 541
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数Java工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
AJAX-笔记（持续更新中）
weixin_57858263的博客
08-07 857
文章目录Day1 Ajax入门1.AJAX概念和axios的使用2. 认识URL3.URL的查询参数4.常用的请求方法和数据提交5.HTTP协议-报文6.接口文档7.form-serialize插件8.案例用户登录Day2 Ajax综合案bootstrap弹框图书管理图片上传更换背景个人信息设置Day3Day4 资料： 素材与资料都来自黑马程序员 思维导图 Day1 Ajax入门 1.AJAX概念和axios的使用 概念：AJAX是浏览器与服务器进行数据通信的技术 作用：浏览器和服务器之间通信，动态数据交
Ajax学习笔记，把面试官说懵了
m0_61549740的博客
04-21 636
XMLHttpRequest()：创建 XHR 对象的构造函数status：响应状态码值，如 200、404statusText：响应状态文本，如 ’ok‘、‘not found’readyState：标识请求状态的只读属性 0-1-2-3-4onreadystatechange：绑定 readyState 改变的监听responseType：指定响应数据类型，如果是 ‘json’，得到响应后自动解析响应response：响应体数据，类型取决于 responseType 的指定。
Ajax笔记
qq_46035115的博客
03-26 1338
文章目录一、Ajax简介1、XML简介2、Ajax的特点Ⅰ-AJAX 的优点Ⅱ-Ajax的缺点3、HTTP简介Ⅰ-请求报文Ⅱ-响应报文Ⅲ-Chrome网络控制台查看通信报文Ⅳ-http协议概述Ⅴ-http协议请求的常用方法Ⅵ-http协议状态码Ⅶ-Postman 增删改查4、安装nodemon自动重启工具二、原生Ajax〇-Ajax的使用Ⅰ-Get方式Ⅱ-json数据请求Ⅲ-Post方式Ⅳ-解决ie缓存问题Ⅴ-请求超时与网络异常Ⅵ-取消请求Ⅶ-重复请求问题三、常见三种Ajax请求方式1、jQuery发送AJ
java相关课程系列笔记_java相关课程系列笔记之十一ajax学习笔记(建议用wps打开).doc...
weixin_42169674的博客
02-25 110
java相关课程系列笔记之十一ajax学习笔记(建议用wps打开).doc AJAX学习笔记JAVA相关课程系列笔记之十一笔记内容说明AJAX(程祖红老师主讲，占笔记内容100)；0目录一、AJAX概述111什么是AJAX112AJAX对象如何获得AJAX对象113AJAX对象的属性214编程步骤215编码问题316AJAX的优点317缓存问题(IE浏览器)418案例简易注册(使用AJAX进行相关...
ajax源码笔记
09-27
提供的"AJax视频教程-源码笔记"可能包含详细讲解Ajax概念、实例和实践的视频课程，以及配套的源码笔记。通过学习这些资源，你可以更深入地理解Ajax，并具备实际开发中的应用能力。 总结，Ajax 是构建动态网页的关键...
动力节点老杜Ajax教程配套学习笔记分享
07-24
课程主要涵盖内容： ajax底层实现原理剖析、 ajax跨域，手写jquery库、 ajax省市联动、 ajax实现搜索联想、 ajax改造oa项目等，课程在理论层面非常深入，使用大量实战案例来进行驱动，能够让大家在欢快愉悦的环境...
Java相关课程系列笔记
02-19
Java相关课程系列笔记之十一Ajax学习笔记（建议用WPS打开） Java相关课程系列笔记之四JDBC学习笔记（建议用WPS打开） Java相关课程系列笔记之五XML学习笔记（建议用WPS打开） Java相关课程系列笔记之一Java学习笔记...
Java相关课程系列笔记之十一Ajax学习
05-21
在本篇Java相关课程系列笔记之十一中，我们聚焦于Ajax的学习，这是一项在Web开发中广泛使用的技术，用于创建动态、无刷新的用户界面。Ajax全称Asynchronous JavaScript and XML，即异步JavaScript和XML，它允许网页...
快速入门了解Ajax
音符犹如代码的博客
07-25 684
上面是一个原生的Ajax的一个写法，但是原生的Ajax太繁琐甚至还有浏览器不兼容的问题，所以现在都是基于原生的Ajax的Axios。意义：AJAX（Asynchronous JavaScript and XML）即异步 JavaScript 和 XML。介绍：Axios是简化的Ajax，对传统的Ajax操作的简化和改进，也是一个更强大和便捷的http请求处理的工具。下边是两个来自官网的post的请求和get请求的代码。
Vue.js 与 Ajax（vue-resource）的集成应用
lly202406的博客
07-25 461
Vue.js 是一款流行的前端JavaScript框架，以其简洁、灵活和高效的特点而受到开发者的喜爱。在实际开发中，与后端服务的通信是不可或缺的，而Ajax技术是实现这一功能的关键。在Vue.js中，是一个常用的插件，它提供了一种简单的方式来执行Ajax请求。本文将详细介绍Vue.js与Ajax（通过vue-resource）的集成应用，包括安装、基本使用、进阶技巧以及实际开发中的最佳实践。
【React 】开发环境搭建详细指南
lph159的博客
07-24 1166
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 166
【代码】vue el-select的下拉树形结构。
达内Java全课程笔记：Unix到Ejb，涵盖SSH整合与模式
6. **Ajax（Asynchronous JavaScript and XML）**： - 引入异步数据传输，提升用户体验。 7. **Spring框架**： - Spring的IoC（Inversion of Control，控制反转）和AOP（Aspect-Oriented Programming，面向切面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值