第十五章 AJAX请求

已于 2024-01-13 00:27:53 修改
阅读量1k 收藏 13
点赞数 24
分类专栏： JavaWeb 文章标签： ajax 前端 javascript
于 2024-01-12 00:21:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72232218/article/details/135541752
版权

第十五章AJAX请求

1.什么是AJAX请求

在这里插入图片描述

2.原生JavaScript的AJAX的请求示例

用下面的页面来展示AJAX请求
在这里插入图片描述
其中就绑定了一个单机事件
在这里插入图片描述
下面就是这个页面
在这里插入图片描述

下面我们先写一个BaseServlet
在这里插入图片描述
在这里插入图片描述
下面再写一个类来继承BaseServlet类
在这里插入图片描述

进行配置
在这里插入图片描述
在这里插入图片描述

下面三步之后，就可以将请求发送给服务器了
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
如果下面我要访问这个person对象，由于客户端和服务器不在同一台电脑上，我们将person的地址返回给客户端是没有用的，客户端需要的是里面的数据
在这里插入图片描述
我们要将其转化成person格式的字符串，再将其返回给客户端
在这里插入图片描述

那么客户端如何接收请求呢
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

下面用alert我们看响应的信息
在这里插入图片描述
在这里插入图片描述

实际开发的时候，我们会将信息显示在页面上
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.AJAX请求的特点说明

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
当我发起请求后，真个页面除了div有变化，其他地方都没有变化（地址栏也没有变化）
在这里插入图片描述
下面我们看看以前的请求
在这里插入图片描述
在这里插入图片描述
我点击这个请求的时候，地址栏就发生了变化，原来的内容就都没有了
在这里插入图片描述
上面是AJAX的特点局部更新
下面我们看看AJAX另一个特点，异步请求
我们将true改为false，false表示同步
在这里插入图片描述
在这里插入图片描述

这里我们让其休眠3s
在这里插入图片描述
这里就是同步，浏览器先收到服务器的返回的数据，才去执行执行这个最后一行代码
在这里插入图片描述
在这里插入图片描述
下面是异步
我们将false改为true
改为true之后，他就不会等服务器返回数据之后，才去执行最后一行代码
而是在它休眠的时候，先去执行最后一行代码
在这里插入图片描述
他不会像同步那样等待
在这里插入图片描述
在这里插入图片描述

下面我们演示一下异步有什么用处
我们先将其改成同步
在这里插入图片描述

然后下面加几个按钮
在这里插入图片描述

我在点完第一个按钮后，其他的就点不动了
在这里插入图片描述

下面看看异步
在这里插入图片描述
异步就不会卡死
在这里插入图片描述
在这里插入图片描述

4.jQuery的AJAX方法

在这里插入图片描述
在这里插入图片描述
下面是服务器的代码
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

这个数据要更新到页码上面才行
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
我们上面的dataType为text需要我们转换为json对象
而datatype为json的时候，不需要转换
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
其中的data属性也可以换种写法
在这里插入图片描述
结果一模一样
在这里插入图片描述

5.jQuery的get和post方法

在这里插入图片描述
get和post请求的方法是完全一模一样的
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6.jQuery的getJSON方法

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

7.jQuery的serialize方法

在这里插入图片描述
在这里插入图片描述
我们希望可以将表单中的内容获取到，并且以name=value的形式拼接，发送给服务器
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
得到的内容就是表单项的内容，人家已经获取并且拼接好了
在这里插入图片描述
如何在data项后面加上得到的参数，发送给服务器
在这里插入图片描述
下面我们可以在服务器获取参数
在这里插入图片描述
在这里插入图片描述

幸运小新
关注
  • 24
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
for发送ajax请求,for循环中的Ajax请求(Ajax request in for loop)
weixin_30500365的博客
08-05 811
for循环中的Ajax请求(Ajax request in for loop)我想用for循环循环100次ajax请求。 这是我的代码：for(var i=1; i<100; i++){var num = i+1;var request = new XMLHttpRequest();request.open("GET", "http://localhost/test/1/2/main.php...
jQuery Ajax请求状态管理器打包
10-28
jQuery提供了一些全局事件，包括`ajaxStart()`和`ajaxStop()`，它们分别在页面上第一个Ajax请求开始和所有Ajax请求结束时触发。通过绑定这些事件，开发者可以统一控制整个页面的加载状态。然而，这种方式是全局性质...
ie浏览器ajax第20次请求,关于IE浏览器 ajax 请求返回数据不对的问题
weixin_28998775的博客
08-05 345
在使用ajax向后台发送请求的时候，在使用ie 进行调试的时候发现根据条件进行查询时，返回的数据与没有根据条件进行查询时数据相同，也就是条件没有发生作用。经过同事的帮助发现ajax初始化设置时没有cache:false，ie发现走的是同一个函数，所以直接读了缓存数据。现将ajax各参数说明放到这里，以备以后使用：url: 要求为String类型的参数，(默认为当前页地址)发送请求的地址。type:...
Ajax请求详解
热门推荐
Louie_0的博客
10-29 1万+
Ajax是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。
ajax请求超时判断并处理
2401_84153158的博客
04-18 988
XMLHttpRequest.readyState: 状态码0 － （未初始化）还没有调用send()方法1 － （载入）已调用send()方法，正在发送请求2 － （载入完成）send()方法执行完成，已经接收到全部响应内容3 － （交互）正在解析响应内容4 － （完成）响应内容解析完成，可以在客户端调用了XMLHttpRequest.status属性:一些错误代码HTTP1xx-信息提示这些状态代码表示临时的响应。客户端在收到常规响应之前，应准备接收一个或多个1xx响应。
第三十一章 初始ajax
Girasoles的博客
12-17 548
第三十一章 初始ajax
第15章：AJAX（异步请求）
异侠
10-05 202
文章目录简介适用场景工作原理传统AJAX使用（不推荐，不兼容且麻烦）jQueryAJAX参数： 简介 AJAX = Asynchronous JavaScript and XML（异步的JavaScript 和XML）。 一种创建交互式网页应用的网页开发技术 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术 适用场景 表单驱动的交互 文本输入场景（需要保证数据的唯一性） 深层次的树的导航 用户间的交流响应（最新的热点新闻，天气预报以及聊天室内容等） 类似投票等场景 过滤场景（按照时间
Ajax 网络请求
ximingx
03-14 561
Ajax 的概念 在浏览器中，我们可以在不刷新页面的情况下，通过 Ajax 的方式去获取一些新的内容。 Ajax：Asynchronous Javascript And XML（异步 JavaScript 和 XML）。它并不是凭空出现的新技术，而是对于现有技术的结合。Ajax 的核心是 js 对象：XMLHttpRequest。 Ajax 原理（发送 Ajax 请求的五个步骤） 其实也就是 使用 XMLHttpRequest 对象的五个步骤。 一个完整的 HTTP 请求需要的是： 请求的网址、请求
ajax请求数据用于另一个ajax,在另一个AJAX请求中使用数据
weixin_39558521的博客
08-05 579
我正在学习ruby，但是我正需要一些JS/JQuery来处理一个我正在和朋友一起工作的小项目。我们正在使用Last.fm API，并试图构建一个页面，我们将从两个不同的URL调用Json数据。在另一个AJAX请求中使用数据我们在哪里可以拉出朋友的用户名和一些关于他们的信息，并，我们可以得到每个用户的热门曲目。我跑中，一旦我拉出来的用户名，我需要把它保存为一个变量，然后将其插入里面上获得toptop...
ajax请求无响应 请检查服务器状态,检查jQuery ajax请求的状态
weixin_39859055的博客
08-01 495
似乎只有在ajax请求能够从服务器获得某些响应时，才会触发成功，错误和完整的回调。因此，如果我关闭服务器，则不会执行以下错误回调，并且请求将以静默方式失败。$.ajax({type: "GET",url: "http://localhost:3000/",dataType: "script",success: function() {alert("success");},error: functi...
ajax请求,asp的实例
06-08
下面是一段简单的JavaScript代码，用于创建并配置Ajax请求： ```javascript function showHint(str) { var xmlhttp; if (str.length == 0) { document.getElementById("txtHint").innerHTML = ""; return; } ...
疯狂ajax源代码第13-15章
02-24
这一章可能会探讨如何构建Ajax请求，包括设置HTTP请求头、发送GET或POST请求、处理服务器响应等内容。还会讲解如何处理不同类型的响应，如XML、JSON或其他文本格式。此外，这一章可能会涵盖错误处理和状态监控，确保...
疯狂Ajax源码 13-15章
11-02
第15章：实战篇 这一章以实际项目为背景，展示了Ajax在复杂Web应用中的应用。包括如何构建一个动态的表格系统，允许用户无需刷新页面即可添加、编辑和删除数据。此外，还介绍了使用Ajax实现分页功能，以及如何实现...
accp5.0JavaScript第五章上机答案
06-20
本“accp5.0JavaScript第五章上机答案”应当包含了上述知识点的具体实践和解答，帮助学员巩固理论知识，提高动手能力。通过解决上机题目，学员能够更好地理解和运用JavaScript，为后续的Web开发打下坚实基础。
Spark SQL Catalyst工作流程
xiaoliuxxs
08-10 853
比如join 算子，Spark根据不同场景为该算子制定了不同的算法策略，有 BroadcastHashJoin、ShuffleHashJoin 以及 SortMergejoin 等，**物理执行计划实际上就是在这些具体实现中挑选一个耗时最小的算法实现。RDD的运行流程：RDD-> DAGScheduler -> TaskScheduler -> worker，任务会按照编写的代码运行，代码运行效率依赖于开发者的优化，开发者会在很大程度上影响运行效率。就是提前将需要的列查询出来，其他不需要的列裁剪掉。
【Ajax和json】
m0_71941456的博客
08-12 499
通过上述示例，我们可以看到Ajax和JSON如何协同工作，以实现无需重新加载页面即可更新网页部分内容的功能。这种技术极大地提高了Web应用程序的用户体验和交互性。随着Web开发技术的不断进步，Ajax和JSON的使用将更加广泛和深入。JSON数据格式易于阅读和编写，同时也易于JavaScript解析。希望这篇文章和代码示例能够帮助你更好地理解Ajax和JSON在实际开发中的应用。如果你有任何问题或需要进一步的帮助，请随时联系我。对象，它是浏览器提供的用于与服务器进行通信的API。
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 645
ASP.NET Core Web API 使用Autofac框架
JAVA-WEB资源配置
最新发布
caryeko的专栏
08-15 158
用JAVA进行编写WEB项目时，我们一般需要对WEB进行统一配置，例如制定拦截路径、页面解析器、跨域配置、fastjson报文解析、文件上传大小配置等。
JavaScript与Ajax第二版全教程：详解与实例
学员将学习如何使用XMLHttpRequest对象进行Ajax请求，以及处理响应和错误的方法，包括回调函数、Promise和async/await等现代JavaScript异步编程模式。 此外，课程还会涉及Ajax的安全性问题，如跨域资源共享（CORS）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值