(二)AJAX非同步傳輸(採用非匿名函式和匿名函式) 例項.
阿新 • • 發佈:2019-01-22
AJAX非同步傳輸(採用非匿名函式) :
//建立xmlhttpRequest物件 var xmlHttp; //有了這個物件就可以和引擎打交道,傳送相關的引數. function createXMLHttpRequest() { //表示當前瀏覽器不是ie,如ns,firefox if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } //完成檢查,動態的檢查使用者程式碼是否已經存在. function validate(field) { //alert(document.getElementById("userId").value); //alert(field.value); //如果使用者中取得了使用者程式碼的資料,且不為空. if(trim(field.value).length != 0) { //建立Ajax核心物件. createXMLHttpRequest(); //三個引數,第一個是提交方式get或post,url //防止快取. var url = "user_validate.jsp?userId=" + trim(field.value) + "×=" + new Date().getTime(); //設定請求方式為get,設定請求的url,設定為非同步提交true xmlHttp.open("GET",url,true); //將方法地址複製給onreadystatechange屬性. //類似於電話號碼. xmlHttp.onreadystatechange=callback; //get請求引數為null. 將設定資訊傳送到Ajax引擎.(像手機簡訊一樣,同時給他一個url(電話號碼),打著這個座機,說明這件事完成了) xmlHttp.send(null); } else { //開始就清除我們的顯示標記. document.getElementById("spanUserId").innerHTML = ""; } } function callback() { //Ajax的引擎發生改變. //alert(xmlHttp.readyState); //檢視引擎的狀態.Ajax引擎狀態為成功. if(xmlHttp.readyState == 4){ //無論是請求成功還是不成功,為4是有響應,200是成功,其他的狀態都表示失敗. //http協議狀態為成功. if(xmlHttp.status ==200) { //判斷返回的東西. 如果不為空的話,顯示span的提示使用者存在的標籤. if(trim(xmlHttp.responseText) !="") { //alert(xmlHttp.responseText); //設定提示的標籤內容. document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>"; } else { //如果為空.清除span標籤. document.getElementById("spanUserId").innerHTML = ""; } }else { //錯誤程式碼,例如404沒有找到頁面. alert("請求失敗,錯誤碼" + xmlHttp.status); } } }
AJAX非同步傳輸(採用匿名函式):
//完成檢查,動態的檢查使用者程式碼是否已經存在. function validate(field) { //alert(document.getElementById("userId").value); //alert(field.value); //如果使用者中取得了使用者程式碼的資料,且不為空. if(trim(field.value).length != 0) { var xmlHttp=null; //表示當前瀏覽器不是ie,如ns,firefox if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } //三個引數,第一個是提交方式get或post,url //防止快取. var url = "user_validate.jsp?userId=" + trim(field.value) + "×=" + new Date().getTime(); //設定請求方式為get,設定請求的url,設定為非同步提交true xmlHttp.open("GET",url,true); //將方法地址複製給onreadystatechange屬性. //類似於電話號碼. //xmlHttp.onreadystatechange=callback; //採用匿名函式的方式. xmlHttp.onreadystatechange=function() { //Ajax的引擎發生改變. //alert(xmlHttp.readyState); //檢視引擎的狀態.Ajax引擎狀態為成功. if(xmlHttp.readyState == 4){ //無論是請求成功還是不成功,為4是有響應,200是成功,其他的狀態都表示失敗. //http協議狀態為成功. if(xmlHttp.status ==200) { //判斷返回的東西. 如果不為空的話,顯示span的提示使用者存在的標籤. if(trim(xmlHttp.responseText) !="") { //alert(xmlHttp.responseText); //設定提示的標籤內容. document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>"; } else { //如果為空.清除span標籤. document.getElementById("spanUserId").innerHTML = ""; } }else { //錯誤程式碼,例如404沒有找到頁面. alert("請求失敗,錯誤碼" + xmlHttp.status); } } } //get請求引數為null. 將設定資訊傳送到Ajax引擎.(像手機簡訊一樣,同時給他一個url(電話號碼),打著這個座機,說明這件事完成了) xmlHttp.send(null); } else { //開始就清除我們的顯示標記. document.getElementById("spanUserId").innerHTML = ""; } }
為什麼採用匿名函式?
我們可以看到,採用非匿名函式中的XMLHttpRequest物件必須是一個全域性變數, 如果我們在使用者新增資訊這個過程中, 不同的輸入要進行不用的驗證, 那就要多次呼叫這個物件了, 如果這個游標進入事件需要呼叫, 那個也需要, 多個需要的, 他們都能夠改動XMLHttpRequest物件的狀態, 例如給變url地址,改變提交方式就會變得一片混亂. 所以我們採用匿名函式傳輸.