ajax基本操作

已于 2022-05-05 17:03:13 修改
阅读量653 收藏
点赞数
文章标签： 前端 ajax
于 2022-05-05 16:11:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48573538/article/details/124589150
版权

ajax基本操作

1、准备工作

  1. 初始化文件：npm init -y
  2. 安装express依赖：npm i express
  3. 配置后端路由
// express.js

// 引入express
const express = require('express')
// 创建实例
const app = express()
// 后端路由
app.get('/server-get', (request, response) => {
	// 跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    response.send('get 成功')
})
app.post('/server-post', (request, response) => {
	// 跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    response.send('post 成功')
})
// 监听
app.listen(8000, () => {
    console.log('8000端口启动...')
})

  1. 检测后端是否配置成功：nodemon express.js
    在这里插入图片描述
    在这里插入图片描述

  2. 配置前端页面并获取dom

<style>
	#result {
		width: 200px;
		height: 200px;
		border: 1px solid lightskyblue;
	}
</style>

<body>
    <div>
        <button>点击发送请求</button>
        <div id="result"></div>
    </div>
    <script>
        const result = documnet.getElementById('result')
        const btn = document.querySelectorAll('button')[0]
        btn.onclick = function () {
            console.log('发送成功')
        }
    </script>
</body>
  1. 检查前端是否配置成功
    在这里插入图片描述

2、get请求

通过点击 button 发送请求，所以我们的请求设置在 btn.onclick 的函数体中，post也同样，就不一一赘述。

btn.onclick = function () {
    // console.log('发送成功')
    // 创建实例
    const xml = new XMLHttpRequest()
    // 初始化实例
    xml.open('GET', 'http://127.0.0.1:8000/server-get', true)
    // 发送请求
    xml.send()
    // 拿数据
    xml.onreadystatechange = function () {
        if (xml.readyState === 4) {
            if (xml.status === 200 && xml.status < 300) {
                let data = xml.response
                result.innerHTML = data
            }
        }
    }
}

结果：
在这里插入图片描述

get传参

仅需在初始化的 url 中传入即可

xml.open('GET', 'http://127.0.0.1:8000/server-get?a=100&&b=200', true)

3、post请求

btn.onclick = function () {
    // console.log('发送成功')
    // 创建实例
    const xml = new XMLHttpRequest()
    // 初始化实例
    xml.open('POST', 'http://127.0.0.1:8000/server-post', true)
    // 发送请求
    xml.send()
    // 拿数据
    xml.onreadystatechange = function () {
        if (xml.readyState === 4) {
            if (xml.status === 200 && xml.status < 300) {
                let data = xml.response
                result.innerHTML = data
            }
        }
    }
}

结果：
在这里插入图片描述

post传参

与 get 不同，需要在发送请求的时候传入

xml.send('a=100&&b=200')

4、服务端响应json的两种方式

由于 response.send 只能接收 json 和 buffer
所以对于需要传输的数据，必须转化为这两种类型

我们这里以 get 和 json 为例

1. 手动转换

利用 JSON.stringfy() 与 JSON.parse()

后端：

app.get('/server-get', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*')
    let data = {
        name: 'iverson'
    }
    response.send(JSON.stringify(data))
    // response.send('get 成功')
})

前端：在onreadystatechange函数体中

xml.onreadystatechange = function () {
    if (xml.readyState === 4) {
        if (xml.status === 200 && xml.status < 300) {
            let data = xml.response
            result.innerHTML = JSON.parse(data).name
        }
    }
}

结果：
在这里插入图片描述

2. 自动转换

在创建 XMLHttpRequest 对象实例后，设置实例的响应体数据格式

前端：btn.onclick 函数体中：

// 创建实例
const xml = new XMLHttpRequest()
// 设置响应体数据格式
xml.responseType = 'json'

// 初始化实例
xml.open('GET', 'http://127.0.0.1:8000/server-get', true)
// 发送请求
xml.send()
// 拿数据
xml.onreadystatechange = function () {
    if (xml.readyState === 4) {
        if (xml.status === 200 && xml.status < 300) {
            let data = xml.response
            result.innerHTML = data.name
        }
    }
}

后端：

app.get('/server-get', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*')
    let data = {
        name: 'iverson'
    }
    response.send(data)
    // response.send('get 成功')
})

结果：
在这里插入图片描述

5、设置请求头

我们还是以 get 为例

  1. 内置请求头
    且设置请求头必须在初始化 xml 实例后，也就是 xml.open() 后，先要有实例才能调用里面的属性（可以这么理解，凡事都有一个先来后到吧）
    btn.onclick 函数体中：
// 初始化实例
xml.open('GET', 'http://127.0.0.1:8000/server-get', true)

// 设置请求头
xml.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

结果：
在这里插入图片描述

  1. 自定义请求头
    btn.onclick 函数体中：
// 初始化实例
xml.open('GET', 'http://127.0.0.1:8000/server-get', true)

// 也可以自定义请求头
xml.setRequestHeader('name', 'bryant')

但是这样会出错，因为服务器不允许，我们可以通过设置请求为all，以及设置响应头的相关属性，使之成为可能。

后端：

app.all('/server-get', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*')
    response.setHeader('Access-Control-Allow-Headers', '*')
    response.send('get 成功')
})

结果：
在这里插入图片描述

6、如何解决IE缓存问题

我们利用请求传参，Date now()，由于其为时间戳，每次都不同，那么浏览器就会认为每次请求都是不同的
这里以 get 为例

xml.open('GET', 'http://127.0.0.1:8000/server-get?time=' + Date.now(), true)
飞天小象吖
关注
Ajax相关操作(jQuery、axios)
brokyz
08-12 285
浏览器中提供的XMLHttpRequest 用法比较复杂，所以jQuery对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了Ajax的使用难度。$.get()$.post()$.ajax()Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。在客户端中axios使用XMLHttpRequestlai模块，在服务器端axios使用nodejs的原生http模块。表单在网页中主要负责数据采集功能。
Ajax的基本操作
qq_53152029的博客
06-19 394
一、使用Ajax与后端逻辑进行交互(get、post)使用Ajax通信可以使页面在不刷新的情况下向服务器发送请求，与服务器端通信，允许根据用户事件更新部分页面内容。 2. post . 3. server 接收请求的服务器 4.JSON的使用请求 服务器 5.解决重复请求问题 设置延迟响应的服务器端...
ajax的基础操作
qq_46516788的博客
11-05 407
ajax的基本操作
JQ Ajax 操作
chun312193的博客
04-29 1719
JQ Ajax 操作
ajax 常见操作
开心的哈士奇
10-17 132
开发十年，就只剩下这套Java开发体系了 &gt;&gt;&gt;    ...
Ajax操作
万彬学习的博客
10-30 329
jQuery AJAX 方法： $.ajax() 执行异步 AJAX 请求 $.ajaxPrefilter() 在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项 $.ajaxSetup() 为将来的 AJAX 请求设置默认值 $.ajaxTransport()
Ajax基本操作实例
09-27
**Ajax基本操作实例** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。它通过JavaScript实现局部刷新，极大地提升了用户体验。在这个实例中，...
14ajax课程_AJAX基础_
10-02
**AJAX基础详解** 在现代Web开发中，AJAX（Asynchronous JavaScript and XML）是一种核心技术，它使得网页能够实现异步数据交换，无需刷新整个页面即可更新部分内容。本教程将深入探讨AJAX的基础知识，帮助你理解其...
JQuery中Ajax的操作完整例子
10-20
本文主要介绍JQuery中Ajax操作的完整实例，包括JQuery中Ajax操作的基本概念和使用方法。同时，还涉及了Java软件开发中后台代码封装的框架、前台页面效果实现所用的JavaScript以及jQuery的优势，最后提出了处理大数据...
ajax及PHP操作数据库增删改查的基础应用实例.zip
03-27
"ajax及PHP操作数据库增删改查的基础应用实例.zip"是一个学习资源，旨在帮助初学者理解如何使用AJAX和PHP来实现数据库的增删改查操作。 首先，了解AJAX的基本工作原理是关键。它通过JavaScript创建XMLHttpRequest...
Ztree操作 AJAX
07-15
主要分为以下几个部分：Ztree的基本介绍、AJAX的基本概念、如何结合Ztree与AJAX进行数据交互、示例代码解析以及可能遇到的问题和解决方案。 ### Ztree简介 Ztree是一款基于jQuery的树插件，它提供了一种高效的方式...
Ajax的使用（一）
博客
07-31 271
前端代码 $.ajax({ url : "请求地址" type : "post", data: objs,//数据，这里使用的是Json格式进行传输 async : true, cache : false, dataType : "json", ...
ajax的基本操作
有时间就写写代码
09-18 241
js原生的ajax的操作 服务器代码: public class ServletAjax01 extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String ...
ajax 中一些常用的操作
weixin_30784501的博客
12-22 67
$.post、$.get是一些简单的方法，如果要处理复杂的逻辑，还是需要用到jQuery.ajax() 一、$.ajax的一般格式$.ajax({ type: 'POST', url: url , data: data , success: success , dataType: dataType}); 二、$.ajax的参数描述参数 描述url 必需。规定把请求...
AJAX操作详解
不争气争口馒头
10-06 278
1.ajax概念：包括JavaScript+xml+css这几门的综合，实现异步调用，局部刷新的效果。不是编程语言，而是为了更好的用户体验 2.在JavaScript中的xmlhttprequest对象非常重要，ajax的异步提交和数据返回的处理，都由此对象负责 3.ajax的工作流程: 1)        如果用JavaScript来实现ajax，则先创建xmlhttprequest对
ajax一些常用的基本操作
au55555的博客
06-02 344
// 请求的全局配置 $.ajaxSetup({ // 每次发起请求,携带csrf_token值 data:{csrfmiddlewaretoken:'{{ csrf_token }}'} }) // 发送get请求 $.get(url,function (data) { }) 发送post请求 // 1.请求地址 2.请求携带参数 ...
ajax的三种基本操作
Liu_wen_wen的博客
08-08 396
ajax的三种基本操作
ajax教程
最新发布
ning_xiao_xuan的博客
04-04 1782
ajax教程
掌握Ajax基础操作：文件上传详解
本文档主要介绍了Ajax学习的基础操作，特别是关于在JavaScript中实现文件上传的功能。Ajax（Asynchronous JavaScript and XML）是一种异步通信技术，它允许前端网页在无需刷新整个页面的情况下与服务器进行数据交换...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值