AJAX: 如何使用HttpRequest对象

本文主要介绍如何使用 HttpRequest 对象，如何向服务器发送请求，以及如何处理服务器响应。

使用HttpRequest对象发送请求步骤：

1. 创建 HttpRequest 对象 

var xmlhttp = new XMLHttpRequest();

2. 告诉 XMLHttpRequest 对象，当状态发生改变时， 会调用哪个函数。

为此，要把 onreadystatechange 属性设置为指向 JavaScript 函数的指针

xmlhttp.onreadystatechange = renewMsg;

3. 指定请求属性。XMLHttpRequest  对象的 open() 方法指定将发出的请求。

xmlhttp.open("GET", url, true);

4. 将请求发送给服务器。send() 方法把请求发送到指定的目标资源。

例子：

//发送给ajax接收器
function sendMsgToAjax()
{
	//
	var question = document.getElementById('inputArea').value;
	//alert(msg);
	question = trim(question);
	if(question == "请提问" || question == "请在此输入您的问题" || question == "您的建议答案是") return;
	if(question != "")
	{
		var url = "recvMsg.php?question=" + question + "&TempUserID="+TempUserID + "&preQuestion="+preQuestion+ "&IsTeachMode="+ IsTeachMode + "&IsAsk="+ IsAsk; 
		
		preQuestion = question;
		document.getElementById('inputArea').value = "";
		//alert(url);
		xhr.open("GET", url, true);
		xhr.setRequestHeader("If-Modified-Since","0");
		xhr.onreadystatechange = renewMsg; //只要响应来，就调用这个函数
		xhr.send();
	}
}

//更新本页内容
function renewMsg()
{
	if(xhr.readyState == 4)
	{ //XMLHttpRequest 		
		var xmlDoc = xhr.responseText;
		//alert(xmlDoc);
		var s = xmlDoc.split("|");
		xmlDoc = s[0];
		//alert(s[0]);
		//alert(s[1]);
		//接收信息内容去掉html标签
		xmlDoc = xmlDoc.replace(/>/g, '>');
		xmlDoc = xmlDoc.replace(/</g, '<');
		xmlDoc = xmlDoc.replace(/"g/, '\"'); 

		var financeUrl = s[1];/金融图片
		document.getElementById('financeImg').src = financeUrl;

		var weatherURL = s[2];
		document.getElementById('weather').src = weatherURL;
		
		var searchURL = s[3];
		document.getElementById('contentFrm').src = searchURL;

		if(financeUrl)//判断是否是金融问句，是跳转到股票section
		{
			doClick('a_section2');
		//document.getElementById("a_section2").click(); //变态的ie8不支持
		}
		else if(weatherURL)
		{
			doClick('a_section3');
		}
		else if(searchURL)
		{
			doClick('a_section4');
		}
		else  //不是以上问句，跳转到首页section
		{
			doClick('a_section0');
			//document.getElementById("a_section0").click();//变态的ie8不支持
		}
		
		//alert(financeUrl);
		//location.reload();
		//alert(xmlDoc);
		var oldMsg = document.getElementById('outputArea').innerHTML;
		//alert(old);
		document.getElementById('outputArea').innerHTML = oldMsg + xmlDoc ;			
	}
	if(xhr.readyState == 4 && IsTeachMode)
	{
		IsAsk++;
		if(IsAsk % 2 == 0)
		{
			document.getElementById('inputArea').value = '请提问';
		}
		else 
		{
			document.getElementById('inputArea').value = '您的建议答案是';
		}
	}
	//滚动条置底
	var div = document.getElementById('outputArea');
	div.scrollTop = div.scrollHeight; 
}