Ajax函数封装-优快云博客

本文链接：https://blog.youkuaiyun.com/xieixnxia/article/details/120152203

本文详细介绍了如何使用JavaScript的AJAX函数发送POST请求到本地服务器3000端口，成功后处理响应数据。重点在于展示了如何设置请求头、构造参数和处理JSON响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<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);
			var xhr = new XMLHttpRequest();
			var params = '';
			//对象类型使用for in 循环
			for(var attr in defaults.data){
				params += attr + '=' + defaults.data[attr] + '&';
			}
			params = params.substr(0, params.length-1);//截取最后&
		    //判断请求方式
			if(defaults.type == 'get'){
				defaults.url = defaults.url + '?' + params;
			}
			
			xhr.open(defaults.type,defaults.url);
			if(defaults.type == 'post'){
				var contentType = defaults.header['Content-Type'];
				//post需设置请求参数类型
				xhr.setRequestHeader('Content-Type',contentType);
				if(contentType == 'application/json'){
					xhr.send(JSON.stringify(defaults.data));
				}else{
					xhr.send(params);
				}
				
			}else{
				xhr.send();
			}
			
			xhr.onload = function () {

				//xhr.getResponseHeader()
				//获取响应头中数据

				var contentType = xhr.getResponseHeader('Content-Type');

				var responseText = xhr.responseText;
				if (contentType.includes('application/json')) {
					//将json字符串转换为json对象
					responseText = JSON.parse(responseText);
				}

				



				if (xhr.status == 200){
					defaults.success(responseText, xhr);
				} else{
					defaults.error(responseText, xhr);

				}
				

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

			}


		})
	</script>

</body>
</html>