AJAX归纳

最新推荐文章于 2025-05-10 23:42:31 发布
最新推荐文章于 2025-05-10 23:42:31 发布
阅读量119 收藏
点赞数
分类专栏： 前端知识 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_49075665/article/details/119539777
版权

AJAX 简介：

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

AJAX 的特点

  • AJAX 的优点

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

  • AJAX 的缺点

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

AJAX案例

index.html

<button>点击发送请求</button>
<div id="result"></div>
<script src="./index.js"></script>  //注意，此处放后

index.css

#result {
    width: 200px;
    height: 100px;
    border: solid 2px blue;
}

AJAX发送GET请求

index.js

const btn = document.getElementsByTagName('button')[0];
btn.onclick = function () {
    //1.创建对象
    const xhr = new XMLHttpRequest()
    //2.初始化，设置请求方法和url    get请求参数直接放这
    xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200')
    //3.发送
    xhr.send()
    //4.时间绑定，处理服务器返回的结果
    // on  when 当....时候
    // readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
    /*
    0 (未初始化)： (XMLHttpRequest)对象已经创建，但还没有调用open()方法。
	1 (载入)：已经调用open() 方法，但尚未发送请求。
	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;
            }
        }
    }
}

server.js 设置服务器：需安装express

/*
npm init 
npm i express
node express 启动服务器
*/

//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 Express')
})

//4.监听端口启动服务
app.listen(8000, () => {
    console.log('服务器已启动')
})

启动方法：

  1. 终端 node server.js
  2. 开启index.html

AJAX发送POST请求

index.js

//获取元素对象
const result = document.getElementById('result')

//绑定事件
result.addEventListener('mouseover', function () {
    //1.创建对象
    const xhr = new XMLHttpRequest()
    //2.初始化 设置请求方法和url
    xhr.open('POST', 'http://127.0.0.1:8000/server')
    //3.发送
    xhr.send()
    // 有参数
    // xhr.send('a=100&b=200&c=200')

    //4.事件绑定
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                result.innerHTML = xhr.response
            }
        }
    }
})

server.js 中增加此处

app.post('/server', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin', '*')
    //设置响应体
    response.send('Hello Express POST')
})

POST中如何设置请求头信息

index.js — setRequestHeader

//获取元素对象
const result = document.getElementById('result')

//绑定事件
result.addEventListener('mouseover', function () {
    //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')
    //自定义
    xhr.setRequestHeader('name', 'hfdsa')


    //3.发送
    xhr.send()
    // 有参数
    // xhr.send('a=100&b=200&c=200')

    //4.事件绑定
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                result.innerHTML = xhr.response
            }
        }
    }
})

server.js

//可以接受任意类型的请求
app.all('/json-server', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin', '*')
    //设置响应头 -- 增加此处，允许自定义请求头信息
    response.setHeader('Access-Control-Allow-Headers', '*')
    //设置响应体
    response.send('Hello Express JSON')
})

处理JSON格式数据

index.js

const result = document.getElementById('result')
//绑定键盘按下事件
window.onkeydown = function () {
    //创建对象
    const xhr = new XMLHttpRequest();

    //设置自动转换数据时，这里设置响应体数据类型
    xhr.responseType = 'json'
    //初始化
    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) {
                // console.log(xhr.response);
                // result.innerHTML = xhr.response 

                //1.手动对数据进行转换
                // let data = JSON.parse(xhr.response)
                // result.innerHTML = data.nam

                //2.自动转换
                result.innerHTML = xhr.response.nam
            }

        }
    }
}

server.js

/*
npm init 
npm i express
node express 启动服务器
*/

//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 Express')
})

//post请求的对应  app.post
//可以结束任意类型的请求
app.all('/json-server', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin', '*')
    //设置响应头
    response.setHeader('Access-Control-Allow-Headers', '*')

    const data = {
        nam: 'hdhun'
    }
    //对数据格式化
    let str = JSON.stringify(data)
    //设置响应体
    response.send(str)
})

//4.监听端口启动服务
app.listen(8000, () => {
    console.log('服务器已启动')
})

请求超时和网络异常处理

index.js

const btn = document.getElementsByTagName('button')[0]
const result = document.getElementById('result')
//绑定键盘按下事件
btn.onclick = function () {
    //创建对象
    const xhr = new XMLHttpRequest();

    //超时设置
    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
            }

        }
    }
}

server.js

/*
npm init 
npm i express
node express 启动服务器
*/

//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 Express -2')
})

//post请求的对应  app.post
//可以结束任意类型的请求
app.all('/json-server', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin', '*')
    //设置响应头
    response.setHeader('Access-Control-Allow-Headers', '*')

    const data = {
        nam: 'hewan'
    }
    //对数据格式化
    let str = JSON.stringify(data)
    //设置响应体
    response.send(str)
})

//get请求的对应
app.get('/delay', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin', '*')

    setTimeout(() => {
        response.send('延时响应')
    }, 3000)
})

//4.监听端口启动服务
app.listen(8000, () => {
    console.log('服务器已启动')
})

取消请求

index.html

<button>点击发送请求</button>
<button>点击取消请求</button>
<script src='./js/index.js'></script>

index.js

const btns = document.querySelectorAll('button')
let xhr = null

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

btns[1].onclick = function () {
    xhr.abort()
}

server.js

/*
npm init 
npm i express
node express 启动服务器
*/

//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 Express -2')
})

//get请求的对应
app.get('/delay', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin', '*')

    setTimeout(() => {
        response.send('延时响应')
    }, 3000)
})

//4.监听端口启动服务
app.listen(8000, () => {
    console.log('服务器已启动')
})

重复请求

发送多个相同请求，服务器压力大
在发送请求时，判断之前是否也有请求在发送，如果有，取消前一个

index.js

const btns = document.querySelectorAll('button')
let xhr = null
let isSending = false  //标识变量：是否在发送AJAX请求

btns[0].onclick = function () {
    //如果正在发送请求，取消该请求
    if (isSending) xhr.abort()

    //创建新对象
    xhr = new XMLHttpRequest();

    //即将要发送请求，isSending改变
    isSending = true

    xhr.open('GET', 'http://127.0.0.1:8000/delay')
    xhr.send()
    xhr.onreadystatechange = function () {
        if (xhr.readyStste === 4) {
            //请求成功了并完成了，修改isSending的值
            isSending = false
        }
    }
}

btns[1].onclick = function () {
    xhr.abort()
}

Axios发送AJAX请求

index.html

<button>GET</button>
<button>POST</button>
<button>AJAX</button>

index.js

const btns = document.querySelectorAll('button')

btns[0].onclick = function () {
    axios.get('http://127.0.0.1:8000/axios-server', {
        //url 参数
        params: {
            id: 100,
            vip: 7
        },
        //请求头信息
        headers: {
            name: '夜夜夜',
            age: 20
        }
    }).then((value) => {
        console.log(value);
    })
}

btns[1].onclick = function () {
    //url data config
    axios.post('http://127.0.0.1:8000/axios-server',
        {
            username: 'yeye',
            password: '123456'
        },
        {
            params: {
                id: 200,
                vip: 9
            },
            //请求头信息
            headers: {
                height: 183,
                weight: 180
            }
        }
    )
}

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

server.js

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

fetch发送AJAX请求

index.html

<button>AJAX</button>

index.js

const btn = document.querySelector('button')

btn.onclick = function () {
    fetch('http://127.0.0.1:8000/fetch-server', {
        //请求方法
        method: 'POST',
        //请求头
        header: {
            name: '夜夜夜',
        },
        //请求体
        body: 'username=yeyeye&password=123456',
    }).then(response => {
        return response.json();
    }).then(response => {
        console.log(response);
    })
}

sever.js

//fetch服务
app.all('/fetch-server', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*')
    response.setHeader('Access-Control-Allow-Headers', '*')
    const data = { nam: 'hhisn' }
    response.send(JSON.stringify(data))
})

跨域

原生JSONP

index.html

用户名：<input type="text" id="username">
<p></p>
<script src='./js/index.js'></script>

index.js

const input = document.getElementsByTagName('input')[0]
const p = document.getElementsByTagName('p')[0]

function handle(data) {
    input.style.border = 'solid 2px green';
    p.innerHTML = data.mes
}

input.onblur = function () {
    //获取input用户名
    let username = this.value;

    //向服务器发送请求，检测账号是否存在
    //1.创建一个script标签，进行跨域访问
    const script = document.createElement('script')
    //2.标签的script的src
    script.src = 'http://127.0.0.1:8000/check-username'
    //将script插入html
    document.body.appendChild(script)
}

server.js

//check-username服务
app.all('/check-username', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*')
    response.setHeader('Access-Control-Allow-Headers', '*')
    const data = { exist: 1, mes: '该账号已经存在' }
    let str = JSON.stringify(data)
    response.end(`handle(${str})`)
})

CORS

MDN：HTTP访问控制

server.js中

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');
});
史上最全面的Ajax知识点归纳总结
07-02
史上最全面的Ajax知识点归纳总结
AJAX异步处理[归纳].pdf
10-19
AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新，极大地提升了用户体验。AJAX 不是一种单一的...
AJAX总结笔记
weixin_63050915的博客
07-17 742
AJAX总结
AJAX学习
m0_61894608的博客
03-26 88
自学ajax
AJAX笔记（完结版）
sokoooo的博客
01-10 1414
一、XML 1. XML（可扩展标记语言）：被设计用来传输和存储数据； 2. XML：支持自定义标签，无预定义标签。 3. HTML和XML的区别 1）HTML：超文本标记语言，用于显示数据，不区分大小写； XML：可扩展标记语言，用于传输数据，区分大小写； 2）HTML：预定义标记； XML：自定义标记。 二、AJAX特点 1. 优点： 1）可以直接与服务器端进行通信，而不需要刷新页面； 2）允许根据用户事件来更新部分内容页面； 2. 缺点： 1）没有...
原生ajax响应json数据
sharesb的博客
04-16 1098
JSON.stringify(data) 将data 转换为json格式 如果data 是 数组格式 则转换之后为[1,12,3] 如果data是 一个类 则转换之后为 {"name":"hxyt"} app.all('/json-server',(request,response)=>{ response.setHeader('Access-Control-Allow-Origin','*'); // 接受所有请求的头信息 response.setH...
JSON和Ajax归纳
weixin_40695328的博客
04-28 229
** json的定义 ** json是由花括号组成，然后里面都是键值对。 并且每个键都由引号引起来。键和值之间使用冒号进行分隔。那么每组键值对之间使用逗号分隔。 var json = { “key” : value , “key2” : value2 }; 值可以是string,number,数组类型,json对象。json数组。 var jsonObj = { "key1" : 12,...
jQuery之ajax归纳
码农的田园
05-07 451
1.jQuery的$.post方法 $.post() 方法通过 HTTP POST 请求从服务器上请求数据。 $.post(url, data, success(data, textStatus,jqXHR), dataType); 参数 描述 url 必需。规定把请求发送到哪个 URL。 data 可选。映射或字符串
ajax知识点总结
qiuyushuofeng的专栏
06-06 491
ajax知识点总结
ajax学习归纳
独孤欢颜的博客
09-30 125
XMLHttpRequest 对象 XMLHttpRequest 对象用于在后台与服务器交换数据 创建 XMLHttpRequest 对象的语法： var xhr = new XMLHttpRequest();
Ajax总结
2401_82353459的博客
12-27 1303
Ajax（Asynchronous JavaScript and XML）技术在现代Web开发中扮演着至关重要的角色。它允许我们在不重新加载整个页面的情况下，与服务器交换数据和更新部分网页内容。一般我的第一版的思维导图都是从笔记中提炼出来的，不管怎么样现有一个开始，然后又逐渐根据358原则进行修改和整合，所以说第一版的是比较多的，因为纯粹是知识点的堆积，之后才是概括，
JQuery+ajax实现批量上传图片[归纳].pdf
10-11
在本文档中，我们探讨了如何使用jQuery和Ajax技术实现批量上传图片的功能。批量上传图片在许多Web应用程序中是一个常见的需求，例如社交媒体平台、博客系统或任何需要用户上传多张图片的界面。以下是对该文档内容的...
Ajax基础
最新发布
kuxiaoyang的博客
05-10 584
Ajax：一种不用刷新整个页面便可与服务器通讯的办法。特点为异步调用、局部刷新。 同步处理：1.用户向服务器发送一个请求时，在服务器响应之前，该用户不能进行任何操作，只能等待服务器响应。2.即使整个页面中只有一小部分内容发生改变，也要刷新整个页面 异步处理：1.用户发送请求时，通过AJAX向服务器发送请求，发送请求时，该用户可以进行任何操作。当服务器响应结束后，响应信息会直接发送到AJAX中，AJAX根据响应内容做处理。2.AJAX可以根据服务器的响应信息局部的修改页面，而不需要整个页面刷新
如何搭建spark yarn模式集群的集群
2401_83599586的博客
05-06 474
【代码】如何搭建spark yarn模式集群的集群。
基于MATLAB的电动汽车削峰填谷多目标充放电优化调度策略研究
05-10
内容概要：本文探讨了利用电动汽车参与电网削峰填谷的多目标优化调度策略。通过MATLAB平台，使用YALMIP工具箱和CPLEX求解器构建了一个精确的数学模型，旨在同时降低用户的综合成本、减少电网峰谷差并稳定负荷波动。文中详细介绍了目标函数的设计思路，包括各子目标的权重分配方法及其背后的考量因素；电池退化成本的计算方式；关键约束条件如SOC连续性和峰谷限制的具体实现；以及最终优化结果带来的显著效益。此外，还分享了一些实用技巧，比如如何选择合理的初始值以提高求解效率。 适合人群：电力系统研究人员、智能电网工程师、从事电动汽车相关工作的技术人员。 使用场景及目标：适用于需要解决电网负荷不均衡问题的研究机构或企业，特别是在推广新能源汽车过程中面临较大挑战的城市和地区。本研究的目标在于提供一种有效的解决方案，既能够保障车主利益最大化，又可以促进能源的有效利用和社会可持续发展。 其他说明：文中提供的完整代码和详细的说明文档有助于读者快速理解和应用该优化策略。未来还可以进一步探索加入更多变量（如天气预报、光伏发电量）的可能性，使模型更加完善。
实训商业源码-游戏扫码登录多功能工具箱集合微信小程序源码-毕业设计.zip
05-10
实训商业源码-游戏扫码登录多功能工具箱集合微信小程序源码-毕业设计.zip
COMSOL激光烧蚀技术：脉冲激光打孔包与动网格固体传热模块的应用解析
05-10
内容概要：本文详细介绍了COMSOL激光烧蚀脉冲激光打孔包及其在工业生产中的应用。首先阐述了激光打孔技术的优势，随后重点讲解了两个核心模块——动网格模块和固体传热模块的功能和作用。动网格模块用于模拟激光束在材料中的传播路径、烧蚀区域的形成及材料表面的热交换过程；固体传热模块则专注于模拟材料在激光烧蚀过程中的热传导特性，帮助优化工艺参数并提高加工效率。文中还列举了具体的案例分析，展示了该技术在金属材料加工中的广泛应用。最后讨论了技术的优势与面临的挑战，并对未来的发展进行了展望。 适合人群：从事材料加工、激光技术研究的专业人士，以及希望深入了解COMSOL软件应用的研究人员和工程师。 使用场景及目标：适用于需要进行高精度、高效率金属材料加工的企业和个人。通过学习和应用COMSOL激光烧蚀脉冲激光打孔包，可以优化工艺流程，提升产品质量和生产效率。 其他说明：尽管COMSOL提供了强大的建模和分析功能，但在实际操作中还需注意模型复杂度的控制和仿真结果的准确性验证等问题。
yudao ruoyi-pro 开源项目 crm 客户管理模块初始化sql
05-10
yudao ruoyi-pro 的 CRM 客户管理模块初始化 SQL 包含客户全生命周期管理核心表结构及基础数据，支持客户信息、商机、联系人及合同管理。资源涵盖客户表（crm_customer）、商机表（crm_business）、联系人表（crm_contact）、合同表（crm_contract），集成客户分群、跟进记录、公海池回收规则、合同审批流程等数据模型。内置示例客户数据、测试商机线索及合同模板，通过 crm_ 前缀表实现模块解耦。适配 Ruoyi 权限体系，提供角色-客户权限绑定、菜单路由初始化，支持客户分配流转、跟进时间线、销售漏斗分析及业绩统计功能，适用于企业销售管理、客户资源维护及跨部门协作场景快速搭建。
cJSON.c开源文件
05-10
cJSON.c开源文件
精通jQuery Ajax学习资料分享
jQuery的核心特性可以归纳为以下几点： 1. **选择器**：能够快速选取和操作DOM元素。 2. **事件处理**：简化了事件监听和触发的代码。 3. **动画效果**：提供丰富的方法实现页面元素的动画效果。 4. **AJAX**：简化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值