Ajax的使用，axios发送ajax请求，jquery发送ajax请求

最新推荐文章于 2023-07-22 22:15:09 发布
最新推荐文章于 2023-07-22 22:15:09 发布
阅读量284 收藏
点赞数
文章标签： ajax jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58813731/article/details/128504676
版权

Ajax的使用，axios发送ajax请求，jquery发送ajax请求

AJAX 简介

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。
通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。
AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

XML 简介

XML 可扩展标记语言。
XML 被设计用来传输和存储数据。
XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，
全都是自定义标签，用来表示一些数据。

比如说我有一个学生数据：

name = "孙悟空" ; age = 18 ; gender = "男" ;

用 XML 表示：

<student>

<name>孙悟空</name>

<age>18</age>

<gender>男</gender>

</student>
用 JSON 表示：
{"name":"孙悟空","age":18,"gender":"男"}

现在已经被 JSON 取代了

AJAX 的特点

AJAX 的优点

  • 可以无需刷新页面而与服务器端进行通信。
  • 允许你根据用户事件来更新部分页面内容。

AJAX 的缺点

  • 没有浏览历史，不能回退
  • 存在跨域问题(同源)
  • SEO 不友好

HTTP协议

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

AJAX 的使用

AJAX 的优点

  • 可以无需刷新页面而与服务器端进行通信。
  • 允许你根据用户事件来更新部分页面内容。

1.3.2 AJAX 的缺点

  • 没有浏览历史，不能回退
  • 存在跨域问题(同源)
  • SEO 不友好

1.4 AJAX 的使用

1.核心对象
XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的。

2.使用步骤

  • 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
  • 设置请求信息
xhr.open(method, url);

//可以设置请求头，一般不设置

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  • 发送请求
xhr.send(body)  //get 请求不传 body 参数，只有 post 请求使用
  • 接收响应
//xhr.responseXML 接收 xml 格式的响应数据

//xhr.responseText 接收文本格式的响应数据

xhr.onreadystatechange = function (){ if(xhr.readyState == 4 && xhr.status == 200){ var text = xhr.responseText; console.log(text);
}}

Express框架的使用

下载Express npm i espress； 前提是下载了node.js

PS D:\study> npm init --yes//初始化npm
Wrote to D:\study\package.json:

{
  "name": "study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

added 50 packages, and audited 51 packages in 8s

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
npm notice
npm notice New minor version of npm available! 8.1.2 -> 8.4.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.4.0
npm notice Run npm install -g npm@8.4.0 to update!
npm notice
PS D:\study>

基本使用

//1.引入express
const express =require('express');
//2创建应用对象
const app = express();
//3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/',(request,response)=>{
    //设置响应
    response.send('hello word');
});
//4.监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已启动， 8000端口监听中");
})

Ajax 基本请操作

先搭建一个服务器

//1.引入express
const { response } = require('express');
const express = require('express');
const { request } = require('http');
//2创建应用对象
const app = express();
//3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应头 允许跨域  注意字不要写错
    // response.setHeader('Access-Control-Allow-Orign', '*');
    response.setHeader('Access-Control-Allow-Origin','*')

    //设置响应体
    response.send('hello AJAX');
});
//4.监听端口启动服务
app.listen(8000, () => {
    console.log("服务已启动， 8000端口监听中");
})

后在做前后端交互

<!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 CET 请求</title>
    <style>
        #result {
            width: 200px;
            height: 200px;
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        btn.onclick = function () {
            //创建对象
            const xhr = new XMLHttpRequest();
            //做初始化 设置请求的方法和url
            xhr.open('GET', 'http://localhost:8000/server');
            //发送请求
            xhr.send();
            //事件绑定 处理服务端返回的结果
            //readystate 是xhr对象中的属性 表示状态 为0 1 2 3 4 
            //change 改变
            xhr.onreadystatechange = function () {
                //判断（服务端返回的结果）
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //处理结果 包括 行 头 空行 体
                        //响应行
                        console.log(xhr.status);//状态码
                        console.log(xhr.statusText);//状态字符串
                        console.log(xhr.response);//响应体
                        console.log(xhr.getAllResponseHeaders());//所有响应头


                    }
                }
            }

        }
    </script>
</body>

</html>

Ajax设置请求参数操作（get）

只要在url后面机上加个？请求参数即可

‘http://localhost:8000/server?a=100&b=100’

查看
在这里插入图片描述

Ajax发送post请求

<!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>post 请求</title>
    <style>
        .result{
            width: 200px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="result"></div>
    <script>
        //获取元素对象
        const result=document.querySelector('.result');
        result.addEventListener('mouseover',function(){
            // console.log('text');
            //创建对象
            const xhr=new XMLHttpRequest();
            //初始化 设置类型与url
            xhr.open('POST','http://127.0.0.1:8000/server');
            //发送
            xhr.send();
            //事件绑定
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    if(xhr.status>=200&&xhr.status<300){
                        //处理服务端
                        result.innerHTML=xhr.response;
                    }
                }
            }
        })
    </script>
</body>
</html>

设置参数

//初始化 设置类型与url
            xhr.open('POST','http://127.0.0.1:8000/server');
            //发送
            xhr.send('a=100&b=100');
            //事件绑定

在这里插入图片描述

Ajax设置请求头信息

在open后面添加下面代码Content-type（预定义）设置请求体类型

xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');//固定写法

在这里插入图片描述
设置自定义请求头信息（name）自定义 需要去改服务器 all 因为浏览器会返回一个option请求所以改服务端改为all是为了接收任务请求（接受任何类型发送的请求）

xhr.setRequestHeader('name','lrq')

/response 是对响应报文的封装
app.all('/server', (request, response) => {
    //设置响应头 允许跨域
    // response.setHeader('Access-Control-Allow-Orign', '*');
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置响应头
    response.setHeader('Access-Control-Allow-Headers','*')//*
    //设置响应体
    response.send('hello AJAX-post');
});

Ajax服务端响应json数据

app.all('/json-server', (request, response) => {
    //设置响应头 允许跨域
    // response.setHeader('Access-Control-Allow-Orign', '*');
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置响应头
    response.setHeader('Access-Control-Allow-Headers','*')
    //设置响应体
    //响应一个数据 json数据
    const data={
        name: 'lrq'
    };
    //将对象转换成字符串
    let str= JSON.stringify(data);

    response.send(str);
});

<!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>Document</title>
    <style>
        .result{
            width: 200px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="result"></div>
    <script>
        const result=document.querySelector('.result')
        window.onkeydown=function(){
            // console.log('text');
            //发送请求
            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){
                        // result.innerHTML=xhr.response
                        // console.log(xhr.response);
                        //手动转换 json数据
                        // let data=JSON.parse(xhr.response);
                        // console.log(data);
                        console.log(xhr.response);
                        result.innerHTML=xhr.response.name
                    }
                }
            }
        }
    </script>
</body>
</html>

自动重启工具 nodemon

npm install -g nodemon 下载 nodemon

npx nodemon server.js 启动服务器

Ajax请求超时与网络异常处理

//超时设置
xhr.timeout=2000;
//超时回调
xhr.ontimeout=function(){
alert('网络异常')
}
//网络异常
xhr.onerror=function(){
alert('你的网络出现了问题')
}

Ajax取消请求

调用abort方法取消发送
x.abort();

<button>发送请求</button>
    <button>取消请求</button>
    <script>
        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();
        }
    </script>

在这里插入图片描述

Ajax请求重复发送问题

<button>发送请求</button>

    <script>
        const btns = document.querySelectorAll('button');
        let x = null;
        //加个标识变量
        let ispending = false; //判断是否正在发送Ajax请求
        btns[0].onclick = function () {
            //判断表示变量
            if(ispending){
                x.abort()//如果正在发送取消上次发送的请求 创建一个新请求
            }
//到这里就开始发送
            x = new XMLHttpRequest();
            //修改标识变量
            ispending = true;
            x.open('GET', 'http://127.0.0.1:8000/delay');
            x.send();
            x.onreadystatechange = function () {
                if (x.readyState == 4) {
                    ispending = false;
                }
            }
        }
        // //abort 取消发送
        // btns[1].onclick = function () {
        //     x.abort();
        // }
    </script>

在这里插入图片描述

jQuery发送Ajax请求

四个参数 ‘url‘，{ 请求参数}，回调函数 ，数据类型
在这里插入图片描述
data 相当于xhr.response
在这里插入图片描述
在这里插入图片描述
通用ajax发送请求

在这里插入图片描述
在这里插入图片描述

axios发送请求

<script src="[https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js]"></script> 引入即可

<!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>Document</title>
    <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>
    <script>
        const btns = document.querySelectorAll('button');
        btns[0].onclick = function () {
            //get 请求
            axios.get('http://127.0.0.1:8000/axios-server', {
                //url 参数
                params: {
                    id: 100,
                    vip: 7
                },
                //请求头信息
                headers: {
                    name: 'lrq'
                }
            }).then(value => {
                console.log(value);
            })
        }
        btns[1].onclick = function () {
            axios.post('http://127.0.0.1:8000/axios-server',
							//请求体
                {
                    username: 'admin',
                    password: '123'
                }, {
                //url
                params: {
                    id: 200,
                    vip: 3
                },
                //请求头
                headers: {
                    height: 100,
                    weight: 100
                }
            })
        }
        btns[2].onclick=function(){
            axios({
                //请求方法
                method:'post',
                //url
                url:'http://127.0.0.1:8000/axios-server',
                //url 参数
                params:{
                    id:20,
                    name:'lrq'
                },
                //头信息
                headers:{
                    a:100,
                    b:100
                },
                //请求体
                data:{
                    usernamee:'lrq',
                    password:1234
                }
            })
        }
    </script>
</body>

</html>

在这里插入图片描述

fetch函数发送Ajax请求

<!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>Document</title>
</head>

<body>
    <button>ajax 请求</button>
    <script>
        const btn = document.querySelector('button');
        btn.onclick = function () {
            fetch('http://127.0.0.1:8000/fetch-server',{
                //请求方法
                method:'POST',
                //请求头
                headers:{
                    name:'lrq'
                },
                //请求体
                body:'username=lrq&password=123'

            }).then(response =>{
                // return response.json();//返回的是json数据
                return response.text()//返回的是字符串
            }).then(response =>{
                console.log(response);
            })
        }
    </script>
</body>

</html>

在这里插入图片描述

跨域

CORS 标准

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

  • CORS 是什么？

CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方

案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源

  • CORS 怎么工作的？

CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

app.all('/cors-server', (request, response) => {
    //设置响应头 允许跨域
    // response.setHeader('Access-Control-Allow-Orign', '*');
    response.setHeader('Access-Control-Allow-Origin', '*')
    response.setHeader('Access-Control-Allow-Headers', '*')
    response.setHeader('Access-Control-Allow-Method', '*')

    //设置响应体
    response.send('hello cors')
});
奋斗的小泉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
AJAX —— 原生 AJAX / jQuery 发送 AJAX / axios 发送 AJAX / fetch 发送 AJAX
imByte的博客
11-13 1407
参考 「一」原生 AJAX 1. AJAX 简介 AJAX，即 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而 不用刷新整个网页。 后来，AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词，也就是说，只要用脚本发起通信，就可以叫做 AJAX 通信。 AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 具体来说，AJ.
JavaScript 使用axios工具包发送Ajax请求
路宇的博客
01-04 1314
使用axios工具包，三种方法 get请求 post请求 使用axios函数发送ajax请求 <!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-
axios发送AJAX请求
m0_51144154的博客
11-23 320
crossorigin = “anonymous” : 跨源请求属性设置，（annonymous:匿名）加了这个属性之后向被加的那个资源发送请求时当不会携带当前域名下的cookie npm 被全球超过1100完开发人
Ajax axios——前后端数据交互
我的的博客哦
05-22 552
🔰AJax 就是JS和服务端交互的手段🔰Ajax 是浏览器提供的一套方法，，提高用户浏览网站应用的体验。ajax 全名 async javascript and XML(异步JavaScript和XML)是也就是我们AJAX，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术，。是⼀个执⾏机制的功能,AJAX分为同步（async = false）和异步（async = true）
【Ajax】如何通过axios发起Ajax请求
m0_62360527的博客
11-14 9624
Axios是专注于网络数据请求的库，相比于原生的XMLHttpRequest对象，axios简单易用。相比于Jquery，axios更加轻量化，只专注于网络数据请求。
对异步请求xhr、ajax、axios、fetch的区别比较
01-08
总结来说，xhr是最基础的异步请求方式，jQuery的$.ajax简化了使用，axios提供了Promise支持，适合现代项目，而fetch则提供了一种更现代、简洁的API。选择哪种方式取决于项目需求、浏览器兼容性和开发团队的技术栈。
前端与后端连接，Ajax，axios，jquery等练习
07-18
在JavaScript中，你可以创建XMLHttpRequest对象实例，然后通过open()方法设置请求类型（GET或POST）、URL以及是否异步执行，接着使用send()方法发送请求。当服务器响应时，onreadystatechange事件会被触发，通过...
Javascript发送AJAX请求实例代码
11-29
然而，现在的前端开发中，更多的开发者倾向于使用jQuery、axios、fetch这样的库或API，它们提供了更强大、更易用的功能和更好的错误处理机制。例如，fetch API提供了Promise接口，使得异步编程更加优雅。 总结起来...
axios进阶实践之利用最优雅的方式写ajax请求
10-18
在现代前端开发中，`axios` 是一个广泛使用的 JavaScript 库，用于发起 AJAX 请求，尤其在 Vue.js 生态系统中。本篇文章将深入探讨如何利用 `axios` 进行更优雅、更高效的 AJAX 请求实践。 首先，我们了解 `axios` ...
ajax、axios、fetch区别
01-03
ajax、axios、fetch区别 ajax $.ajax({ type: 'POST', url: url, data: data, ...JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务） axios axi
ajax模拟post登录,03-发送 POST 请求（模拟用户登录操作）
weixin_33940733的博客
08-06 381
# 发送 POST 请求(模拟用户登录操作)需求：模拟用户登录操作。* 编写页面：~~~~~~* 编写 AJAX 代码：* ## 注意加上~~~ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');~~~~~~window.onload = function(){var loginEle = docum...
对比jQuery与vue+axios，两者发送ajax请求的方法和不同
Koorye今天自学了吗
05-07 1018
文章目录post请求准备控制器准备html实现ajax请求vue+axios版ajaxjQuery版ajax发送参数的不同接收参数的不同get请求get和post的差别jQuery与axios的data在发送get请求时的不同axios的get请求方式总结 axios和jQuery的ajax本质上都是对原生XHR的封装，不过axios符合最新的ES规范。因此，在用vue编写js时，使用axios而...
简单易懂：Ajax入门实例详解（登录功能）
大三软件工程在读，喜爱编程，分享。
05-22 3944
Ajax（Asynchronous JavaScript and XML）是一种基于Web技术的编程实现方式，它使用JavaScript和XML来实现异步的数据交互。JavaScript负责发起请求和处理响应，而XML则负责将数据与页面分离。Ajax能够在不刷新整个页面的情况下更新页面内容，提高了页面的响应速度和用户体验。
发送Ajax的几种方式
xinxin7789的博客
01-05 601
发送Ajax的几种方式
数据请求axios，Ajax，jQuery ajax，axios和fetch的区别
weixin_40381947的博客
06-25 628
Axios 在功能上比 Ajax 和 jQuery Ajax 更强大，而 Fetch 则是一个较新、更先进的 API，但它也存在一些问题。选择适合自己需求的工具，可以提高代码编写效率和减少出错风险。
在 Web 程序中发送 Ajax 请求
在人间负债^
04-19 2365
在 Web 程序中发送 Ajax 请求AjaxXMLJSONjQuery Ajax Ajax = Asynchronous JavaScript and XML 异步 JavaScript 和 XML 可用于实现异步通信的技术 AJAX 而是一种使用现有标准的技术 AJAX 是基于 JavaScript和XML技术的 AJAX 通过在后台与服务器进行少量数据交换，实现网页的异步更新，就是在不重新加载整个页面的情况下实现更新页面的部分内容 也就是实现页面的局部刷新 XML XML = Extensibl
axios的特点以及与jquery的不同之处
C05230的博客
10-09 761
特点及区别： 1.axios是一个专一的异步请求框架，用于封装底层的XMLHttpRequest，类似于之前ajax，而 jquery:只是顺便封装了dom操作 2.axios是基于承诺对象(promise)的，也就是可以使用承诺对象中的方法（then，catch，finally） 每次发送axios请求，返回值为promise对象 axios().then() axios.all() jquery不基于承诺对象 3.axios对响应数据进行了二次封装 $.ajax({ url:''
ajax怎么模拟请求,如何模拟AJAX请求？
weixin_32661831的博客
08-05 645
在端到端测试期间修改scenarios.js以模拟AJAX请求的最简单方法是什么？如何模拟AJAX请求？My Test AngularJS Appangular.module('myApp', ['ngResource']);function PlayerController($scope,$resource){$scope.player = $resource('player.json').ge...
Ajax向服务器发起POST请求实现用户登录功能
最新发布
Forever_Hopeful的博客
07-22 191
Ajax向服务器发起POST请求实现用户登录功能实现前后端数据交互
使用Ajax进行异步请求：XMLHttpRequest详解
"本课程内容主要讲解如何使用Ajax发送异步请求，并深入解析XMLHttpRequest对象。Ajax技术允许我们在不刷新整个页面的情况下与服务器...在实际项目中，还可以结合jQuery、axios等库简化Ajax操作，进一步提高开发效率。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值