Ajax 基础——传递方式，封装，ajax状态码，错误处理，IE缓存处理

最新推荐文章于 2024-08-07 23:30:48 发布
最新推荐文章于 2024-08-07 23:30:48 发布
阅读量197 收藏
点赞数 1
分类专栏： Ajax 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w_D_lufei/article/details/102942233
版权

文章目录

传统网站中存在的问题

  • 网速慢的情况下，页面加载时间长，用户只能等待
  • 表单提交后，如果一项内容不合格，需要重新填写所有表单内容
  • 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间

Ajax 应用场景

  1. 页面上拉加载更多数据
  2. 列表数据无刷新分页
  3. 表单项离开焦点数据验证
  4. 搜索框提示文字下拉列表

Ajax 的运行环境

Ajax技术需要运行在网站环境中才能生效

Ajax 运行原理及实现

Ajax 运行原理

Ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从 而提高用户体验。
在这里插入图片描述

Ajax的实现步骤

1. 创建ajax对象
	var xhr = new XMLHttpRequest();
2. 告诉 Ajax 请求地址以及请求方式
 xhr.open('get', 'http://localhost:3000/first');
3.发送请求
	xhr.send();
4.获取服务器端响应到客户端的数据
   	xhr.onload = function (){
			// 将JSON字符串转换为JSON对象
			var responseText = JSON.parse(xhr.responseText);
			// 测试：在控制台输出处理结果
			console.log(responseText)
			// 将数据和html字符串进行拼接
			var str = '<h2>'+ responseText.name +'</h2>';
			// 将拼接的结果追加到页面中
			document.body.innerHTML = str;
		}

服务端响应的数据格式

  • 在真实的项目中，服务器端大多数情况下会以 JSON对象作为响应数据的格式。当客户端拿到响应数据时，要将 JSON 数据和 HTML 字符串进行拼接，然后将拼接的结果展示在页面中。
  • 在 http 请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输
// 引入express框架
const express = require('express');
const bodyParser = require('body-parser');
// 创建web服务器
const app = express();

app.get('/first', (req, res) => {
	res.send({"name": "zs"});
});
// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');

Ajax传递方式

1. GET 请求方式

html页面

<body>
	<p>
		<input type="text" id="username">
	</p>
	<p>
		<input type="text" id="age">
	</p>
	<p>
		<input type="button" value="提交" id="btn">
	</p>
	<script type="text/javascript">
		// 获取按钮元素
		var btn = document.getElementById('btn');
		// 获取姓名文本框
		var username = document.getElementById('username');
		// 获取年龄文本框
		var age = document.getElementById('age');
		// 为按钮添加点击事件
		btn.onclick = function () {
			// 创建ajax对象
			var xhr = new XMLHttpRequest();
			// 获取用户在文本框中输入的值
			var nameValue = username.value;
			var ageValue = age.value;
			// 拼接请求参数
			// var params = 'username='+ nameValue +'&age=' + ageValue;
			var params = `username= ${nameValue}&age=${ageValue}`;
			// 配置ajax对象
			xhr.open('get', `http://localhost:3000/get?${params}`);
			// 发送请求
			xhr.send();
			// 获取服务器端响应的数据
			xhr.onload = function () {
				console.log(xhr.responseText)
				//{"username":" admin","age":"123"}
			}
		}
	</script>
</body>

服务器

app.get('/get', (req, res) => {
	res.send(req.query);
});
2. post请求方式
请求报文

在 HTTP 请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，这些数据和信息要遵守 规定好的格式

请求参数的格式

  1. 当请求头为 application/x-www-form-urlencoded
<body>
	<p>
		<input type="text" id="username">
	</p>
	<p>
		<input type="text" id="age">
	</p>
	<p>
		<input type="button" value="提交" id="btn">
	</p>
	<script type="text/javascript">
		// 获取按钮元素
		var btn = document.getElementById('btn');
		// 获取姓名文本框
		var username = document.getElementById('username');
		// 获取年龄文本框
		var age = document.getElementById('age');
		// 为按钮添加点击事件
		btn.onclick = function () {
			// 创建ajax对象
			var xhr = new XMLHttpRequest();
			// 获取用户在文本框中输入的值
			var nameValue = username.value;
			var ageValue = age.value;
			// 拼接请求参数
			var params = 'username='+ nameValue +'&age=' + ageValue;
			// 配置ajax对象
			xhr.open('post', 'http://localhost:3000/post');
			// 设置请求参数格式的类型（post请求  传递参数时必须要设置）
			xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			// 这是urlencoded 服务器也要用urlencoded来接收
			// 发送请求  必须把params放在其中,把请求内容放在请求体中
			xhr.send(params);
			// 获取服务器端响应的数据
			xhr.onload = function () {
				console.log(xhr.responseText)
			}
		}
	</script>
</body>

//服务器解析方式
app.use(bodyParser.urlencoded());
app.post('/post', (req, res) => {
	res.send(req.body);
});
  1. 当请求头为 application/json
<script type="text/javascript">
		// 1.创建ajax对象
		var xhr = new XMLHttpRequest();
		// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
		// 1)请求方式 2)请求地址
		xhr.open('post', 'http://localhost:3000/json');
		// 通过请求头告诉服务器端客户端向服务器端传递的请求参数的格式是什么
		xhr.setRequestHeader('Content-Type', 'application/json');
		// JSON.stringify() 将json对象转换为json字符串
		// 3.发送请求  
		xhr.send(JSON.stringify({name: 'lisi', age:50}));
		// 4.获取服务器端响应到客户端的数据
		xhr.onload = function (){
			console.log(xhr.responseText)
		}
	</script>

//当请求头为json时的解析
app.use(bodyParser.json());
app.post('/json', (req, res) => {
	res.send(req.body);
});

注意：get请求是不能提交 json 对象数据格式的，传统网站的表单提交也是不支持 json 对象数据格式的。

获取服务器端的响应的另一种方式

Ajax 状态码

在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一 个数值，这个数值就是ajax状态码。

  • 0：请求未初始化(还没有调用open())
  • 1：请求已经建立，但是还没有发送(还没有调用send())
  • 2：请求已经发送
  • 3：请求正在处理中，通常响应中已经有部分数据可以用了
  • 4：响应已经完成，可以获取并使用服务器的响应了

xhr.readyState // 获取Ajax 状态码

onreadystatechange 事件

  • 当 Ajax 状态码发生变化时将自动触发该事件

  • 在事件处理函数中可以获取 Ajax 状态码并对其进行判断，当状态码为 4 时就可以通过 xhr.responseText 获取服务 器端的响应数据了.

// 当Ajax状态码发生变化时 
xhr.onreadystatechange = function () { 
		// 判断当Ajax状态码为4时 
		if (xhr.readyState == 4) { 
		// 获取服务器端的响应数据 
		console.log(xhr.responseText); 
	} 
}
两种获取服务器端响应方式的区别
区别描述onload事件onreadystatechange事件
是否兼容IE低版本不兼容兼容
是否需要判断ajax状态码不需要需要
被调用次数一次多次
执行效率高较低
	<script type="text/javascript">
		var xhr = new XMLHttpRequest();
		// 0 已经创建了ajax对象 但是还没有对ajax对象进行配置
		console.log(xhr.readyState);
		xhr.open('get', 'http://localhost:3000/readystate');
		// 1 已经对ajax对象进行配置 但是还没有发送请求
		console.log(xhr.readyState);

		// 当ajax状态码发生变化的时候出发
		xhr.onreadystatechange = function() {
			// 2 请求已经发送了
			// 3 已经接收到服务器端的部分数据了
			// 4 服务器端的响应数据已经接收完成
			console.log(xhr.readyState);
			// 对ajax状态码进行判断 如果状态码的值为4就代表数据已经接收完成了
			if (xhr.readyState == 4) {
				console.log(xhr.responseText);
			}
		} 
		xhr.send();
	</script>

Ajax 错误处理

  1. 网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。
    可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取http状态码

  2. 网络畅通，服务器端没有接收到请求，返回404状态码。
    检查请求地址是否错误。

  3. 网络畅通，服务器端能接收到请求，服务器端返回500状态码。
    服务器端错误，找后端程序员进行沟通。

  4. 网络中断，请求无法发送到服务器端。
    会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理

<body>
	<button id="btn">发送Ajax请求</button>
	<script type="text/javascript">
		var btn = document.getElementById('btn');

		btn.onclick = function () {
			// 1.创建ajax对象
			var xhr = new XMLHttpRequest();
			// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
			// 1)请求方式 2)请求地址
			xhr.open('get', 'http://localhost:3000/error');
			// 3.发送请求
			xhr.send();
			// 4.获取服务器端响应到客户端的数据
			xhr.onload = function (){
				// xhr.status 获取http状态码
				console.log(xhr.responseText);

				if (xhr.status == 400) {
					alert('请求出错')
				}
			}
			// 当网络中断时会触发onerrr事件
			xhr.onerror = function () {
				alert('网络中断, 无法发送Ajax请求')
			}
		}
		// Ajax状态码: 表示Ajax请求的过程状态 ajax对象返回的
		// Http状态码: 表示请求的处理结果 是服务器端返回的
	</script>
</body>

app.get('/error', (req, res) => {
	//console.log(abc);
	res.status(400).send('not ok');
});

低版本 IE 浏览器的缓存问题

问题：在低版本的 IE 浏览器中，Ajax 请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请 求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了，客户端依然 拿到的是缓存中的旧数据。

解决方案：在请求地址的后面加请求参数，保证每一次请求中的请求参数的值不相同。

xhr.open('get', 'http://www.example.com?t=' + Math.random());

<body>
	<button id="btn">发送Ajax请求</button>
	<script type="text/javascript">
		var btn = document.getElementById('btn');
		btn.onclick = function () {
			// 1.创建ajax对象
			var xhr = new XMLHttpRequest();
			// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
			// 1)请求方式 2)请求地址
			xhr.open('get', 'http://localhost:3000/cache?t=' + Math.random());
			// 3.发送请求
			xhr.send();
			// 4.获取服务器端响应到客户端的数据
			xhr.onreadystatechange = function (){
				if (xhr.readyState == 4 && xhr.status == 200) {
					alert(xhr.responseText);
				}
			}	
		}
	</script>
</body>

app.get('/cache', (req, res) => {
	fs.readFile('./test.txt', (err, result) => {
		res.send(result);
	});
});

Ajax 封装

问题：发送一次请求代码过多，发送多次请求代码冗余且重复
解决方案：将请求代码封装到函数中，发请求时调用函数即可

<script type="text/javascript">
		function ajax (options) {
			// 存储的是默认值
			var defaults = {
				type: 'get',
				url: '',
				data: {},
				header: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				success: function () {},
				error: function () {}
			};

			// 使用options对象中的属性覆盖defaults对象中的属性
			Object.assign(defaults, options);

			// 创建ajax对象
			var xhr = new XMLHttpRequest();
			// 拼接请求参数的变量
			var params = '';
			// 循环用户传递进来的对象格式参数
			for (var attr in defaults.data) {
				// 将参数转换为字符串格式
				params += attr + '=' + defaults.data[attr] + '&';
			}
			// 将参数最后面的&截取掉 
			// 将截取的结果重新赋值给params变量
			params = params.substr(0, params.length - 1);

			// 判断请求方式
			if (defaults.type == 'get') {
				defaults.url = defaults.url + '?' + params;
			}

			/*
				{
					name: 'zhangsan',
					age: 20
				}

				name=zhangsan&age=20

			 */

			// 配置ajax对象
			xhr.open(defaults.type, defaults.url);
			// 如果请求方式为post
			if (defaults.type == 'post') {
				// 用户希望的向服务器端传递的请求参数的类型
				var contentType = defaults.header['Content-Type']
				// 设置请求参数格式的类型
				xhr.setRequestHeader('Content-Type', contentType);
				// 判断用户希望的请求参数格式的类型
				// 如果类型为json
				if (contentType == 'application/json') {
					// 向服务器端传递json数据格式的参数
					xhr.send(JSON.stringify(defaults.data))
				}else {
					// 向服务器端传递普通类型的请求参数
					xhr.send(params);
				}

			}else {
				// 发送请求
				xhr.send();
			}
			// 监听xhr对象下面的onload事件
			// 当xhr对象接收完响应数据后触发
			xhr.onload = function () {

				// xhr.getResponseHeader()
				// 获取响应头中的数据
				var contentType = xhr.getResponseHeader('Content-Type');
				// 服务器端返回的数据
				var responseText = xhr.responseText;

				// 如果响应类型中包含applicaition/json
				if (contentType.includes('application/json')) {
					// 将json字符串转换为json对象
					responseText = JSON.parse(responseText)
				}

				// 当http状态码等于200的时候
				if (xhr.status == 200) {
					// 请求成功 调用处理成功情况的函数
					defaults.success(responseText);
				}else {
					// 请求失败 调用处理失败情况的函数
					defaults.error(responseText);
				}
			}
		}

		ajax({
			type: 'post',
			// 请求地址
			url: 'http://localhost:3000/responseData',
			success: function (data) {
				console.log('这里是success函数');
				console.log(data)
			}
		})

		/*
			请求参数要考虑的问题

				1.请求参数位置的问题

					将请求参数传递到ajax函数内部, 在函数内部根据请求方式的不同将请求参数放置在不同的位置

					get 放在请求地址的后面

					post 放在send方法中

				2.请求参数格式的问题

					application/x-www-form-urlencoded

						参数名称=参数值&参数名称=参数值

						name=zhangsan&age=20

					application/json

						{name: 'zhangsan', age: 20}

					1.传递对象数据类型对于函数的调用者更加友好
					2.在函数内部对象数据类型转换为字符串数据类型更加方便
		*/
	</script>

有规定 客户端传递数据给服务端必须是字符串格式
服务端返回数据给客户端最好用json对象，便于使用

泊一
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax调用中ie缓存问题解决方法
12-09
在一些预封装的Ajax库中，这可能需要通过特定的API方法传递此设置，如`sendPost`或`sendGet`。 对于开发者来说，理解这些缓存机制并灵活运用解决方法至关重要，因为正确处理缓存能够确保用户总是获取到最新的数据，...
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
11-24
在本篇文章中，我们将探讨如何对 jQuery 的 AJAX 进行封装，并实现一个简单的缓存代理组件——AjaxCache。 首先，我们需要了解如何封装 jQuery 的 AJAX。以下是一个简单的示例： ```javascript define(function ...
ajax返回一直进入error_可以返回数据的Ajax封装
weixin_39943868的博客
12-20 81
/** * @params queryParams:参数 serverName:服务名方法名 async：是否异步 * @return resultData：返回请求到的数据 */ function postAjax(queryParams,serverName,async) { var resultData = new Object(); var params = jQue...
Ajax封装
weixin_44845533的博客
08-10 373
附上完整代码 function ajax(json){ var xhr = new XMLHttpRequest(); var method = json.method; var url = json.url; var success = json.success; var error = json.error; var data = json.da...
封装ajax方法(统一处理登录超时异常)
feiz3020的专栏
07-28 1549
在项目中使用普遍使用了ajax作为请求，如果当登录超时时,需要弹出登录窗口或者跑转到登录页面 重新验证,如果每个方法都判断一遍是个很头疼的事情，为此对ajax 进行了封装。使用方法跟原生ajax一样。 common.js (function ($) { //初始化绑定默认的属性 $.ajaxDefaults = $.ajaxDefaults || {}; $.
ajax发生错误,Ajax犯的错误处理方法
weixin_32769015的博客
08-05 1892
1， ajax 发送请求时状态判断 if else 语句问题。var xhr = new XMLHttpRequest();xhr.open("get",strUrl);xhr.onreadystatechange = function(){if(xhr.readyState === 4){if(xhr.status ===200){console.log(xhr.responseText);}}...
jq中ajax处理错误,jQuery AJAX错误处理(HTTP状态代码)
weixin_36210213的博客
08-05 803
我们有一个API，它使用适当的HTTP状态代码进行错误，并使用JSON编码的响应和适当的Content-Type标头进行响应。我的情况是，当遇到HTTP错误状态时，jQuery.ajax()会触发错误回调，而不是成功回调，所以即使我们有一个可理解的JSON响应，我们也不得不诉诸于此：$.ajax({// ...success: function(response) {if (response.su...
JavaWeb基础8——Filter,Listener,Ajax,Axios,JSON
vincewm的博客
08-05 3383
Filter过滤器、Listener监听器、AJAX、 同步、异步优点和使用场景、Axios异步框架、JSON、js和JSON转换、案例，Axios + JSON 品牌列表查询和添加
Ajax基础详解教程(二)
12-10
在上篇文章给大家介绍了Ajax基础详解教程(一)，讲到Ajax中open方法的第三个参数异步和同步的问题，今天呢，就来继续往下唠，先接着上回的代码 var oBtn = document.getElementById('btn'); oBtn.onclick = ...
react中的ajax封装实例详解
11-29
如果状态码在200-299之间，说明请求成功，调用`success`回调并将解析后的响应文本作为参数传递。否则，调用`error`回调。 9. **响应文本处理**：定义`configResText`函数用于根据`resTextType`处理响应文本。如果是...
ajax返回成功却进入了error
热门推荐
Teler的博客
05-16 1万+
$.ajax({ type: "POST", url: "", data: { }, dataType: "json",//注意这里 success: function(data){ console.log(data) }, error:func...
Ajax、art-template模板引擎、JSONP
qq_42522346的博客
09-26 310
1.Ajax的好处： 异步请求： AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 2.创建一个第一个Ajax程序： 如果想要Ajax请求发送成功，必须创建一个服务器，并且提供一个接口。 1.创建服务器 2.在前端页面编写Ajax代码，发送请求 1.创建Ajax的核心对象 var xhr=new XMLHttpRequest() 2.设...
关于ajax的url,data,success,error封装方法。（易与后期修改维护）
shi_Avicii的博客
01-24 1821
var hostName = "http://url";//接口公共的ip或者域名 var path={ "login":hostName + "/ace-app/user/login",//登录接口 "定义名称":hostName+"后缀名",//某某接口 }; function ajax(url,data,success,error){ $.ajax({ cache: false,...
Ajax的4种错误处理
weixin_42321619的博客
08-19 2004
1.网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。（用户给服务器发送参数，参数不符合要求，所以服务器返回非200状态码） 可以判断服务器返回的状态码，分别进行处理。 xhr.status //获取http状态码 //路由 app.get('/error', (req, res) => { res.status(400).send('not ok') }) //页面 <body> <button id="btn">发送aa<
spark--练习1
最新发布
很开心你能来~
08-07 228
sparksql练习
Lombok的坑：VUE通过ajax.post请求向spring后台传参，部分属性接收不到。
Zhu_daye的博客
08-07 360
实体类定义：VUE代码：JAVA代码：因此@RequestBody无法完成自动映射，才导致bAppId的取值为null。一句话解释就是Lombook的@Data注解和Spring的Jackson对于get/set的生成方式不同，Jackson是setbAppId，Lombook是setBAppId，参数自动映射不到导致。1、重新bAppId的get/set方法2、利用@JsonProperty(value = “bAppId”)注解，告诉Jackson在反序列化时给属性重新命名。
JavaWeb之servlet关于Ajax实现前后端分离
2301_76908023的博客
08-04 1198
JavaWeb之servlet关于Ajax实现前后端分离的简单了解，介绍，简单应用和实际应用
简单的后端生成令牌，前端获取，然后ajax设置header标头，后端进行对比
cdcdhj的博客
08-07 131
在 Web 应用中实现令牌失效（Token Expiration）通常涉及到两个方面：客户端的令牌使用和服务器端的令牌验证。
Ajax技术深度解析 - AJAX_in_Action
1. **基础概念**：介绍AJAX的工作原理，包括XMLHttpRequest对象、JavaScript事件处理、DOM操作等基础知识，帮助读者理解AJAX如何与服务器进行异步通信。 2. **AJAX工具和库**：讨论了如jQuery、Prototype、Dojo等...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值