1.創建XMLHttpRequest組建
2.設置回調函數
3.初始化XMLHttpRequest組建
4.發送請求
實例代碼:
var userName;
var passWord;
var xmlHttpRequest;
//XmlHttpRequest對象
function createXmlHttpRequest(){
if(window.ActiveXObject){ //如果是IE瀏覽器
return new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){ //非IE瀏覽器
return new XMLHttpRequest();
}
}
function onLogin(){
userName = document.f1.username.value;
passWord = document.f1.password.value;
var url = "LoginServlet?username="+userName+"&password="+passWord+"";
//1.創建XMLHttpRequest組建
xmlHttpRequest = createXmlHttpRequest();
//2.設置回調函數
xmlHttpRequest.onreadystatechange = zswFun;
//3.初始化XMLHttpRequest組建
xmlHttpRequest.open("POST",url,true);
//4.發送請求
xmlHttpRequest.send(null);
}
//回調函數
function zswFun(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
var b = xmlHttpRequest.responseText;
if(b == "true"){
alert("登錄成功!");
}else{
alert("登錄失敗!");
}
}
}
================================================================================
var xmlhttp;
function verify1() {
var username = document.getElementById("username").value;
//確定瀏覽器
if(window.XMLHttpRequest) {
//針對FireFox、Mozillar、Opera、Safari、IE7、IE8
//創建XMLHttpRequest對象
xmlhttp = new XMLHttpRequest();
//修正某些瀏覽器的BUG
if(xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/html");
}
}else if(window.ActiveXObject){
//針對IE5、IE5.5、IE6
//這兩個爲插件名稱作爲參數傳遞,爲了創建ActiveXObject
var activeName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0;i>activeName.length();i++) {
try{
//非別取出,如果創建成功則終止循環,如果失敗則會拋出異常繼續循環
xmlhttp = new ActiveXObject(activeName[i]);
break;
}catch(e){
}
}
}
//確定XMLHttpRequest是否創建成功
/*if(!xmlhttp) {
alert("XMLHttpRequest創建失敗!");
return;
}else {
alert("XMLHttpRequest創建成功!"+xmlhttp);
}*/
//註冊回調函數
xmlhttp.onreadystatechange=callback;
url = "classisservlet?name="+username;
//設置連接信息
//1.是http請求的方式
//2.是服務器的地址
//3.是採用同步還是異步,true爲異步
//xmlhttp.open("GET",url,true);
//post請求與get請求的區別
//第一個參數設置成post第二個只寫url地址,第三個不變
xmlhttp.open("POST","classisservlet",true);
//post請求要自己設置請求頭
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//發送數據,開始與服務器進行交互
//post發送請求
xmlhttp.send("name="+username);
}
function callback() {
//接收響應數據
//判斷對象狀態是否交互完成,如果爲4則交互完成
if(xmlhttp.readyState == 4) {
//判斷對象狀態是否交互成功,如果成功則爲200
if(xmlhttp.status == 200) {
//接收數據,得到服務器輸出的純文本數據
var response = xmlhttp.responseText;
//得到div的節點將數據顯示在div上
var divresult = document.getElementById("result");
divresult.innerHTML = response;
}
}
}
原文鏈接地址:http://www.cnblogs.com/hwx0807/archive/2011/06/28/2092205.html