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

左手的ㄟ右手 2022-07-18 04:14 144阅读 0赞

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

![SouthEast][]

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

<!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:表示服务器[状态码][Link 1]  404失败 200成功

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

最后，将返回的内容显示到页面节点。

由于，返回的内容多种多样，下一章我会写一点关于返回内容的处理。

谢谢![微笑][smile.gif]

ps:忘记说了 如果用post方式的发送的请求的话，记得加上，设置请求头，设置编码格式。以后会用到。

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

[SouthEast]: /images/20220717/501047730ae94dd7af6f2fa8e85d81b1.png
[Link 1]: http://baike.baidu.com/link?url=vqQtCMw7ss2VkOtIO4nvVeNoeQeJF_b1ttkXbjODkBZ9AQ2WPSL7jCGjgM920FeAKbmG0wad8ZnnKDhXVthon_
[smile.gif]: /images/20220717/0cf1ac14bf944b9c9c6734bbe55fbc56.png