Introduction of a .Ajax
1.AJAX = Asynchronous JavaScript and XML (Asynchronous JavaScript and XML).
2 .Ajax not new technology, but the original technology, integrated together only.
(1) use CSS and XHTML to represent.
(2) use to interact DOM model and dynamic display.
(3) and the server using XMLHttpRequest asynchronous communication.
(4) use javascript to bind and calls.
3. If you want to refresh the page content locally. You will need to reload the entire page. The user experience is not very good. It is to solve the problem of local refreshed. Keeping other parts do not move, just refresh some places.
Two .Ajax use
1. Create Object
1 function ajaxFunction(){ 2 var xmlHttp; 3 try{ // Firefox, Opera 8.0+, Safari 4 xmlHttp=new XMLHttpRequest(); 5 } 6 catch (e){ 7 try{// Internet Explorer 8 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 9 } 10 catch (e){ 11 try{ 12 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 13 } 14 catch (e){} 15 } 16 } 17 18 return xmlHttp; 19 }
2. Send a request to get here request
1 // get request performs 2 function get () { . 3 . 4 // 1 xmlhttprequest create objects. . 5 var = the ajaxFunction Request (); . 6 . 7 . @ 2 transmission request. . 8 // HTTP: // localhost: 8080 / day16 / demo01.jsp . 9 // HTTP: // localhost: 8080 / day16 / DemoServlet01 10 . 11 / * 12 is the parameter a: the POST request type or the GET 13 is Parameter II: Request path 14 parameter III: whether asynchronous, to true or to false 15 * / 16 the request.open ( "the GET", "/ day16 / DemoServlet01", to true); . 17 request.send(); 18 }
3. If while acquiring data transmission request, would like to obtain data, then the code follows
1 // get request performs 2 function get () { . 3 . 4 // 1 xmlhttprequest create objects. . 5 var = the ajaxFunction Request (); . 6 . 7 . @ 2 transmission request . 8 the request.open ( "the GET", "/ day16 / ? DemoServlet01 name = AA & Age = 18 ", to true); 9 10 . 3 // fetch response data register listeners meaning. Will prepare a state has changed, then the method of performing the right number = . 11 request.onreadystatechange = function () { 12 is 13 is // has been able to represent the first half of normal processing. Then determines whether the status code 200 is 14 IF (request.readyState == == 200 is request.status &&. 4) { 15 information in response to the pop // 16 alert(request.responseText); 17 } 18 } 19 request.send(); 20 }
4.POST request
. 1 function POST () { 2 .. 1 // create objects . 3 var = the ajaxFunction Request (); . 4 . 5 . 2 // transmission request . 6 the request.open ( "the POST", "/ day16 / DemoServlet01", to true); . 7 . 8 // If no data, the write line on it . 9 //request.send (); 10 . 11 // If you want to take the data, write the following two rows 12 is 13 is // If Style data is a post, to this add a header, a data type form is submitted through a form data encoded url 14 request.setRequestHeader ( "the Content-type", "file application / X-WWW-form-urlencoded"); 15 16 // band data in the past, write the form data in which the send method. 17 request.send("name=aobama&age=19"); 18 }
5.POST get data
. 1 function POST () { 2 .. 1 // create objects . 3 var = the ajaxFunction Request (); . 4 . 5 . 2 // transmission request . 6 the request.open ( "the POST", "/ day16 / DemoServlet01", to true); . 7 . 8 // wants to get data transmitted from the server, plus a state monitor. . 9 request.onreadystatechange = function () { 10 IF (request.readyState == == 200 is request.status &&. 4) { . 11 12 is Alert ( "POST:" + request.responseText); 13 is } 14 } 15 16 // If Style is a post data, to add this header, a data type submits a form via url-encoded form data . 17 request.setRequestHeader ( "the Content-type", "file application / X-WWW-form -urlencoded "); 18 19 // with past data, write data in a form which send method. 20 is request.send ( "name = aobama & Age =. 19"); 21 is }
III. Use Cases
1 . Page ready
1 2 3 <body> 4 <table border="1" width="500"> 5 <tr> 6 <td>用户名:</td> 7 <td><input type="text" name="name" id="name" onblur="checkUserName()"><span id="span01"></span></td> 8 </tr> 9 <tr> 10 <td>密码</td> 11 <td><input type="text" name=""></td> 12 </tr> 13 <tr> 14 <td>邮箱</td> 15 <td><input type="text" name=""></td> 16 </tr> 17 <tr> 18 <td>简介</td> 19 <td><input type="text" name=""></td> 20 </tr> 21 <tr> 22 <td colspan="2"><input type="submit" value="注册"></td> 23 </tr> 24 </table> 25 </body>
2. The database ready, create a database and tables
3.Servlet Code
1 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 2 try { 3 4 request.setCharacterEncoding("UTF-8"); 5 6 //1. 检测是否存在 7 String name = request.getParameter("name"); 8 System.out.println("name="+name); 9 10 UserDao dao = new UserDaomImpl(); 11 boolean isExist = dao.checkUserName(name); 12 13 // 2. Notifications page, in the end or not. 14 IF (ISEXIST) { 15 response.getWriter () the println (. 1);. // User name 16 } the else { . 17 response.getWriter () the println (2);. // the absence of the user name 18 } . 19 20 is } the catch (SQLException E) { 21 is e.printStackTrace (); 22 is } 23 is }
4.dao Code
1 public class UserDaomImpl implements UserDao{ 2 3 @Override 4 public boolean checkUserName(String username) throws SQLException { 5 QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource()); 6 7 String sql = "select count(*) from t_user where username =?"; 8 9 10 runner.query(sql, new ScalarHandler(), username); 11 12 Long result = (Long) runner.query(sql, new ScalarHandler(), username); 13 return result > 0 ; 14 } 15 16 }
5.JSP page display
. 1 2 function CheckUserName () { . 3 . 4 // Get the value of the input box entire document page . 5 var name = document.getElementById ( "name") value;. Value // value () Val Val () . 6 .. 1 // Create Object . 7 var = the ajaxFunction request (); . 8 . 9 . 2 // transmission request 10 the request.open ( "the POST", "/ day16 / CheckUserNameServlet", to true); . 11 12 is // registration status change monitor, transmitted from the server acquires data 13 is request.onreadystatechange = function () { 14 15 IF (request.readyState == == 200 is request.status &&. 4) { 16 //alert(request.responseText); . 17 var = Data request.responseText; 18 is IF (Data ==. 1) { . 19 // Alert ( "User name already exists"); 20 is . document.getElementById ( "span01") the innerHTML = " < font Color = 'Red' > user name already exists! </ font > "; 21 is } {the else 22 is . document.getElementById ( "span01") the innerHTML = " < font Color = 'Green' > username is available! </ font >"; 23 //alert("用户名未存在"); 24 } 25 } 26 27 } 28 29 request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 30 request.send("name="+name); 31 }
Four .HTML some simple stuff
1.alert is a pop-up box
2.oElement = document.getElementById(sid)；
It is a method of the document object, you can be obtained through its specified id html element .
For example, in the page where you can set form elements to it id value, or the value of the name to distinguish between different elements of the same type, when you set the id document.getElementById ( "id") to get this element, so that by document.getElementById ( " id "). value gets the value elements, similar to the method as well as document.getElementsByName (" name ") by element name it or get the element object. document.getElementsByTagName ( "form") get all the elements by tag name.