ajax
01.建立jsp頁面javascript
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <!-- 傳統的web和ajax的區別： 01.發送方式不一樣： 傳統的web同步發送！ ajax異步發送！ 02.服務器響應不一樣： 傳統的web響應的是一整個頁面！ ajax響應的只是用戶須要的數據！ 03. 客戶端處理的方式不一樣 傳統的web必須等待整個網頁加載完畢，才能繼續操做！ ajax能夠動態的刷新局部內容，不影響用戶的其餘操做！ Ajax (Asynchronous javaScript and xml) 一種局部刷新的技術！ 包含了 js xml json...等技術！ 核心對象：XMLHttpRequest 經常使用的方法： 01.open(method,url,async) method:請求的方式 url:請求的地址，get請求時能夠拼接參數 async:是否異步交互 02.send(data) data:get請求時！能夠是null ，也能夠不寫 ！ 03.setRequestHeader(String header,String value):設置http請求信息 04.getResponseHeader(String header):獲取指定響應的信息 事件：回調函數 onreadystatechange 經常使用的屬性： readyState: XMLHttpRequest的狀態碼 0：沒有完成初始化 1：請求準備好了，能夠開始發送 2：請求發送完成 3：開始讀取相應 4: 響應完成 status:http的狀態碼 200：服務器正確返回響應 403：沒有訪問權限 404：請求的資源不存在 500：服務器內部錯誤！ ...... responseText:以文本的形式獲取響應的內容！ responseXML：將xml格式的響應內容轉換成dom對象返回！ --> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script type="text/javascript"> //輸入框失去焦點時 觸發的事件 function validate(){ var name= $("[name='userName']").val(); //js中是.value; if(name==null||name==""){ $("div").html("<span style='color:red'>用戶名不能爲空</span>"); }else{ //01.建立XMLHttpRequest核心對象 var xhr=createXhr(); //02.設置回調函數 xhr.onreadystatechange=callBack; //03.初始化xhr的組件 var url="ValidateServlet?name="+name; xhr.open("GET",url,true); //04.發送請求 get請求的時候 能夠是null 也能夠不寫參數 xhr.send(null); //回調函數 function callBack(){ if(xhr.readyState==4&&xhr.status==200){ //表明響應正確返回 var data= xhr.responseText; //文本的方式獲取後臺響應的數據 if (data.match("true")) {//data=="true" $("div").html("<span style='color:red'>用戶名已經被佔用！！！</span>"); }else{ $("div").html("<span style='color:red'>用戶名能夠正常使用！！！</span>"); } } } } } //建立XMLHttpRequest核心對象 function createXhr(){ if(window.XMLHttpRequest){ //高版本的瀏覽器 return new XMLHttpRequest(); }else{ //低版本 return new ActiveXObject("Microsoft.XMLHTTP"); } } </script> </head> <body> <input type="text" name="userName" onblur="validate();"> <div></div> <img alt="小貓咪" src="images/cat.jpg"> </body> </html>
02.建立對應的servletcss
public class ValidateServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); // 執行post請求 } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("servlet begin"); // 獲取前臺name String name = request.getParameter("name"); boolean flag = false; if ("admin".equals(name)) { flag = true; // 默認已經存在 } // 把信息給前臺 PrintWriter pw = response.getWriter(); pw.print(flag); pw.flush(); pw.close(); System.out.println("servlet over"); } }
/** get方式配置組件 xhr.open("GET","ValidateServlet?name="+name,true); xhr.send(null); 或者 xhr.send(); post方式配置組件 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //04.發送請求 var data="name="+name+"&pwd="+"12354"; xhr.send(data); */
03.jquery實現ajaxhtml
/** 使用jquery實現ajax! 經常使用的屬性： url:請求的地址 type:請求的方式 默認是 get data：發送的數據 dataType:預期服務器返回的類型 beforeSend:發送請求以前調用的函數 success：成功以後調用的函數 error:失敗調用的函數 complete：請求完成後調用的函數（不管失敗仍是成功） $.ajax({ url:"ValidateServlet", type:"get", data:"name="+name, dataType:"text", beforeSend:function(){ }, success:function(){ }, error:function(){ } }) */
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'jquery.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script type="text/javascript"> $(function() { $("[name='userName']") .blur( function() { //輸入框的失去焦點事件 var name = $("[name='userName']").val(); //獲取用戶的輸入內容 if (name == null || name == "") { $("div") .html( "<span style='color:red'>用戶名不能爲空</span>"); } else { $.ajax({ //使用jquery實現ajax技術 url : "ValidateServlet", //請求的地址 type : "get", //請求的方式 默認是get data : "name=" + name, //請求攜帶的參數 dataType : "text", //預期服務器返回的數據格式 beforeSend : function() { //請求發送以前觸發的事件 alert("請求正在發送......"); }, success : callBack, //data後臺返回的數據 響應成功以後的事件 error : function() { //響應失敗以後的事件 alert("出現錯誤........"); } }) //響應成功以後的事件 function callBack(data) { if (data.match("true")) {//data=="true" $("div") .html( "<span style='color:red'>用戶名已經被佔用！！！</span>"); } else { $("div") .html( "<span style='color:red'>用戶名能夠正常使用！！！</span>"); } } } }) }) </script> </head> <body> <input type="text" name="userName"> <div></div> </body> </html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'json.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script type="text/javascript"> $(function(){ //01.定義json格式的對象 並在div中輸出 var user={ "id":1, "name":"小白", "password":"123456" }; $("#objectDiv").append("ID:"+user.id+"<br/>") .append("name:"+user.name+"<br/>") .append("password:"+user.password+"<br/>") //02.定義json格式的字符串數組 並在ul和select中輸出 var array=["小黑","小白","小紅"]; var $arr=$(array); //把數組轉換成jquery對象 var $arraySelect=$("#arraySelect"); //獲取下拉框對象 //循環給下拉列表增長option $arr.each(function(i){ $arraySelect.append("<option value='"+(i+1)+"'>" +this+"</option>"); }) //獲取ul var $ul=$("#arrayUl"); $arr.each(function(){ $ul.append("<li>" +this+"</li>"); }) //03.定義json格式的對象數組 放入到div中的table表格中 var userArrays= [ { "id":1, "name":"小白", "password":"123456" }, { "id":2, "name":"小黑", "password":"123456" }, { "id":3, "name":"小紅", "password":"123456" }]; //建立一個table表格 var $table=$("<table border='1'></table>") .append("<tr><td>編號</td><td>用戶名</td><td>密碼</td></tr>"); //遍歷對象數組 $(userArrays).each(function(){ $table.append("<tr><td>"+this.id+"</td><td>" +this.name+"</td><td>"+this.password+"</td></tr>"); }) //把表格放入到div中 $("#objectArray").append($table); }) </script> </head> <body> 1:json格式的對象 <div id="objectDiv"></div><br/> 2:json格式的字符串數組 <select id="arraySelect"></select> <ul id="arrayUl"></ul><br/> 3.json格式的對象數組 <div id="objectArray"></div> </body> </html>
json格式數據java
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'object.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script type="text/javascript"> $(function(){ $.ajax({ url:"UserServlet", type:"get", dataType:"json", success:function(data){ //就收後臺json格式的數據 以後在頁面上顯示 $("div").append("<span>姓名</span> <span>密碼</span></br>"); $(data).each(function(i){ $("div").append("<span>"+data[i].name+"</span> <span>"+data[i].password+"</span></br>"); }) } }) }) </script> </head> <body> <div></div> </body> </html>
public class UserServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setHeader("Content-Type", "text/html;charset=utf-8"); User user1 = new User(1, "小白1", "123"); User user2 = new User(2, "小白2", "1234"); User user3 = new User(3, "小白3", "123456"); List<User> users = new ArrayList<User>(); users.add(user1); users.add(user2); users.add(user3); // 轉換成json格式 String json = JSON.toJSONString(users); System.out.println(json); PrintWriter pw = response.getWriter(); pw.print(json); pw.flush(); pw.close(); } }
/** * * Ajax: * 核心對象 XMLHttpRequest * * 屬性： * readyState： 表明服務的響應信息 * 0：請求沒有初始化 * 通過XMLHttpRequest.open(method,url,asyns) 狀態變成1 * method:請求的方式 * url：服務器的地址 * asyns：是否異步！ true:異步 false:同步 * 1：請求初始化 可是並無訪問服務器 * 經過XMLHttpRequest.send()創建鏈接 * 2：請求已經發送 * 3：處理請求信息 * 4：請求完成 * * readyState的變化會觸發onreadyStatechange， * 若是readyState==4，而且status==200表明請求成功！就能夠渲染界面！ * * get方式請求服務器的時候 * send() send(null) send()中不能加別的參數！ * * post方式請求服務器的時候 * send(數據信息) * 並且要在open()以後加入 * xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); * */
javaScript實現ajaxjquery
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript"> window.onload=function(){ //點擊按鈕觸發的事件 btn.onclick=function(){ //01.建立XMLHttpRequest核心對象 是全局對象 var xhr=null; //根據不一樣的版本建立不一樣的核心對象 if(window.XMLHttpRequest){//高版本 xhr=new XMLHttpRequest; }else if(window.ActiveXObject){ //低版本 xhr=new ActiveXObject("Microsoft.XMLHttp") }else{ alert("拜拜！"); } //02.設置回調函數 xhr.onreadystatechange=function(){ //判斷狀態碼 if(xhr.readyState==4&&xhr.status==200){ //獲取響應的數據 myAjax.innerHTML+=xhr.responseText; } } //03.配置核心對象的組件 xhr.open("get", "hello.txt", true); //04.發送請求 xhr.send(); } } </script> </head> <body> <input type="button" id="btn" value="點擊加載"> <div id="myAjax"></div> <img src="images/cat.jpg"> </body> </html>
你們辛苦了！！！！abc
驗證用戶名是否存在web
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript"> window.onload=function(){ //文本框失去焦點的事件 userName.onblur=function(){ //01.建立XMLHttpRequest核心對象 是全局對象 var xhr=null; //根據不一樣的版本建立不一樣的核心對象 if(window.XMLHttpRequest){//高版本 xhr=new XMLHttpRequest; }else if(window.ActiveXObject){ //低版本 xhr=new ActiveXObject("Microsoft.XMLHttp") }else{ alert("拜拜！"); } //根據用戶的輸入增長提示信息 if(userName.value==""){ msg.innerHTML="<div style='color:red'>用戶名不能爲空</div>"; }else{ //02.設置回調函數 xhr.onreadystatechange=function(){ //判斷狀態碼 if(xhr.readyState==4&&xhr.status==200){ //獲取響應的數據 判斷是否存在該用戶 if(xhr.responseText.match(/ok/)){ msg.innerHTML="<div style='color:green'>能夠註冊！1秒鐘跳轉到註冊頁面</div>"; //設置定時函數 setTimeout(function(){ location.href="success.jsp"; },1000); }else if(xhr.responseText.match(/error/)){ msg.innerHTML="<div style='color:red'>用戶名已經存在！</div>"; }else{ msg.innerHTML="錯誤信息"+xhr.statusText; } } } /*get請求 xhr.open("get", "do.jsp?userName="+userName.value, true); xhr.send();*/ //post請求 xhr.open("post", "do.jsp", true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send("userName="+userName.value); } } } </script> </head> <body> <input type="text" id="userName" name="userName"/> <div id="msg"></div> </body> </html>
<% //獲取login界面的userName的值 String name= request.getParameter("userName"); //定義一個返回給前臺的響應信息 String message=""; if(name.equals("admin")){ message="error"; }else{ message="ok"; } //怎麼把響應給前臺？？？？ out.print(message); %>
<body> <h1>註冊頁面</h1> </body>
相關文章
- 1. Ajax(Jq Ajax JQ Ajax原理）
- 2. ajax （ajax開發）
- 3. AJAX—AJAX基礎
- 4. ajax（ajax開發）
- 5. 【Ajax】Ajax總結
- 6. ajax嵌套ajax
- 7. jQuery中Ajax $.ajax等
- 8. JS Ajax 與 JQuery Ajax
- 9. ajax使用 ajax+json
- 10. Ajax（一）—— 初始Ajax
- 更多相關文章...
- • AJAX 簡介 - PHP教程
- • PHP - AJAX 與 PHP - PHP教程
- • PHP Ajax 跨域問題最佳解決方案
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虛擬機中,安裝華爲電腦的deepin操作系統
- 2. 強烈推薦款下載不限速解析神器
- 3. 【區塊鏈技術】孫宇晨：區塊鏈技術帶來金融服務的信任變革
- 4. 搜索引起的鏈接分析-計算網頁的重要性
- 5. TiDB x 微衆銀行 | 耗時降低 58%，分佈式架構助力實現普惠金融
- 6. 《數字孿生體技術白皮書》重磅發佈（附完整版下載）
- 7. 雙十一「避坑」指南：區塊鏈電子合同爲電商交易保駕護航！
- 8. 區塊鏈產業，怎樣「鏈」住未來？
- 9. OpenglRipper使用教程
- 10. springcloud請求一次好用一次不好用zuul Name or service not known
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Ajax(Jq Ajax JQ Ajax原理）
- 2. ajax （ajax開發）
- 3. AJAX—AJAX基礎
- 4. ajax（ajax開發）
- 5. 【Ajax】Ajax總結
- 6. ajax嵌套ajax
- 7. jQuery中Ajax $.ajax等
- 8. JS Ajax 與 JQuery Ajax
- 9. ajax使用 ajax+json
- 10. Ajax（一）—— 初始Ajax