ajax入门例子

最新推荐文章于 2024-06-16 12:42:17 发布

ln19871001

最新推荐文章于 2024-06-16 12:42:17 发布

阅读量77

点赞数

分类专栏： Ajax 文章标签： Ajax XML Safari Firefox Opera

本文链接：https://blog.csdn.net/ln19871001/article/details/83427160

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

parseXML.html文件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>parseXML.html</title>
  </head>
  
  <body>
  	<script type="text/javascript">
  		var xmlHttp;
    	var requestType="";
    	
    	//创建XMLHttpRequest对象
    	function createXMLHttpRequest(){
    	if(window.XMLHttpRequest){
    		//针对FireFox,mozillar,opera,Safari,IE7,IE8
    		xmlHttp=new XMLHttpRequest();
    		//针对某些特定版本的Mozillar浏览器的BUG进行修正
    		if(xmlHttp.overrideMimeType){
    			xmlHttp.overrideMimeType("text/xml");
    		}
    	}else if(window.ActiveXObject){
    			//针对IE6,IE5.5,IE5
    			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    		}
    	}
    	
    	//页面点击按钮事件--主函数
    	function startRequest(requestedList){ 
    		//从点击事件传参数给requestType赋值
    		requestType=requestedList;
    		//第一步：创建XMLHttpRequest对象
    		createXMLHttpRequest();
    		//第二步：注册回调函数时，只需要函数名，不需要加括号
    		//需要将函数名注册，如果加上括号，就会把函数返回值注册上，这是错误的
    		xmlHttp.onreadystatechange=handleStateChange;
    		//第三步：建立与服务器的调用。
    		//第一个参数：http的请求方式，支持所有http的请求方式，主要使用get和post
    		//第二个参数：请求url的地址，get方式请求的参数也在url中
    		//第三个参数：采用异步还是同步方式交互，true表示异步
    		xmlHttp.open("GET","parseXML.xml",true);
    		//第四步：发送请求，开始和服务器端进行交互
    		//同步方式下：send这句话会在服务器端数据回来才执行完
    		//异步方式下：send这句话会立即完成执行
    		xmlHttp.send(null);
    	}
    	//监听状态函数
    	function handleStateChange(){
    		if(xmlHttp.readyState==4){
    			if(xmlHttp.status==200){
    				//根据点击事件时requestSate参数判断
    				if(requestType=="north"){
	    				//转到函数listNorthStates(),只显示所有北部州名
	    				listNorthStates();
    				}else if(requestType="all"){
    					//转到函数listAllStates(),显示所有州名
    					listAllStates();
    				}
    			}
    		}
    	}
    	
    	function listNorthStates(){
    		//xmlDoc取到值，由xmlHttp对象的responseXML方法从服务器的parseXML.xml文件取到
    		var xmlDoc=xmlHttp.responseXML;
    		//返回xml文件中指定标记值
    		var northNode=xmlDoc.getElementsByTagName("north")[0];
    		
    		var out="North States";
    		//返回标记内的指定标记数组
    		var northStates=northNode.getElementsByTagName("state");
    		
    		//转到在客户端输出的函数outputList();
    		outputList("Northern States",northStates);
    	}
    	function listAllStates() {
		    var xmlDoc = xmlHttp.responseXML;
		    var allStates = xmlDoc.getElementsByTagName("state");
		    
		    outputList("All States in Document", allStates);
		}
		
		//输出函数
		function outputList(title,states){
			var out=title;
			var currentState=null;
			for(var i=0;i<states.length;i++){
				currentState=states[i];
				out=out+"\n-"+currentState.childNodes[0].nodeValue;
			}
			//弹出提示框
			alert(out);
		}
  	</script>
  
    <h1>处理XML文档</h1>
    <br/><br/>
    <form action="#">
    	<input type="button" value="查看所有州的列表"  οnclick="startRequest('all')">
    	<br/><br/>
    	<input type="button" value="查看所有北部地区的州列表" οnclick="startRequest('north')">
    </form>
  </body>
</html>

parseXML.xml文件：

<?xml version="1.0" encoding="UTF-8"?>
<states>
	<north>
        <state>Minnesota</state>
        <state>Iowa</state>
        <state>North Dakota</state>
    </north>
    <south>
        <state>Texas</state>
        <state>Oklahoma</state>
        <state>Louisiana</state>
    </south>
    <east>
        <state>New York</state>
        <state>North Carolina</state>
        <state>Massachusetts</state>
    </east>
    <west>
        <state>California</state>
        <state>Oregon</state>
        <state>Nevada</state>
    </west>
</states>