简单的ajax请求响应

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

简单的ajax请求响应

今天学习了简单的ajax应用，以下是一个简单的ajax请求响应程序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			// js里XMLHttpRequest类似于python里的requests、urlib
			function getXHR(){
				if(window.XMLHttpRequest){
					return new window.XMLHttpRequest()
				}else{
					// 解决微软的特殊情况
					new window.ActiveXObject('Microsoft.XMLHTTP')
				}
			}
			// 异步请求服务器数据函数
			function jsonData(){
				var xhr = getXHR()
				//通过get方法，访问data.json文件
				xhr.open('GET', 'data.json')
				xhr.send(null)
				
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && xhr.status == 200){
						// 得到服务返回的json字符串
						resp = xhr.responseText
						console.log(resp)
						htmlText = ""
						// 解析字符串为json对象
						jsonObj = JSON.parse(resp)
						console.log(jsonObj)
						// 组织显示html格式
						htmlText = '<tr><td>' + jsonObj.user + '</td></tr>'
						document.getElementById('userData').innerHTML = htmlText 
					}
				} 
			}
		</script>
	</head>
	<body>
		<input type="button" value="加载" onclick="jsonData()"/>
		
		<table border="1">
			<thead>
				<tr><th>用户名</th></tr>
			</thead>
			<tbody id='userData'></tbody>
		</table>
	</body>
</html>

代码效果：点击加载按钮，得到用户信息
用户信息

g1x2w3
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
某条前端面试题--实现一个封装的ajax器（Promise版）
from_the_star的博客
05-13 661
题目描述 实现一个封装ajax器，功能有 限制一次同时发送的ajax请求数量m个 timeout限制 重试n次 解题思路 强调下，我的想法和代码只是尝试回答面试问题，并不能直接在正式的业务场景里使用，但希望也能给你们带去思考。另外，我的解决方案是基于promise完成的。 首先，限制条件1在我的理解中，发送的请求还有m个请求在请求中，那么这时程序发出的请求，要先被存下来，等到有请求结束了，再发送给服务器。这就需要我们思考用什么结构，存储请求，考虑到请求是先进先出的，那么就可以使用队列。 其次，2、3这
Ajax异步请求响应.java
05-09
responseText/responseXML ：服务器的响应字符串 status：服务器返回的HTTP状态码 statusText: 服务器返回的HTTP状态信息 readyState ：对象状态（0-4） 0 = 未初始化 1 = 正在加载 2 = 已加载 3 = 交互...
ajax中的高级请求和响应
weixin_30627381的博客
06-13 95
Ajax 中的高级请求和响应 【字体：大 中 小】 【打印本稿】 2006-5-6 10:18:54 www.okajax.com ( 4250) ...
Ajax的请求和响应
LSSHFF的博客
06-20 513
一、JS方式 get/post请求 document.querySelector("button").onclick = function () { //创建ajax对象 let xhr = new XMLHttpRequest(); //ajax请求需要http协议（请求 + 响应） //请求三部分组成（请求行 头 体） //请求行xhr.open() // open方法参数1：请求方式 GET 参数2：请求的url地址
AJAX发送请求与响应-jQuery中ajax的使用-node初级（五）
henu_GM的博客
02-27 2954
AJAX简介： AJAX即异步JavaScript与XML技术，是一套综合了多项技术的浏览器端网络开发技术。 简单来说，AJAX就是使用JavaScript代码发送网络请求并处理响应，有浏览器即客户端实现。 ajax技术能够在页面不刷新的情况下，和服务器端进行交互，可以仅向服务器发送并取回必须的数据，并在客户端采用js处理响应。交换的数据大大减少，服务器的响应更加迅速，把数据处理工作放到了客户端进行，减少了web服务器的负荷。 特点：异...
AJAX请求与响应
weixin_48909429的博客
07-14 225
AJAX请求与响应
实例详解Android Webview拦截ajax请求
08-28
在 Native 端，我们需要实现一个 JavaScript Interface，例如 onAjaxRequest 方法，该方法将接收 Fly.js 传来的请求对象，并完成真正的请求后，将响应对象通过 handler 返回给 Fly.js。 通过这种方式，我们就可以...
chrome扩展插件获取ajax请求记录
04-06
其中，获取Ajax请求记录是开发者调试过程中非常关键的一环，因为它可以帮助开发者检查数据的发送和接收情况，排查网络问题，以及理解应用程序的工作流程。 Chrome扩展插件就是一种增强浏览器功能的方式，它们可以...
Ajax 的请求与响应
Anders_lt的专栏
11-30 851
发出请求主要包括5个部分 从 Web 表单中获取需要的数据。 建立要连接的 URL。 打开到服务器的连接。 设置服务器在完成后要运行的函数。 发送请求。 下面为代码function callServer() {  var city = document.getElementById("city").value;  var
Ajax请求和响应操作
小婷的博客
06-03 129
Ajax请求操作 GET发送数据 GET请求通过 查询字符串参数 的方式把请求体内容传给后端，要求通过附加url后面进行传输 POST发送数据 POST请求默认通过 纯文本 的方式把请求体内容传给后端，要求通过send（）方法参数进行传输 POST请求可以通过 "名称/值"对 的方式把请求体内容传给后端，要求通过setRequestHeader()方法进行设置 总结 GET发送数据：url？后面，通过查询字符串参数形式发送 POST发送数据：send()方法参数，数值类型为纯文本、
AJAX发送请求及响应
jianOH的博客
02-05 409
<!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>Do
一文了解：AJAX：异步请求响应
LSFZ88888的博客
02-12 561
一、认识同步交互和异步交互 1、什么是同步交互 首先用户向HTTP服务器提交一个处理请求。接着服务器端接收到请求后，按照预先编好的程序中的业务逻辑进行处理，比如和数据库服务器进行数据信息交换。最后，服务器对请求进行响应，将结果返回给客户端，返回一个HTML在浏览器中显示，通常会有CSS样式丰富页面的显示效果。 优点 可以保留浏览器后退按钮的正常功能。在动态更新页面的情况下，用户可以回到前一个页面状态，浏览器能记下历史记录中的静态页面,用户通常都希望单击后退按钮时，就能够取消他们的前一次操作，同步
80.Ajax向服务器发送请求并响应
02-04 130
JSP页面中的代码: Servlet中的代码: 这里使用了一个GSON架包，该架包由免费Google提供。只需创建一个Gson的对象，然后调用它的toJson(list)方法就可以将一个ArrayList转换成一个Json字符串。 ...
AJAX学习笔记（四、请求与响应）
三分恶的博客
07-11 1585
向服务器发送请求 工作原理：  AJAX与后台的交互可以分为以下几步： 1、用户从前端发送请求，JavaScript中调用XMLHttpRequest对象。 2、HTTP请求由XMLHttpRequest对象发送到服务器。 3、服务器使用JAVA，PHP，ASP.net等与数据库交互。检索数据。 4、服务器将XML数据或JSON数据发送到XMLHttpRequest回调函数。HTML和...
探索高级AJAX技术：深入研究异步请求和响应处理
最新发布
阿猫故乡的博客
12-15 969
AJAX（Asynchronous JavaScript and XML）是一种在Web应用程序中使用的技术，它通过使用JavaScript和XML（或JSON）来实现在后台与服务器进行异步通信，从而实现页面内容的局部更新，而不需要完全刷新整个页面。AJAX的基本原理和工作流程如下：前端页面向服务器发送异步请求：当用户在前端页面上执行某个操作（例如点击按钮），JavaScript代码会创建一个XMLHttpRequest对象，然后通过该对象向后端服务器发送异步请求。
原生ajax请求与响应操作
qq_45753147的博客
04-13 165
<!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&lt..
AJAX中服务器响应请求的两种方式
lishundi的博客
08-18 1865
先来说一下几种常见的状态码： （１）readyState状态码： 0：请求未初始化 1：服务器连接已建立 2：请求已接收 3：请求处理中 4：请求已完成，且响应已就绪 （２）HTTP状态码： 200：服务器成功返回网页 404：请求的网页不存在 503：服务器暂时不可用 两种方式： （１）onreadystatechange方式： &lt;!DOCTYPE html&...
ajax请求响应200为什么进入error
07-27
有几种可能的原因导致 AJAX 请求响应状态码为 200 时进入 error 回调函数： 1. 服务器返回的响应不符合预期：尽管服务器返回了 200 状态码，但响应内容可能不是预期的 JSON 格式或其他错误格式，导致解析失败。可以通过查看响应内容或调试工具来检查响应是否符合预期。 2. 跨域请求问题：如果 AJAX 请求发送到不同的域名或端口，浏览器可能会阻止跨域请求。这种情况下，可以在服务器端设置允许跨域请求的响应头（如 Access-Control-Allow-Origin），或者使用代理服务器转发请求解决跨域问题。 3. 请求超时：如果服务器响应时间过长，超过了 AJAX 请求的超时时间设置，浏览器会认为请求失败。可以尝试增加请求的超时时间或优化服务器端代码以减少响应时间。 4. 服务器端错误：服务器可能在处理请求时发生了错误，导致返回了 200 状态码但实际上是一个错误的响应。可以查看服务器端日志或调试代码来检查是否存在问题。 以上是一些常见的导致 AJAX 请求响应状态码为 200 进入 error 的可能原因，具体原因需要根据具体情况进一步排查。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值