ajax初识ajax 发送get、post请求

最新推荐文章于 2023-08-02 19:05:32 发布

乔木晨子

最新推荐文章于 2023-08-02 19:05:32 发布

阅读量121

点赞数

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/qq_41361162/article/details/102947703

版权

ajax 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

1.post请求写法（建议写法）。看 function checkName()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>123</title>
</head>
<body>
	<h2>登录</h2>
	<form action="reg" enctype="application/x-www-form-urlencoded">
			名 <input name="name" onblur="checkName()" id="name"/>
			  <span id="check"></span><br><br>
			密<input type="password" name="pwd"/><br><br>
			<input type="submit" value="注册"/>
	</form>
	<!-- js代码 -->
	<script type="text/javascript">
		//获得浏览器对象的方法
		function getXhr(){
			var xhr = null;
			if(window.XMLHttpRequest){
				xhr = new XMLHttpRequest();//目前都是这个对象
			}else{
				xhr = ActiveXObject('Microsoft.XMLHTTP');//需不需要new对象？？？？？
			}
			return xhr;
		}
		
		function checkName(){
			//调用方法获得对象
			var xhr = getXhr();
			//得到节点元素节点，在上面表单里面
			var name = document.getElementById("name").value;
			//得到节点元素节点
			var span = document.getElementById("check");
			
			//设置节点元素属性
			span.innerHTML="loading...";//设置显示的内容
			span.style.color="orange";
			//请求方式 和 请求命令
			xhr.open ("post","checkName");
			//xhr.setRequestHeader必须写在open和send之间
			xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
			//传的参数名字和参数的值
			xhr.send('name='+name);
			//给状态码赋予方法，只有是有效的状态码才运行下面代码
			xhr.onreadystatechange=function(){
				//请求类型正确且状态正确
				if(xhr.readyState==4&&xhr.status==200){
					var message = xhr.responseText;
					if(message=="ok"){
						span.innerHTML="用户可以使用";
						span.style.color="green";
					}else if(message=="no"){
						span.innerHTML="用户名被占用";
						span.style.color="orange";
					}else{
						span.innerHTML="不能为空";
						span.style.color="red";
					}
				}
			}
		}
	</script>
</body>
</html>

2. get请求写法。看 function checkName()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>123</title>
</head>
<body>
	<h2>登录</h2>
	<form action="reg" enctype="application/x-www-form-urlencoded">
			名 <input name="name" onblur="checkName()" id="name"/>
			  <span id="check"></span><br><br>
			密<input type="password" name="pwd"/><br><br>
			<input type="submit" value="注册"/>
	</form>
	<script type="text/javascript">
		
		//获得浏览器对象的方法
		function getXhr(){
			var xhr = null;
			//获取浏览器对象
			if(window.XMLHttpRequest){
				//目前都是这个对象
				xhr = new XMLHttpRequest();
			}else{
				//古老的浏览器对象，目前不用
				xhr = ActiveXObject('Microsoft.XMLHTTP');
			}
			return xhr;
		}
		
		function checkName(){
			//调用方法获取ajax对象
			var xhr = getXhr();
			//获取上面的的节点
			var name = document.getElementById("name").value;
			var span = document.getElementById("check");
			
			span.innerHTML="loading...";
			span.style.color="yello";
			//准备请求
			xhr.open ('get','checkName?name='+name+'&'+Math.random());
			//发送请求
			xhr.send(null);
			//设置回调函数
			xhr.onreadystatechange=function(){
				//请求类型正确且状态正确
				if(xhr.readyState==4&&xhr.status==200){
					var message = xhr.responseText;
					if(message=="ok"){
						span.innerHTML="用户可以使用";
						span.style.color="green";
					}else if(message=="no"){
						span.innerHTML="用户名被占用";
						span.style.color="orange";
					}else{
						span.innerHTML="不能为空";
						span.style.color="red";
					}
				}
			}
		}
	</script>
</body>
</html>

乔木晨子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax初识ajax 发送get、post请求

1.post请求写法<!DOCTYPE html><html><head><meta charset="UTF-8"><title>123</title></head><body> <h2>登录</h2> <form action="reg" enctyp...
复制链接

扫一扫