ajax介绍

最新推荐文章于 2024-05-18 21:57:13 发布

花果山美猴王女士

最新推荐文章于 2024-05-18 21:57:13 发布

阅读量205

点赞数 1

文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/weixin_54620953/article/details/126734248

版权

当当当~ 学习了一天，终于晚上有时间来总结今天的知识啦，今天我们学习了阿贾克斯ajax，嗯…… 我还是第一次听说这个阿贾克斯，感觉很新鲜，学的也比较认真，但是刚刚接触还是非常不熟练，特来此记录一下，也当督促自己啦！!

1.什么是Ajax

js提供的一种异步请求服务器的技术

传统的请求---同步，请求之后，浏览器要等待服务器响应

ajax请求---异步，请求之后，浏览器不需要等待服务器响应，继续可以做网页操作，响应什么时候回来，什么时候再处理，用户体验好

特点：页面局部刷新

1.2典型应用

谷歌地图---推广了ajax

百度搜索

注册时候的账号验证

2、js实现ajax

readyState的值0 1 2 3 4

0 - (未初始化的时候) 任何request对象新构造出来的时候readyState就为0

未准备好

1 - (设置初始状态, 并没有发送请求)request对象调用open方法readyState就变成了1

准备好了

2 - (发送完成) send方法执行完成的时候, 这个方法是异步方法,所以不能直接活的状态.需要监听事件, 事件名称为readystatechange

发送走了

3 - (等待解析状态的完成) 也是一个异步事件, 此时是在后台去处理

等待接收

4 - (解析处理完成) 后台接受数据并返回成功

接收完成

2.1get方式

//1、创建ajax对象-----request对象---XMLHttpRequest
var request = new XMLHttpRequest();
//通过ajax状态改变事件，设置回调函数(响应回来)
request.onreadystatechange = function() {
	if(request.status==200 && request.readyState == 4){
		//开始处理响应数据
		alert(request.responseText);
	}
}
//发送请求
request.open("get", "data.txt?sid=101" );
request.send();

2.2post方式

//创建ajax对象-----request对象---XMLHttpRequest
var request = new XMLHttpRequest();
//通过ajax状态改变事件，设置回调函数(响应回来)
request.onreadystatechange = function() {
	console.log(request.readyState);
	if(request.status==200 && request.readyState == 4){
		//开始处理响应数据
		alert(request.responseText);
	}
}
//发送请求
request.open("post", "data.txt" );
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
request.send();

3、jQuery实现ajax

$.ajax({

url:'',//请求的路径

data:'',//发送的数据

type:'',//请求的方式get、post

dataType:'',//响应的数据类型xml、html、text、json

success: function(res){//回调函数

//res响应的数据

}

})

3.1编号验证

$("#cid").blur(function() {
	//ajax验证账号是否可用
	$.ajax({
		url:'ClassSelectCid',
		data: 'cid='+this.value,
		type: "post",
		success: function(res) {
			//1账号存在  0不存在
			if(res == "1"){
				$("#msg_cid").text("×账号不可用或服务器异常").css("color","red")
			}else{
				$("#msg_cid").text("√账号可用").css("color","green")
			}
		}
	})
})

就是这种效果啦