ajax应用入门——demo制作（2）

最新推荐文章于 2024-07-18 17:39:42 发布

沈志勇说

最新推荐文章于 2024-07-18 17:39:42 发布

阅读量336

点赞数 1

分类专栏： ajax

本文链接：https://blog.csdn.net/u011456552/article/details/52442019

版权

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在服务的文件夹下面，新建一个test.txt文件,然后随便在里面写点东西。

然后打开自己的编辑器，输入代码！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>

		function loadXMLDoc(){
			var xmlhttp = null;                             
			//创建ajax对象
			// 由于ie5 6不支持XMLHttp，但是ie的active插件可以支持
			// 为了兼容做了一个判断
			if(window.XMLHttpRequest){											//这里必须要window对象
				xmlhttp = new XMLHttpRequest();
			}else{
				xmlhttp = new ActiveXObject("Microsoft.XMLHttp");
			}
			//发送ajax请求
			xmlhttp.open("get","test.txt","true");
			xmlhttp.send();

			xmlhttp.onreadystatechange=function(){
				 
				// readyState：ajax工作状态
				// responseText:ajax请求返回的内容
				if(xmlhttp.readyState==4){
					if(xmlhttp.status == 200){
						document.getElementById('myDiv').innerHTML=xmlhttp.responseText;
					}else{
						alert('Err:'+xmlhttp.status);
					}
				}
			}
		}
	</script>
</head>
<body>
	<div id="myDiv"><h2>我将被改变</h2></div>
	<button type="button" οnclick="loadXMLDoc()">通过ajax改变内容</button>
</body>
</html>

简单说一下代码组成：

首先，由于ajax不支持低版本的IE浏览器，我们可以通过active插件来达到自己的想要的效果。就加了一个判断。(ps:判断XMLHttpRequest属性的时候，必须加上window对象，否则IE不兼容，直接报错！)

第二部，好比打开浏览器器输入网址一样。open方法里面数据分别为提交方式提交地址是否异步

提交方式有2种 get (默认get) post。get 数据会放到url后面用&进行连接数据不能过长。 post:理论上面无限制，利用请求头发送请求的。

提交数据的地址

默认是true 异步加载！异步就是非阻塞后面的代码可以继续执行同步就是阻塞模式后面的代码不能执行。

第三部发送请求

第四部等待服务器返回的内容。

onreadystatechange状态值发生改变的时候触发。

readyState:表示ajax的状态。总共5个值 0初始化 1 载入 2载入完成 3解析返回内容 4 完成解析

status:表示服务器状态码 404失败 200成功

responseText 表示返回的内容。还有respondXML