Ajax案例笔记_ajax的app.use-CSDN博客

本文链接：https://blog.csdn.net/weixin_55107526/article/details/116839798

这篇博客详细记录了原生Ajax的使用，包括GET请求的发送、JSON数据处理、错误处理、POST请求参数传递、避免缓存、JSON格式请求参数的发送以及Ajax函数的封装。通过示例代码和步骤说明，帮助读者掌握Ajax的核心应用。

摘要由CSDN通过智能技术生成

原生ajax

//1.创建对象优化
var xhr = new XMLHttpRequest();
//2.给对象添加属性和方法
xhr.onreadystatechange = function(){
   
console.log(xhr.readyState); //请求状态码  http  1-4
	if(xhr.readyState == 4){
   
	console.log(xhr.status);
	 if(xhr.status == 200){
   
	 console.log(xhr.responseText);// 返回响应的内容
		}else{
   
			alert("响应失败");
			}
		}
	}
//3.open方法设请求方式和地址
xhr.open("get","1.txt")
		
//4.发送请求
xhr.send();

02传递get请求函数

<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}`;




// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求 
// 1)请求方式 2)请求地址 注意get后的?要写，表示查询。（GET模式的窗体参数，以 “?”字符为起点，
//每个参数以“&”隔开，再以“=”分开参数名称与数据--URL）
xhr.open('get', 'http://localhost:3000/get?' + params);

    // 发送请求 
	xhr.send();
	// 获取服务器端响应的数据 
	xhr.onload = function() {
   
	console.log(xhr.responseText)
	}

}
</script>

03json数据

<script type="text/javascript">
			//获取按钮元素
			var btn = document.getElementById('btn');
			
			//获取姓名按钮文本框
			var username = document.getElementById('username');
			//获取年龄文本框
			var age = document.getElementById('age');
			
			
			//为按钮添加点击事件
			btn.onclick = fun