Ajax学习笔记-入门笔记

发布时间：2020-12-16 01:43:39 所属栏目：百科来源：网络整理

导读：入门实例 !DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"htmlheadmetahttp-equiv="Content-Type"content="text/html;charset=UTF-8"titleInserttitlehere/titlescripttype="text/javascript"window.onload

入门实例

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Inserttitlehere</title>
<scripttype="text/javascript">
	window.onload=function(){
		//获取a结点，并未其添加onclick响应函数
		document.getElementsByTagName("a")[0].onclick=function(){
			varrequest=newXMLHttpRequest();
			//加上时间戳可以起到禁用缓存的效果
			varurl=this.href+"?time="+newDate();
			varmethod="GET";
			request.open(method,url);
			request.send(null);
			//为XMLHttpRequest对象添加onreadystatechange响应函数
			request.onreadystatechange=function(){
				//判断相应是否完成
				if(request.readyState==4){
					if(request.status==200||request.status==304){
					//当readyState为4的时候，responseText才可用
						alert(request.responseText);
					}elseif(request.status==404){
						alert("请求的页面不存在");
					}
				}
			}
			returnfalse;
		}
	}
</script>
</head>
<body>
	<ahref="helloAjax2.txt">helloAjax.txt</a>
</body>
</html>

发送POST请求

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Inserttitlehere</title>
<scripttype="text/javascript">
	window.onload=function(){
		//获取a结点，并未其添加onclick响应函数
		document.getElementsByTagName("a")[0].onclick=function(){
			varrequest=newXMLHttpRequest();
			//加上时间戳可以起到禁用缓存的效果
			varurl=this.href+"?time="+newDate();
			varmethod="POST";
			request.open(method,url);
			request.setRequestHeader("ContentType","application/x-www-form-urlencoded");
			request.send("name='umgsai'");//设置请求参数
			//为XMLHttpRequest对象添加onreadystatechange响应函数
			request.onreadystatechange=function(){
				//判断相应是否完成
				if(request.readyState==4){
					if(request.status==200||request.status==304){
						alert(request.responseText);
					}elseif(request.status==404){
						alert("请求的页面不存在");
					}
				}
			}
			returnfalse;
		}
	}
</script>
</head>
<body>
	<ahref="helloAjax2.txt">helloAjax.txt</a>
</body>
</html>

开发中多用JQuery，不用考虑浏览器的兼容性。

本文出自 “优赛工作室” 博客，请务必保留此出处http://www.52php.cn/article/p-rzjhsgku-qg.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!