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; }