Ajax工作流程(原生Ajax)
生活随笔
收集整理的這篇文章主要介紹了
Ajax工作流程(原生Ajax)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Ajax通過XMLHttpRequest對象實現異步方式在后臺發送發送請求。
主要有以下四個步驟：
（1）初始化XMLHttpRequest對象。不同瀏覽器的差異，需要我們創建一個跨瀏覽器的對象，并判斷XMLHttpRequest對象創建是否成功，如果不成功，則給予提示。
（2）為XMLHttpRequest對象指定一個回調函數，用于對后臺返回結果進行處理。
（3）創建一個與服務器的連接，在創建時，需要指定發送請求的方式（GET/POST），以及設置是否采用異步方式發送請求。
（4）向服務器發送請求。
以下是一個用Ajax判斷用戶名是否正確的樣例：
index.jsp文件：
page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript">function getAnswer(username) {if(username.value == ""){alert("請輸入用戶名");username.focus();return;}else{checkUsername("checkusername.jsp?username="+username.value); //參數已整合到url地址中}}function checkUsername(url) {http_request = new XMLHttpRequest(); //初始化XMLHttpRequest對象http_request.onreadystatechange = function (){ //回調函數對后臺返回結果進行處理if(http_request.readyState==4){if(http_request.status == 200){alert(http_request.responseText);}else{alert("地址有誤");}}}http_request.open("POST",url,true); //鏈接服務器http_request.send(null); //發送請求，這里不用帶參數，前面參數已經整合進url中。} </script> </head> <body> <form action="" method="get" name="form1">用戶名：<input type="text" name="username"><br>密碼：<input type="password" name="passwd"><br><input type="submit" value="提交" onclick="getAnswer(this.form.username)"> </form> </body> </html>checkusername.jsp(后臺處理)：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <%String s = new String(request.getParameter("username").getBytes("ISO-8859-1"),"utf-8");if(s.equals("Tom")){out.print("此用戶已注冊");}else{out.print("恭喜你注冊成功");} %>另一種實現方法：（post方法，但傳參數）
index.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript">function getAnswer(username) {if(username.value == ""){alert("請輸入用戶名");username.focus();return;}else{checkUsername("checkusername.jsp",username); }}function checkUsername(url,username) {http_request = new XMLHttpRequest(); //初始化XMLHttpRequest對象var param = "username="+username.value;//alert(username.value);http_request.onreadystatechange = function (){ //回調函數對后臺返回結果進行處理if(http_request.readyState==4){if(http_request.status == 200){alert(http_request.responseText);}else{alert("地址有誤");}}}http_request.open("POST",url,true); //鏈接服務器http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //設置表頭http_request.send(param); //發送請求，這里不用帶參數，前面參數已經整合進url中。} </script> </head> <body> <form action="" method="get" name="form1">用戶名：<input type="text" name="username"><br>密碼：<input type="password" name="passwd"><br><input type="submit" value="提交" onclick="getAnswer(this.form.username)"> </form> </body> </html>?
總結
以上是生活随笔為你收集整理的Ajax工作流程(原生Ajax)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java的二十三种设计模式（适配器模式（
- 下一篇： 分布式的CAP理论