Ajax集合

已于 2022-11-12 11:43:04 修改
阅读量133 收藏
点赞数
文章标签： ajax javascript
于 2022-11-09 21:02:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67538972/article/details/127777862
版权
本文详细介绍了Ajax的工作原理，包括其与XML的关系、特点和优缺点。同时，通过实例展示了如何使用Express.js搭建服务器并实现Ajax请求。讨论了参数传递、IE缓存问题、超时与网络延迟的处理，以及请求的取消与重复发送问题。最后，对比了JQuery和fetch发送Ajax请求的方式。
摘要由CSDN通过智能技术生成

目录

Ajax

Ajax简介

ajax就是异步的js和xml，通过ajax可以在浏览器中向服务器发送异步请求

优势：无需刷新获取数据

XML简介

XML就是可扩展标记语言

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

XML和HTML不同：HTML中都是预定义标签，而XML中没有预定义标签，说不来就是HTML就是在浏览器上展示数据的，而XML是传输和储存数据的

现在已经被JSON取代了
附JSON介绍：JSON介绍

Ajax的特点

优点：

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

缺点：

  1. 没有浏览历史，不能回退
  2. 存在跨域问题
  3. SEO（搜索引擎优化）不友好
准备工作
  1. 打开终端

在这里插入图片描述

然后在终端打入 npm init --yes(做一个初始化)和 npm i express

注意：文件夹名要用英文，不然会报错

  1. 配置express.js文件
//1.引入express
const { response } = require('express');
const express = require('express');
//2.创建应用
const app = express();
//3.创建路由规则
app.get('/',(request,response)=>{
    response.send('hello');
});
//4.监听端口启动服务
app.listen(8080,()=>{
    console.log("已启动");
})
/*
回顾=>
========================
(x)=>x+6相当于：
function(x){
    return x+6;
}
*/
  1. 测试express.js文件

在终端中打入 node 你express.js文件的路径

在这里插入图片描述

在这里插入图片描述

准备HTML/server.js
<!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>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>

<body>
<input type="button" class="btn btn-primary" value="按钮">
<textarea name="" id="result" cols="30" rows="10" class="form-control"></textarea>


    <script>
        const btn = document.getElementsByClassName("btn")[0];
        const result = document.getElementById("result");
        btn.onclick = function () {
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化，设置请求方法和URL
            xhr.open("get", "http://127.0.0.1:8080/server");
            //3.发送
            xhr.send();
            //4.事件绑定 处理服务端返回的结果
            //onreadystatechange:每当xhr的readtstate发生改变的
            //xhr有五个值：0,1,2,3,4
            xhr.onreadystatechange = function () {
                //判断服务端是否返回了所有的响应结果
                if (xhr.readyState === 4) {
                    //判断响应状态是否成功，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.innerHTML = xhr.response;
                    } else {
                    }
                }
            };
        };
    </script>
</body>

</html>

//1.引入express
const { response } = require('express');
const express = require('express');
//2.创建应用
const app = express();
//3.创建路由规则
app.get('/server',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*');
    response.send('hello');
});
app.post('/server',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*');
    response.send('hello');
});
//4.监听端口启动服务
app.listen(8080,()=>{
    console.log("已启动8080端口");
})
关于参数

在get方法下传参：

xhr.open("get", "http://127.0.0.1:8080/server?a=100&b=200");

在post方法下传参：

xhr.send('a=100&b=200');
解决IE缓存问题
xhr.open("get", "http://127.0.0.1:8080/server?t="+Date.now());
请求超时以及网络延迟
 //超时设置为2s
            xhr.timeout = 2000;
            //超时回调
            xhr.ontimeout = function(){

            }
            //网络异常回调
            xhr.onerror = function(){

            }
取消请求
<button class="btn btn-primary">发送</button>
<button class="btn btn-primary">取消</button>
    <script>
const btn = document.querySelectorAll('button');
let xhr = null;
btn[0].onclick = function(){
    xhr = new XMLHttpRequest();
    xhr.open("get",'http://127.0.0.1:8080/delete')
    xhr.send();
}
btn[1].onclick = function(){
    xhr.abort(); //取消请求
}
    </script>
请求重复发送问题
 <button class="btn btn-primary">发送</button>
    <button class="btn btn-primary">取消</button>
    <script>
        const btn = document.querySelectorAll('button');
        let xhr = null;
        //识别变量
        let isSending = false; //是否正在发送Ajax请求
        btn[0].onclick = function () {
            // 如果正在发送，则取消该请求，保证只有一次请求
            if(isSending==true){
                xhr.abort(); 
            }
            isSending = true;
            xhr = new XMLHttpRequest();
            xhr.open("get", 'http://127.0.0.1:8080/delete')
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    isSending = false; //保证只有一次请求
                }
            }
        }
        btn[1].onclick = function () {
            xhr.abort();
        }
    </script>

JQuery发送Ajax请求

在：jquery (v3.6.1) - jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务中复制jQuery的连接

<!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>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
    <button class="btn btn-primary">get</button>
    <button class="btn btn-danger">post</button>
    <button class="btn btn-info">ajax</button>
    <script>
        $('button').eq(0).click(function(){
            $.get('http://127.0.0.1:8080/delete',{a:100,b:200},function(data){
                console.log(data);
            });
        });
        $('button').eq(1).click(function(){
            $.post('http://127.0.0.1:8080/delete',{a:100,b:200},function(data){
                console.log(data);
            });
        });
        $('button').eq(2).click(function(){
            $.ajax({
                //url
                url:'http://127.0.0.1:8080/delete',
                //参数
                data:{a:300,b:99},
                //请求类型
                type:'get',
                //响应体结果
                // dataType:'json',
                //成功回调
                success:function(data){
                    console.log(data);
                }
            });
        });
    </script>
</body>
</html>

fetch发送Ajax请求

 <button class="btn btn-primary">发送</button>
    <script>
        const btn = document.querySelector('button');
        btn.onclick = function(){
            fetch('http://127.0.0.1:8080/delete',{
                //请求方法
                method:'post',
                //请求头
                headers:{
                    name:'hai'
                },
                //请求体
                // body:'user=hai&pwd=123456'
            }).then(response =>{
                return response.text();
            }).then(response =>{
                console.log(response);
            });
        }
    </script>

参考：使用Fetch发送Ajax请求 - Mao - 博客园 (cnblogs.com)

海量的海
关注
jquery、javascript 遍历ajax返回的 List集合
every_evy的博客
05-11 2万+
jquery、javascript 遍历ajax返回的 List集合
JSP+Jquery+JSON 集合实现AJAX
05-28
3. **jQuery AJAX**：学习jQuery的AJAX方法，如`$.ajax()`和`$.getJSON()`。 4. **JSP与JSON**：学习如何在JSP中生成JSON数据，以及如何处理来自AJAX请求的参数。 5. **实践项目**：通过实际项目练习，将学到的知识...
ajax同步集合,AJAX笔记
weixin_42465051的博客
08-05 273
AJAX笔记1、同步和异步交互：不用刷新整个页面边能够与服务器通信的办法；1．Flashjavascript2．Java appletcss3．框架 若是使用一组框架构造一个页面，不用动整个页面java4．隐藏的iframe程序员5．XML HttpRequest:该对象是对javaScript的一个扩展，可使页面与服务器进行通讯。当成 xmlHttpRequest对象的代名词。ajax2、AJA...
Ajax传输对象，集合或数组。
xiaozhen0610的博客
06-12 826
传输单个对象时： servlet页面 package com.itnba.maya.a; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.
ajax传递list集合
飞翔的鸡肉
02-07 2万+
ajax传递list集合参数
ajax获取集合中元素,JAVA中Ajax怎么获取集合并且遍历
weixin_42453050的博客
08-05 490
慕村954889012345678910111213141516通过JSON方式返回数据，然后在success中遍历数据。操作json$.ajax({type:'post',url:"maintain_findRoomByBuildingId.shtml",cache:false,data:{"buil...
ajax如何向后端传递List集合
weixin_44491927的博客
05-18 7053
最近在写个人博客项目，博客后台管理涉及到批量删除博客的功能，后端接收的是List<Long>数据类型。 那么如果通过ajax,直接向后端传递List<Long>数据类型的数据，而不用转换呢？
使用AJAX返回WebService里的集合具体实现
10-27
在本文中，我们将探讨如何使用AJAX从WebService返回数据集合，并具体实现这一过程。 首先，了解AJAX技术的几个核心组件是非常重要的。AJAX主要依赖于以下几个技术点： 1. JavaScript语言：用于编写AJAX的逻辑。 2....
AJAX提交表单数据实例分析
10-24
AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。在表单提交领域，使用AJAX可以实现更为快速、更为动态的用户体验。在本文中，我们将通过一个实例来分析...
通过ajax将数组或list集合传到后台的方法
勿忘初心的博客
05-11 3万+
一、传数组前端js：$(document).on('click', '#sendArr', function () { var ids = []; for(var i=0; i&lt;10; i++){ ids.push(i); } $.ajax({ type: 'post', ...
ajax传递给后台数组参数方式
热门推荐
lingxyd 的专栏
08-28 20万+
在项目上用到了批量删除与批量更改状态，前台使用了EasyUI的DataGrid，用到了批量更改数据状态功能。 在前台可以获取每条数据的ID，但是如何通过数组方式传递给后台？ 通过昨晚的各种方式的调试，终于得出了答案！ 在此作为备忘。 目前有两种方式可行： 方式一 前台代码： // 方式一 var _list = {}; for (v
Ajax传递List集合
qingo00o的博客
03-19 1143
前台代码： var codes=new Array(); $(".bottlecode").each(function(){ codes.push($(this).val()); }); $.ajax({ typ...
Ajax 获取Map集合
饭桶一生奋斗
06-07 2万+
Java代码：Student stu1=new Student(); stu1.setName("Ajax1"); stu1.setSex("nan"); stu1.setAge(22); Student stu2=new Student(); stu2.setName("Ajax
ajax的传递List集合
sinat_肖旭东的博客
10-11 5659
1. 在action中          class action1 {              private  List deptList;  给一个 get方法              peivate String ids;-------get set                       public String functions(){
Ajax接收并显示后台传来的list集合内的数据信息
bin929的博客
05-11 3万+
最近在学习Ajax做一个留言系统的时候碰到需要将list集合从后台传到前台ajax接收并显示的情况，在网上搜了很多，但很多情况都不是和我遇见的情况一样的，现在，直接贴出我的问题及解决方法。 后台代码： @RequestMapping(value="/findReply") @ResponseBody public Map&lt;String, Object&gt; findRe...
index.html 调用 ajax
flamesfather的博客
10-01 878
index.html 调用 ajax
Ajax开发技术
Liuxu 的博客
09-29 837
【代码】Ajax开发技术。
AJAX 3——原理：XMLHttpRequest+Promise
weixin_72043867的博客
10-07 828
AJAX原理：XMLHttpRequest+Promise，XHR与Promise在axios中的作用，学会使用XHR和Promise手写axios函数，Promise链式调用解决回调函数地域问题，使用async函数和await代替链式调用，宏任务微任务概念及执行顺序，Promise.all静态方法的使用。
Ajax教程
最新发布
Jsjendndn的博客
10-07 220
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。先解释XML：XML指的是可扩展标记语言，类似HtmlXML的设计宗旨是传输数据，不是显示数据XML标签没有被预定义XML是W3C的推荐标准它的主要应用是作为配置文件，程序间数据的传输，小型数据库，和json的功能差不多。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面。
ajax获取List集合数据
05-30
可以通过以下步骤使用Ajax获取List集合数据： 1. 在服务器端编写一个接口，返回List集合数据，例如： ```java @RequestMapping("/getList") @ResponseBody public List<String> getList() { List<String> list = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

海量的海

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值