Ajax请求

最新推荐文章于 2025-03-17 00:25:29 发布

Novice programmer

最新推荐文章于 2025-03-17 00:25:29 发布

阅读量124

点赞数

文章标签： ajax

本文链接：https://blog.youkuaiyun.com/admin_0820/article/details/116159935

版权

Ajax是一种通过JavaScript异步请求数据并局部更新页面的技术，避免了页面刷新。原生实现包括创建XMLHttpRequest对象、open方法、send方法以及onreadystatechange事件处理。jQuery对Ajax进行了封装，提供更简洁的API，如url、data、success和dataType等。jQuery的$.getJSON方便进行GET请求和JSON数据处理，但需注意后台返回数据类型与指定dataType的匹配，否则将触发error回调。

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

Ajax请求

Ajax即“Asynchronous Javascript And Xml”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

Ajax是一种浏览器通过js异步发起请求，局部更新页面的技术。

Ajax由前端来实现

通过原生的js来实现Ajax请求

1、首先创建XMLHttpRequest对象

var xmlHttpRequest=new XMLHttpRequest();

2、调用open方法设置请求信息及参数

xmlHttpRequest.open(method,Url,true/false)；

其中method是请求的方式：GET/POST
Url是请求的地址
true/false ：表示异步或者同步

3、在send方法发送请求之前，先绑定onreadystatechange事件，处理请求完成后的操作（回调函数）

	xmlHttpRequest.onreadystatechange=function () {
		if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
			var jsonObj=JSON.parse(xmlHttpRequest.responseText);
			//把响应的数据显示在页面上
			document.getElementById("div01").innerHTML="编号："+jsonObj.id+" ,姓名："+jsonObj.name;
		}
	}

4、调用send()发送请求

完整代码：

		function ajaxRequest() {
				//1、我们首先要创建XMLHttpRequest
				var xmlHttpRequest=new XMLHttpRequest();
				//2、调用open方法设置请求参数
				xmlHttpRequest.open("GET","http://localhost:8080/json/ajaxServlet?action=javaScriptAjax",true);
				//3、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
				xmlHttpRequest.onreadystatechange=function () {
					if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
						alert("收到服务器返回的数据"+xmlHttpRequest.responseText);
						var jsonObj=JSON.parse(xmlHttpRequest.responseText);
						//把响应的数据显示在页面上
						document.getElementById("div01").innerHTML="编号："+jsonObj.id+" ,姓名："+jsonObj.name;
					}
				}
				//4、调用send方法发送请求
				xmlHttpRequest.send();
		}

Ajax请求的特点：

Ajax请求局部更新，浏览器的地址栏不会发生变化
局部更新不会舍弃原来页面的内容
异步的好处：当前功能的交互并不用影响其他功能的交互。不会出现当前功能正在交互，而其他功能无法使用的情况。

jQuery中的Ajax请求

jQuery中的Ajax请求是对原生js的Ajax请求的封装，操作更为便捷

$.ajax({
	url:"http://localhost:8080/json/ajaxServlet",
	data:{action:"jQueryAjax"},
	type:"GET",
	success:function (data) {
		//var jsonObj = JSON.parse(data);
		alert(data);
		$("#msg").text("编号："+data.id+" ,姓名："+data.name);
	},
	dataType:"json"
});

其中：