Ajax学习（1）

最新推荐文章于 2024-07-24 12:26:58 发布

ruiy

最新推荐文章于 2024-07-24 12:26:58 发布

阅读量246

点赞数

分类专栏： Ajax 文章标签： Ajax web http

本文链接：https://blog.csdn.net/b2997215859/article/details/50935585

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

以下为总结，需要详细学习ajax的同学，由于无法上传文件，若想下载燕十八的笔记，请移步https://github.com/2997215859/AjaxLeaning/blob/master/Ajax%E5%BD%BB%E5%BA%95%E7%A0%94%E7%A9%B6%E7%AC%94%E8%AE%B0.docx

1、ajax全称是Asynchronous javascript and xml

2、ajax实现的效果是“页面不刷新”,比如在一个投票页面中，点击投票，然后投票数自动加1

3、ajax的实质是发送http请求，然后接受响应，因此在很多年前，即使没有ajax也能实现所谓的“伪ajax”效果，只要最后发送http的请求即可，因此使用img或者frame等其他方法也可以实现相同的效果

4、实现ajax的过程主要是

①制造对象：由于IE6、7、8的尿性，因此制造http对象的时候要考虑到兼容性

function createXHR() {
			//制造xhr
			if(window.XMLHttpRequest){
				return new XMLHttpRequest();
			}else{
				return new ActiveXObject("Microsoft.XMLHTTP");
			}
		}

②打开连接

xhr.open("post","./07-ajaxreg.php",true);

建议在打开连接之后，同时绑定监听状态变化的函数

xhr.onreadystatechange = function(){
				//绑定状态变化，建议在open之后就绑定
				if(this.readyState==4 && this.status==200){
					//alert(this.responseText);

<span style="white-space:pre">					</span>//干你想干的事情
				}

③发送数据

//如果是POST方式，则还需要在请求前设定Content-Type

//xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xhr.send("username="+username+"&email="+"email");

以下是整个过程的源代码（POST方式，如果是GET方式，需要去掉content-type的设置，以及更改open打开连接的方式）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test2</title>
	<script type="text/javascript">
		function createXHR() {
			//制造xhr
			if(window.XMLHttpRequest){
				return new XMLHttpRequest();
			}else{
				return new ActiveXObject();
			}
		}
		function ajaxReg() {
			/*1、收集表单的数据
			2、打开连接
			3、发送数据
			4、监听回调*/
			//0、制造xhr
			var xhr = new createXHR();
			//1、打开异步连接
			xhr.open("post","./07-ajaxreg.php",true);
			xhr.onreadystatechange = function(){
				//绑定状态变化，建议在open之后就绑定
				if(this.readyState==4 && this.status==200){
					alert(this.responseText);
				}
			}
			//2、手机表单数据
			var username = document.getElementsByName("username")[0].value;
			var email = document.getElementsByName("email")[0].value;
			//3、发送数据
			//alert("username="+username+"&email="+email);
			//在发送数据之前还需要设置content-type
			xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
			xhr.send("username="+username+"&email="+"email");

			return true;
		}
	</script>
</head>
<body>
	<div id="regres"></div>
	<form action="07-ajaxreg.php" method="post" target="regzon" οnsubmit="return ajaxReg()">
		<p>用户名<input type="text" name="username"></p>
		<p>邮件地址<input type="text" name="email"></p>
		<p><input type="submit" name="submit"></input></p>
	</form>
	<iframe name="regzon"></iframe>
</body>
</html>

以下是测试的后台文件

<span style="font-family: Arial, Helvetica, sans-serif;"><?php </span>

<span style="font-family:Arial, Helvetica, sans-serif;">/*filename:07-ajaxreg.php*/</span>

print_r($_POST);
 ?>

ruiy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax学习（1）

以下为总结，需要详细学习ajax的同学，由于无法上传文件，若想下载燕十八的笔记，请移步文中的github地址
复制链接

扫一扫

专栏目录