AJAX学习笔记：创建XMLHttpRequest对象的五步骤

XMLHttpRequest对象在大部分浏览器上已经实现而且拥有一个简单的接口允许数据从客户端传递到服务端，但并不会打断用户当前的操作。这是一个非常流行的做法，那么如何建立一个XMLhttpRequest对象呢？

1、建立XMLHttpRequest对象

2、注册回调函数

3、使用open方法设置和服务器交互的基本信息

4、设置发送的数据，开始和服务器交互

5、在回调函数中判断交互是否结束，响应是否正确，并根据需要获取服务器端返回的数据，更新页面内容。

下面就通过代码来具体的来阐释这五步。（首先介绍的是使用GET方式）

	//定义全局变量
	var　xmlhttp;

	/* 1、创建XMLHttpRequest对象
	*说明：这是一个相对复杂的过程，因为要使用不同的浏览器
	*/
	if(window.XMLHttpRequest){
		//适用于IE7、IE8、FireFox、Opera等浏览器
		xmlhttp = new XMLHttpRequest();
		if(xmlhttp.overrideMineType){
			xmlhttp.overrideMineType("text/xml")
		}
	}else if(window.ActiveXObject){
		//IE6、IE5、IE5.5
		var activexName = ["MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];
		for(var i =0 ;i<activexName.length;i++){
			try{
				xmlhttp = new ActiveXObject(activexName[i]);
			}catch(e){
				
			}
		}
	}
	if(xmlhttp == undefind || xmlhttp == null){
		alert("当前浏览器不支持创建XMLHttpRequest对象");
		return;
	}
	/*2、给XMLHttpRequest对象注册回调方法
	*注意：虽然callback是一个方法，但是这里必须使用方法名，后面不用加（）
	*/
	xmlhttp.onreadystatechange = callback;
	
	/*
	*3、设置和服务器交互的相应的参数
	*/
	//UserName是页面中的控件id
	var userName = document.getElementById("UserName").value;
	
	xmlhttp.open("GET","AJAX?name="+userName,true);
	//open方法几个重要的参数：get/post，服务器地址，
	//XMLhttpRequest对象的交互方式即同步/异步,true表示异步方式)
	
	/*
	*4、设置向服务器发送的数据，启动和服务器的交互
	*/
	xmlhttp.send(null);
	
	function callback(){
	/*
	*5、判断和服务器交互是否完成，还要判断服务器是否正确返回了数据
	*/	
		if(xmlhttp.readyState == 4){
			//表示和服务器端的交互已经完成
			if(xmlhttp.status == 200){
			//表示服务器的响应代码是200，正确的返回了数据
			//纯文本数据的接受方法
			var message = xmlhttp.responsText();
			//如果使用的是DOM对象的接受方法，则
			//var doxXml = xmlhttp.responseXML();
			//但是有一个前提，服务器端需要设置content-type为text/xml
			
			var div = document.getElementById("页面div的ID")		
			div.innerHTML = message;
	
			}
		}
	}

使用POST方法与GET方式只有3、4两步又差异，其他的相同

	/*
	*3、设置和服务器交互的相应的参数
	*/
	//UserName是页面中的控件id
	var userName = document.getElementById("UserName").value;
	
	xmlhttp.open("POST","AJAX",true表示异步方式)
	
	/*
	*4、设置向服务器发送的数据，启动和服务器的交互
	*/
	xmlhttp.setRequestHeader("Content-Type","application/x-www-fora-urlencoded");
	xmlhttp.send("name="+userName);

（编辑：李大同）

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