AJAX前后台交互

最新推荐文章于 2023-05-22 14:44:28 发布

LB14789

最新推荐文章于 2023-05-22 14:44:28 发布

阅读量237

点赞数

分类专栏： AJAX

本文链接：https://blog.csdn.net/LB14789/article/details/82749003

版权

AJAX 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<head>
	<meta charset="UTF-8">
	<title></title>
</head>

<body>
	<form id="oneForm">
		用户名:<input type="text" id="un" />
		<br /> 密码:
		<input type="text" id="ps" />
		<br />
		<!--自带的submit按钮
注意:需要取消该按钮的默认行为

–>

	</p>
</body>
<script type="text/javascript">
	/*
	 * ajax: 全称Asynchronous JavaScript and XML;
	 * 作用:异步,局部刷新页面
	 * 异步:在数据请求时,不会影响页面的其他操作,类似于setinterval中函数的执行
	 * 
	 * 
	 * 
	 * 1,异步请求方式:客户端向服务请求数据,不需要服务器向我们返回数据,在这个过程中主线程可以继续处理其他操作,当后台将数据返回后,再重新处理对应的数据,
	 * 2,同步请求数据(使用较少):客户端向服务请求数据,必须等待服务器向我们返回数据,然后再做页面处理
	 * 
	 * 
	 * ajax:使用场景
	 * 1,电商类网站,刚开始请求部分数据,当页面上滚时,在请求数据,而且页面此时没有刷新
	 * 2,每隔一段时间,发起一个 ajax 请求,实现数据的实时更新(股票)
	 * 
	 */
	//获取页面元素
	var oneForm = document.getElementById("oneForm");
	var userN = document.getElementById("un");
	var userP = document.getElementById("ps");
	var postBtn = document.getElementById("postBtn");
	var pMes = document.getElementById("message");
	//get请求
	oneForm.onsubmit = function() {
		//1,创建 请求对象
		if(window.XMLHttpRequest) {
			//ie7+,及主流浏览器
			var xhr = new XMLHttpRequest();

		} else {
			//ie5,6
			var xhr = ActiveXObject("Microsoft.XMLHttp");
		}
		/*
		 * 同步方式
		 */
		//2,启动请求
		/*
		 * open(请求方式,请求地址URl,是否异步)
		 * 作用:设置XHR的请求方式和请求地址
		 * 默认异步
		 * 注意:open()方法只是一个请求以备发送,并不是真正的发送请求
		 */
		xhr.open("GET", "http://127.0.0.1/php0706/AJAX/AJAX.php?userName=" + userN.value + "userPass=" + userP.value, false);
		//3,发送请求
		//send:该方法接受一个参数,参数为要传递的给后台的数据,如果没有数据要传递,则传入null(建议不要省略,有可能会报错)
		xhr.send(null);
		//4,请求成功后
		console.log(xhr.status);
		console.log(xhr.statusText);
		/*
		 * status:http的状态码
		 * 1xx:信息类,收到请求正在处理
		 * 2xx:成功类,成功处理完成
		 * 3xx:重定向类,请求地址发生变化等
		 * 4xx:客户端错误
		 * 5xx:服务器错误,识别不出,不能处理
		 * 
		 * statusText 的状态码信息
		 */
		if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
			//请求成功
			pMes.innerHTML = xhr.responseText;
			/*
			 * responseText:作为响应主体被返回的文本
			 * responseXML:如果响应的内容类型为text/XML或application/XML格式,这个responseXML 属性中存储的是对应的XMLDOM文档
			 */
		} else {
			//请求失败
			pMes.innerHTML = "请求失败";
		}

		//取消默认行为
		return false;
	}
	/*
	 * 异步方式
	 */
	//1,创建请求对象
	oneForm.onsubmit = function() {
		if(window.XMLHttpRequest) {
			//IE7+,以及主浏览器
			var xhr = new XMLHttpRequest();
		} else {
			//IE 5,6
			var xhr = ActiveXObject("Microsoft.XMLHttP");
		}
		//2,监听
		xhr.onreadystatechange = function() {
			console.log(xhr.readyState);
			/*
			 * xhr.readyState:xhr请求对象的请求状态
			 * 1,请求建立,但是没有发出去(没有执行send()方法)
			 * 2,请求已经发送,正在处理
			 * 3,请求正在处理,并且返回了部分数据
			 * 4,请求完成,获取到全部数据
			 */

			if(xhr.readyState == 4) {
				//判断请求是否成功
				if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
					//请求成功
					pMes.innerHTML = xhr.responseText;
				} else {
					//请求失败
					pMes.innerHTML = "请求失败";
				}
			}
		}
		//3,启动请求
		xhr.open("GET", "http://127.0.0.1/PHP0706/Ajax/Ajax.php?userName=" + userN.value + "&userPass=" + userP.value);
		//4,发送请求
		xhr.send(null);
		//取消默认行为
		return false;
	}
	//post请求
	postBtn.onclick = function() {
		//1,
		if(window.XMLHttpRequest) {
			//IE7+,以及主浏览器
			var xhr = new XMLHttpRequest();
		} else {
			//IE 5,6
			var xhr = ActiveXObject("Microsoft.XMLHttP");
		}
		//2
		//2,监听
		xhr.onreadystatechange = function() {
			console.log(xhr.readyState);
			/*
			 * xhr.readyState:xhr请求对象的请求状态
			 * 1,请求建立,但是没有发出去(没有执行send()方法)
			 * 2,请求已经发送,正在处理
			 * 3,请求正在处理,并且返回了部分数据
			 * 4,请求完成,获取到全部数据
			 */

			if(xhr.readyState == 4) {
				//判断请求是否成功
				if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
					//请求成功
					pMes.innerHTML = xhr.responseText;
				} else {
					//请求失败
					pMes.innerHTML = "请求失败";
				}
			}
		}
		//3,启动请求
		xhr.open("POST", "http://127.0.0.1/PHP0706/Ajax/Ajax.php");
		//4请求头
		xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");

		//5,发送请求
		xhr.send("userName=" + userN.value + "&userPass=" + userP.value);

	}
</script>

需要创建一个PHP文件

<?php echo "你好"; ?>

点击get请求运行结果为:
在这里插入图片描述

LB14789

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX前后台交互

&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &lt;form id="oneForm"&gt; 用户名:&lt;input type="text" id="
复制链接

扫一扫