1. 程式人生 > >Ajax的兩種實現方式

Ajax的兩種實現方式

enc () != 部分 pen clas servlet 瀏覽器 pop

//ajax的jquery實現
function aclick(){
//alert("測試一");
var name = $("#userName").val();
//alert(name);
$.get("servlet/AjaxServlet?name=" + name ,null,back);
}


function back(data){
//alert(data);
$("#message").html(data);
}




//ajax的普通實現
var xmlHttpRequest = null; ? //javascript的瀏覽器內置對象,XMLHttpRequest對象是當今全部AJAX和Web 2.0應用程序的技術基礎
function ajaxRequest(){
//alert("測試二");
if(window.ActiveXObject) //IE瀏覽器,推斷瀏覽器是否支持ActiveX控件
{
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); ? //創建XMLHttpRequest對象
}else if(window.XMLHttpRequest) //除IE以外的其它瀏覽器
{
xmlHttpRequest = new XMLHttpRequest();
}
if(null != xmlHttpRequest)
{
var v1 = document.getElementById("userName").value;
var v2 = document.getElementById("userName").value;

//準備向server發出一個請求

//get方式發出一個請求
xmlHttpRequest.open("GET","servlet/AjaxServlet?name=" + v1, true);

//post方式向server發出一個請求
//xmlHttpRequest.open("POST", "AjaxServlet",true);

//發生轉臺變換的時候調用回調函數
xmlHttpRequest.onreadystatechange = ajaxCallBack;

//使用post提交的時候 必須叫上例如以下代碼
//xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

//向server發出一個請求
xmlHttpRequest.send("name="+v1+"&v2=" +v2);
}
}


function ajaxCallBack(){
if(xmlHttpRequest.readyState==4){
//ReadyState取值 描寫敘述?
//0 ?描寫敘述一種"未初始化"狀態;此時,已經創建一個XMLHttpRequest對象。可是還沒有初始化。

?
//1 ?描寫敘述一種"發送"狀態;此時,代碼已經調用了XMLHttpRequest open()方法而且XMLHttpRequest已經準備好把一個請求發送到server。?
//2 ?描寫敘述一種"發送"狀態。此時,已經通過send()方法把一個請求發送到server端,可是還沒有收到一個響應。

?
//3 ?描寫敘述一種"正在接收"狀態;此時,已經接收到HTTP響應頭部信息,可是消息體部分還沒有全然接收結束。

?
//4 ?描寫敘述一種"已載入"狀態;此時,響應已經被全然接收。

?
if(xmlHttpRequest.status==200){
var content = xmlHttpRequest.responseText;
document.getElementById("message").innerHTML = content;
}
}
}

Ajax的兩種實現方式