JS-ajax

最新推荐文章于 2024-07-11 20:55:36 发布
最新推荐文章于 2024-07-11 20:55:36 发布
阅读量54 收藏
点赞数
文章标签： javascript ajax 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57993363/article/details/131635373
版权

异步的XML和JavaScript,用于浏览器和服务器进行数据交互。
发起一个异步请求  

一、GET
（1）get 无参
            1.创建一个请求实例
            var xhr = new XMLHttpRequest();
            2.打开一个链接 
            xhr.open('get','http://121.0.0.1:5500/findAll');
            3.发送请求
            xhr.send()
            4.监听状态改变 接收响应
            xhr.onreadyStateChange = function(){
                readyState  0 open未调用 1 open已调用 2接收响应头信息 3.接收响应体信息 
                if(xhr.readyState ===4 && xhr.status===200){
                    xhr.response ----json字符串  JSON.parse();
                    var res = JSON.parse(xhr.response);
                    res.data.forEach(function(item){
                        var div = document.createElement('div');
                        div.innerHTML = item.content;
                        document.body.appendChild(div)
                    })
                }
            }

<!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>
	<script>
		window.onload = function(){
			// 发送一个ajax请求 
			/**
			 * 1.创建一个请求实例
			*/
			var xhr = new XMLHttpRequest();
			// console.log(xhr);
			/**
			 * 2.打开一个链接 
			 * open 参数:请求方式 请求路径 
			*/
			xhr.open('get','http://121.199.0.35:8888/index/carousel/findAll');
			/**
			 * 3.发起请求 
			 * send() get请求携带参数携带在地址栏上 post请求携带参数携带在请求体中
			*/
			xhr.send();
			/**
			 * 接收响应 监听状态改变onreadystatechange 
			 * 响应数据 readyState 4 表示响应完成 status 200表示响应成功
			 * readyState 0 open未调用 1 open已经调用 2接收响应头信息 3接收响应体信息 
			 * 4.响应完成 
			 * 
			*/
			xhr.onreadystatechange = function(){
				// 表示响应完成 表示响应成功
				if(xhr.readyState === 4 && xhr.status === 200){
					// console.log(xhr.response,'接收响应体');
					// 后端返回的数据格式 是json字符串 
					var res = JSON.parse(xhr.response);
					console.log(res);
					// 循环创建图片和div  将url给到img  src属性
					res.data.forEach(function(item){
						// console.log(item,'------');
					 var img =	document.createElement('img');
					 var div =	document.createElement('div');
					 div.innerHTML = item.status + '' + item.introduce;
					 img.src = item.url;
					 img.style.width = '200px';
					 document.body.appendChild(div);
					 document.body.appendChild(img);
					})
				}
			}

		}
	</script>
</head>
<body>
</body>
</html>


（2）get 参数

        携带在url地址栏 ?name=terry&age=12 查询字符串 
         1.创建一个请求实例
            var xhr = new XMLHttpRequest();
            var params = {
                page:1,
                pageSize:10
            }
        2.打开一个链接 
            xhr.open('get','http://121.0.0.1:5500/findAll'+"?"+Qs.stringify(params));
        3.发送请求
            xhr.send()
        4.监听状态改变 接收响应
            xhr.onreadyStateChange = function(){
                readyState  0 open未调用 1 open已调用 2接收响应头信息 3.接收响应体信息 
                if(xhr.readyState ===4 && xhr.status===200){
                    xhr.response ----json字符串  JSON.parse();
                    var res = JSON.parse(xhr.response);
                    res.data.forEach(function(item){
                        var div = document.createElement('div');
                        div.innerHTML = item.content;
                        document.body.appendChild(div)
                    })
                }
            }

<!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>
	<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.1/qs.js"></script>
	<script>
		window.onload = function(){
			/**
			 * get请求带参数  分页查询 一页查询10条数 page1 pageSize 10
			*/
			// 1.创建一个xmlHttpRequest请求实例
			var xhr = new XMLHttpRequest();
			var params = {
				page:1,
				pageSize:10
			}
			// 将对象转为查询字符串 Qs.stringify()
			var paramsString = Qs.stringify(params);
			// ?page=1&pageSize=11 查询字符串   
			// 2.打开一个链接 
			xhr.open('get','http://121.199.0.35:8888/index/article/pageQuery'+'?'+paramsString);
			// 3.发送请求
			xhr.send();
			// 4.监听状态改变 接收响应
			xhr.onreadystatechange = function(){
				if(xhr.readyState ===4 &&xhr.status===200){
					var response = 	JSON.parse(xhr.response);
					console.log(response);
					var dl = document.createElement('dl');
					response.data.list.forEach(function(item){
						var dt = document.createElement('dt');
						var dd = document.createElement('dd');
						//innerText会保留原格式
						dt.innerHTML = item.title;
						dd.innerHTML = item.content;
						dl.appendChild(dt);
						dl.appendChild(dd);
						document.body.appendChild(dl);
					})
				}
			}
		}
	</script>
</head>
<body>	
</body>
</html>

二、Post

（1）post json
       1.创建一个请求实例
            var xhr = new XMLHttpRequest();
            
       2.1打开一个链接 
            xhr.open('post','http://121.0.0.1:5500/user/login');

           var params = {
                username:'admin1',
                password:123321
            }
       2.2 设置请求头格式
            xhr.setRequestHeader('Content-type','application/json;charset=UTF-8');
      3.发送请求
            xhr.send(JSON.stringify(params))
      4.监听状态改变 接收响应
            xhr.onreadyStateChange = function(){
                readyState  0 open未调用 1 open已调用 2接收响应头信息 3.接收响应体信息 
                if(xhr.readyState ===4 && xhr.status===200){
                    xhr.response ----json字符串  JSON.parse();
                    var res = JSON.parse(xhr.response);
                    res.data.forEach(function(item){
                        var div = document.createElement('div');
                        div.innerHTML = item.content;
                        document.body.appendChild(div)
                    })
                }
            }

<!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>
	<script>
		// 1.创建一个请求实例
		var xhr = new XMLHttpRequest();
		// 2.1打开一个链接
		var obj = {
			username:'admin1',
			password:123321
		}
		xhr.open('post','http://121.199.0.35:8888/user/login');
		// 2.2 设置请求头为json格式 setRequestHeader 
		/**
		 * 1.Content-Type application/json 设置json格式
		 * 2.Content-Type application/x-www-form-urlencoded 设置为表单格式
		 * 3.Content-Type text/plain;charset=UTF-8 默认值
		*/
		xhr.setRequestHeader('Content-type','application/json;charset=UTF-8');
		// 3.发送请求
		xhr.send(JSON.stringify(obj));
		// 4.监听状态改变 接收响应
		xhr.onreadystatechange = function(){
			if(xhr.readyState === 4 && xhr.status === 200){
				console.log(JSON.parse(xhr.response));
			}
		}
	</script>
</head>
<body>
</body>
</html>


       （2） post 表单格式
            1.创建一个请求实例
            var xhr = new XMLHttpRequest();
            
            2.1打开一个链接 
            xhr.open('post','http://121.0.0.1:5500/user/saveOrUpdate');

            var params = {
                username:'admin1',
                password:123321,
                telephone:15536332889
            }
          接口需要表单格式  post的表单格式就是get查询字符串 
            2.2 设置请求头格式
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded;charset=UTF-8');
            3.发送请求
            xhr.send(Qs.strinfify(params))
            4.监听状态改变 接收响应
            xhr.onreadyStateChange = function(){
                readyState  0 open未调用 1 open已调用 2接收响应头信息 3.接收响应体信息 
                if(xhr.readyState ===4 && xhr.status===200){
                    xhr.response ----json字符串  JSON.parse();
                    var res = JSON.parse(xhr.response);
                    res.data.forEach(function(item){
                        var div = document.createElement('div');
                        div.innerHTML = item.content;
                        document.body.appendChild(div)
                    })
                }
            }

<!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>
	<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.1/qs.js"></script>
	<script>
		// 1.创建一个请求实例
		var xhr = new XMLHttpRequest();
		// 2.1打开一个链接
		xhr.open('post','http://121.199.0.35:8888/baseUser/saveOrUpdate');
		var obj = {
			username:'李白',
			password:'888888',
			telephone:15536332886
		};
		// 2.2设置请求头格式
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8');
		// 3.发送请求
		xhr.send(Qs.stringify(obj));
		// 4.监听状态改变 接收响应
		xhr.onreadystatechange = function(){
			if(xhr.readyState === 4 && xhr.status===200){
				console.log(JSON.parse(xhr.response))
			}
		}
	</script>
</head>
<body>	
</body>
</html>
Daphne^
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
purejs-ajax:原始 javascript ajax
07-03
"PureJS-AJAX"项目则专注于使用原生JavaScript实现这一功能，无需依赖任何库或框架，如jQuery或axios。 在纯JavaScript中实现AJAX，主要涉及到以下几个关键步骤和概念： 1. **创建XMLHttpRequest对象**： AJAX的...
JS-Ajax-jQuery笔记1
04-30
JS-Ajax-jQuery笔记，学习笔记，JavaScript，JS-Ajax-jQuery笔记，学习笔记，JavaScript，
uni-ajax：uni-app的轻量级HTTP客户端
02-04
NPM # 如果您的项目是HBuilder X创建的，根目录又没有package.json文件的话，请先执行如下命令：# npm init -y# 安装npm install uni-ajax# 更新npm update uni-ajax :croissant:实例新建ajax.js文件（文件名可...
vxe-ajax::leaf_fluttering_in_wind: 用于 Vue 全局安装 xe-ajax
05-05
vxe-ajax用于Vue全局安装xe-ajax正在安装npm install xe-ajax vxe-ajax < script src = "https://cdn.jsdelivr.net/npm/vue" > < / script >< script src = "https://cdn.jsdelivr.net/npm/xe-ajax" &gt...
js-ajax-ajax-and-callbacks-lab-v-000
03-01
文件index.html具有一个基本的两列结构，您将把JavaScript代码添加到index.js 。 不要忘记运行测试，并确保将页面加载到浏览器中以确保一切正常！指示我们正在制作一个GitHub存储库搜索客户端。 它应该使用用户的...
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 860
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
Vue 3集成krpano 全景图展示
Mr丶GUO
07-06 432
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 182
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
在项目中，如何使用springboot+vue+springsecurity+redis缓存+Axios+MySQL数据库+mybatis
最新发布
huanghm88的专栏
07-11 601
在Spring Boot中，可以使用Spring Data JPA和MyBatis来配置MySQL数据库。在Vue项目中，可以创建一个config.js文件来配置后端的API地址，然后在需要发送请求的地方使用Axios发送请求。根据业务需求，在Spring Boot中编写相应的接口和服务层代码，包括数据访问、业务逻辑等。在Vue中，可以使用Axios发送HTTP请求，并将响应的数据展示在前端页面上。分别启动后端的Spring Boot应用和前端的Vue应用，访问前端页面，就可以看到与后端进行通信的效果。
JS混淆基本类型和原理
朴拙科技的博客
07-06 735
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 297
vue2、vue3首屏优化,减少白屏时间
TS类型声明文件（二）如何在 TS 中导入导出局部类型
weixin_43303603的博客
07-10 219
系列文章之：如何在 TypeScript 中导入导出局部类型
逆向案例十一——华强北登录逆向
m0_57265868的博客
07-10 153
发现有三个参数进行了加密，分别是Password,UserName和Deviceld，再登录一次发现最后一个参数是固定的。这个参数没定义，就去页面源码中，找出这个参数。进入后发现折叠的代码，貌似是des(它自己在上面写的），直接复制。我这是格式化后隐藏了。PS：我之前说第三个参数deviceid是固定，其实是错的，它是由这个函数定义的。这是一个获取设备id的函数，每一台设备都不一样，但同一台设备这个参数是固定的。复制代码在pycharm中的js文件中，最后一个参数是加密的密钥。点击登录，找到登录包。
Vue3基础知识：组合式API中的provide和inject,他们作用是什么？如何使用？以及案例演示
我就知道你会来，我们一起进步吧！
07-07 428
Vue3基础知识：组合式API中的provide和inject,他们作用是什么？如何使用？以及案例演示 1.provide和inject相较于父子传递的不同在于provide,inject可以用于跨层级通信（通俗易懂的讲就是可以实现爷孙之间的直接信息传递）。 1.跨层级传递数据 1.在顶层组件通过provide函数提供数据 2.底层组件通过inject函数获取数据
Vue3中生成本地pdf并下载
weixin_62328265的博客
07-07 447
Vue3使用html2pdf.js实现在项目中导出指定的表格数据,包含实现步骤,源码分析,注释讲解等内容
【源码下载】瓦房店农村电商大数据平台模板
http://8.130.10.148:3000/digitaltwin/index.html
07-08 337
用 echarts 和 jquery 实现的大屏模板效果，访问 dt.sim3d.cn，公众号后台回复【瓦房店农村电商大数据平台模板】获取源码。
关于echarts中提示框中只能是内容的部分更改
b0303的博客
07-09 190
只为解决展示数据框中提示的问题
创建Vue3工程
淼淼不暴躁!
07-10 272
因为是国外的源，要换一个国内的镜像源。
前端累加计算浮点数时出现精度丢失问题解决方法
qq_45256497的博客
07-11 179
此外，如果操作数的范围超出了JavaScript中整数能够精确表示的范围（对于JavaScript ES6及更高版本，这个范围是 -2^53 到 2^53 之间的整数），那么仍然可能遇到精度问题。具体到你的函数中，它通过将数组中的每个元素乘以 10000（一个较大的整数）来实现这一点。当计算机尝试存储这样的数值时，它会被近似到最接近的可表示的二进制浮点数，这可能导致微小的误差。最后，虽然这种方法在某些情况下有效，但在涉及到更复杂的数学运算时，可能需要使用专门的数学库，如。
node.js-ajax-vue
05-26
Node.js是一种基于Chrome V8 ...综合起来，node.js-ajax-vue可以用于构建高性能、交互性强的Web应用程序。Node.js提供了服务器端的支持，Ajax可以异步地从服务器获取数据，Vue.js可以用于构建用户界面和单页应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值