一、ajax是什麼 ? javascript
①ajax(asynchronouse javascript and xml) 異步的javascript 和 xml php
② 7種技術的綜合,它包含了七個技術( javascript xml xstl xhtml dom xmlhttprequest css), ajax 是一個粘合劑, css
③ajax是一個與服務端語言無關的技術. 便可以使用在(php/java ee/.net網站/ asp) html
④ajax能夠給客戶端返回三種格式數據(文本格式 ,xml , json格式) java
⑤無刷新數據交換技術有如下: flash, java applet, 框架, iframe, ajax) ajax
二、ajax 的運行原理分析 數據庫
ajax更詳細的原理圖 json
三、使用ajax與服務器通訊的的步驟 服務器
四、使用ajax完成用戶名是否存在驗證 app
registerProcess.jsp
<%@ page contentType="text/html" pageEncoding="utf-8"%> <% String username = request.getParameter("username"); if("dahao".equals(username)){ //3號線 out.print("用戶名不可用"); } else out.print("用戶名可用"); %>register_get.html
使用get方式向服務器提交請求
<html> <head> <title>用戶註冊</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript"> //建立ajax引擎 function getXmlHttpObject(){ var xmlHttpRequest; if(window.ActiveXObject){ xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } else{ xmlHttpRequest = new XMLHttpRequest(); } return xmlHttpRequest; } function $(id) { return document.getElementById(id); } //驗證用戶名是否存在 var myXmlHttpRequest = ""; function checkUser() { myXmlHttpRequest = getXmlHttpObject(); //1號線 //判斷是否建立成功 if (myXmlHttpRequest) { //經過myXmlHttpRequest對象發送請求到服務器的某個頁面 //第一個參數表示請求的方式,「get」/「post」 //第二個參數指定URL,對哪一個頁面發出ajax請求(本質仍然是http請求) //第三個參數true表示使用異步機制,false即不使用 var url = "/ajax/registerProcess.jsp?username=" + $("username").value; //打開請求 myXmlHttpRequest.open("get", url, true); //指定回調函數,process是函數名 myXmlHttpRequest.onreadystatechange = process; //發送請求,若是是get請求,填入null便可;若是是post請求,則填入實際的數據 myXmlHttpRequest.send(null); //2號線 } } //回調函數 function process() { //window.alert("函數被調用" + myXmlHttpRequest.readyState); if(myXmlHttpRequest.readyState == 4) { //4號線 //取出服務器返回的值 //window.alert("服務器返回:" + myXmlHttpRequest.responseText); $("myres").value = myXmlHttpRequest.responseText; } } </script> </head> <body> <form action="???" method="post"> 用戶名字:<input type="text" onblur="checkUser();" name="username1" id="username"> <input style="border-width:0;color:red" type="text" id="myres"> <br/> 用戶密碼:<input type="password" name="password"><br> 電子郵件:<input type="text" name="email"><br/> <input type="submit" value="用戶註冊"> </form> <form action="???" method="post"> 用戶名字:<input type="text" name="username2" > <br/> 用戶密碼:<input type="password" name="password"><br> 電子郵件:<input type="text" name="email"><br/> <input type="submit" value="用戶註冊"> </form> </body> </html>register_post.html
使用post方式向服務器提交請求
<html> <head> <title>用戶註冊</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript"> //建立ajax引擎 function getXmlHttpObject(){ var xmlHttpRequest; if(window.ActiveXObject){ xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } else{ xmlHttpRequest = new XMLHttpRequest(); } return xmlHttpRequest; } function $(id) { return document.getElementById(id); } //驗證用戶名是否存在 var myXmlHttpRequest = ""; function checkUser() { myXmlHttpRequest = getXmlHttpObject(); //1號線 //判斷是否建立成功 if (myXmlHttpRequest) { //經過myXmlHttpRequest對象發送請求到服務器的某個頁面 //第一個參數表示請求的方式,「get」/「post」 //第二個參數指定URL,對哪一個頁面發出ajax請求(本質仍然是http請求) //第三個參數true表示使用異步機制,false即不使用 var url = "/ajax/registerProcess.jsp"; //這個是要發送的數據 var data = "username="+$("username").value; //打開請求 myXmlHttpRequest.open("post", url, true); //使用post方式發送時,這句話是必需的 myXmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //指定回調函數,process是函數名 myXmlHttpRequest.onreadystatechange = process; //發送請求,若是是get請求,填入null便可;若是是post請求,則填入實際的數據 myXmlHttpRequest.send(data); //2號線 } } //回調函數 function process() { //window.alert("函數被調用" + myXmlHttpRequest.readyState); if(myXmlHttpRequest.readyState == 4) { //4號線 //取出服務器返回的值 //window.alert("服務器返回:" + myXmlHttpRequest.responseText); $("myres").value = myXmlHttpRequest.responseText; } } </script> </head> <body> <form action="???" method="post"> 用戶名字:<input type="text" onblur="checkUser();" name="username1" id="username"> <input style="border-width:0;color:red" type="text" id="myres"> <br/> 用戶密碼:<input type="password" name="password"><br> 電子郵件:<input type="text" name="email"><br/> <input type="submit" value="用戶註冊"> </form> <form action="???" method="post"> 用戶名字:<input type="text" name="username2" > <br/> 用戶密碼:<input type="password" name="password"><br> 電子郵件:<input type="text" name="email"><br/> <input type="submit" value="用戶註冊"> </form> </body> </html>運行結果以下: