Ajax實現的非同步傳輸與驗證範例程式碼_AJAX相關

來源:互聯網
上載者:User
Ajax非同步傳輸用得很廣,就拿web開發來說吧,當使用者註冊時,當使用者剛一輸完,怎麼立即判斷使用者是否存在,並在輸入框後顯示提示?這就用到了非同步傳輸~~

它可以讓你不離開頁面的情況下,擷取後台你想要的資料,並顯示在當前頁面!!好的,下面看個例子

下面是一段Ajax驗證代碼
複製代碼 代碼如下:

<script type="text/javascript">

//① 設定變數
var xmlHttp ;
var flag = false ;
var package_name;

//② 建立XMLHttp對象
function createXMLHttp(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest() ;


} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;

}

}

//③
function getPackage_name(package_name){

//建立XMLHttpRequest對象
createXMLHttp() ;

document.getElementById("msg").innerHTML=package_name;
//建立一個HTTP請求,以post方式將package_name交給AppInfoServlet
xmlHttp.open("post","AppInfoOneServlet?package_name="+package_name) ;


//調用回呼函數 產生可視化的頁面響應

xmlHttp.onreadystatechange =checkCallback;

// 發送請求
xmlHttp.send(null) ;

//友好提示
document.getElementById("msg").innerHTML = "正在擷取資訊,請耐心等候..." ;

}

//④ 回呼函數
function checkCallback(){

if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){

var text = xmlHttp.responseText ;
var t=text.split('|');//當擷取的是多個值,並用"|"作為分割時
document.getElementById("msg").innerHTML =t[0]+ "<br>"+"<div id='container'>"+"<div id='content'>"+"<div id='slider'>"+"<ul>"+"<li>"+"<img src='"+t[1]+"' alt='Css Template Preview' />"+"</li>"+"<li>"+"<img src='"+t[2]+"' alt='Css Template Preview' />"+"</li>"+"</ul>"+"</div>"+"<h3>Android應用截圖展示</h3>"+"</div>"+"</div>"+"<center><a href='"+t[3]+"' target='_blank'><img src='./images/downloadsoruce.png'></a></center>" ;
//擷取的資料在id為“msg” 的標記中顯示出來,例如:<span id="msg"></span>
}
}
}
</script>

在jsp頁面中是這樣調用js函數的
複製代碼 代碼如下:

<a href="#bottom" onclick="getPackage_name('<%=ainfo.getPackage_name() %>')">擷取</a>

Ajax擷取的資料將在下列標記中顯示出來
複製代碼 代碼如下:

<span id="msg"></span>

好的,我們來看一下servlet中的代碼:
複製代碼 代碼如下:

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");//必須在out前,否則傳輸的漢子為亂碼啊
PrintWriter out = response.getWriter();


String package_name=request.getParameter("package_name");

AppDaoImpl adi=new AppDaoImpl();
AppInfo ainfo=new AppInfo();
ainfo=adi.getOneAppInfo(package_name);


out.print(ainfo.getDescription()+"|"+ainfo.getScreen_1_path()+"|"+ainfo.getScreen_2_path()+"|"+ainfo.getDownload_path());
}

以上已經很清楚啦,當然驗證使用者是否存在,道理和這個是一模一樣的,其中一定要注意漢字傳輸中亂碼的問題~~~~~~
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.