使用Ajax进行数据请求-优快云博客

请选择火狐浏览器运行：

（一）文字示例：

ajaxtest文件代码：

<！DOCTYPE html> 
<html lang =“en”> 
<HEAD> 
	<meta charset =“UTF-8”> 
	<TITLE> AJAX </ TITLE> 
</ HEAD> 
<BODY> 
	<button onclick =“update（）” >点击更新数据</ button> 
	搜索结果
	<div id =“data”> 
		这里用来显示从本地文本文本返回的数据（模拟从服务器里请求返回数据）
	</ DIV> 
	<SCRIPT> 
		function update（）{ 
			var xmlHttp; 
			如果（
				window.ActiveXObject ）{ xmlHttp = new ActiveXObject（“Microsoft.XMLHTTP”）; // IE 678 OPEAR OLD 
			} else if（window.XMLHttpRequest）{ 
				xmlHttp = new XMLHttpRequest（）; // NEW 
			} 
			xmlHttp.open（“GET”，“的data.txt”）; //打开和服务的链接
			xmlHttp.send（NULL）;
			/ * 
			0：请求未初始化
			1：服务器连接已建立
			2：请求已接收
			3：请求处理中
			4：请求已完成，且响应已就绪
			* / 
			//上（当）就绪（准备）状态（状态）的变化（改变）
			xmlHttp.onreadystatechange = function（event）{ 
				的console.log（xmlHttp.readyState）; //打印状态
				// if（xmlHttp.readyState === 4 && xmlHttp.status === 200）{ 
				// document.getElementById（“data”）。innerHTML = xmlHttp.responseText; //取到上面的div属性的值替换成请求响应回来的值
				//} 
			} 
		} 
	</ SCRIPT> 
</ BODY> 
</ HTML>

数据文件：

本地TXT文本（服务器）数据是：金刚狼没爪子

预览效果：

（二）JSON类型：

修改文本数据文件：

刷新网页，点击：

此时数据数据文本返回的还是字符串我们用JSON对象的个数接收：

运行效果：

提炼：

<！DOCTYPE html> 
<html lang =“en”> 
<HEAD> 
	<meta charset =“UTF-8”> 
	<TITLE> AJAX </ TITLE> 
</ HEAD> 
<BODY> 
	<button onclick =“updateJSON（）” >更新数据json数据</ button> 
	<button onclick =“updatexml（）”>更新数据xml数据</ button> 
	搜索结果
	<div id =“data”> 
		这里用来显示从本地文本返回的数据（模仿从服务器里请求数据）
	</ DIV> 
	<SCRIPT> 
		function ajaxSend（url，callback）{ 
				var xmlHttp; 
			如果（
				window.ActiveXObject ）{ xmlHttp = new ActiveXObject（“Microsoft.XMLHTTP”）; // IE 678 OPEAR OLD 
			} else if（window.XMLHttpRequest）{ 
				xmlHttp = new XMLHttpRequest（）; 
			// NEW } 
			xmlHttp.open（“获取”，网址）; //打开和服务的链接
			xmlHttp.send（NULL）; //发送动作才是真正的给服务器按照上面打开的URL发送请求
			//上（当）就绪（准备）状态（状态）的变化（改变）
			xmlHttp.onreadystatechange = function（event）{ 
				// console.log （xmlHttp.readyState）; 
				if（xmlHttp.readyState === 4 && xmlHttp.status === 200）{ 
					回调（XMLHTTP）; 
				} 
			} 
		} 
		功能updateJSON（）{ 
			ajaxSend（“data.txt中中”，功能（XMLHTTP）{ 
				VAR jsonData = JSON.parse（xmlHttp.responseText）; 
					的的console.log（jsonData.length）; 
					var str =''; 
					for（var i = 0; 我<jsonData.length; i ++）{ 
						str + = jsonData [i] .name +“，”+ jsonData [i] .age +“<br>”; 
					} 
					的document.getElementById（“数据”）的innerHTML = STR。
				}）; 
		} 
		功能如updateXML（）{ 
			ajaxSend（“dataXML.xml”，功能（XMLHTTP）{ 
					//的console.log（xmlHttp.responseXML）; //返回XMLDocument对象
					var data = xmlHttp.responseXML.firstElementChild.children; 
					var str =''; 
					for（var i = 0; 我<data.length; i ++）{ 
						// console.log（data [i] .attributes ['name']）; 
						// console.log（data [i] .attributes ['name']。nodeValue）; 
						str + = data [i] .attributes ['name']。nodeValue +“，”+ data [i] .attributes ['age']。nodeValue +“<br>” 
					}; 
					的document.getElementById（“数据” ）的innerHTML = STR。
				}）; 
		} 
		
	</ SCRIPT> 
</ BODY> 
</ HTML>

效果：

ajax初步了解