初識Ajax技術_JQuery特效代碼

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 初識Ajax技術

初識Ajax技術

編輯：JQuery特效代碼

Ajax：（Asynchronous JavaScript And Xml）是一種整合了JavaScript、XML、CSS等現有技術 Ajax工作流程：

純javaScript的Ajax請求 XMLHttpRequest XMLHttpRequest對象可以提供在不刷新當前頁面的情況下向服務器發送異步請求，並接收服務器端的返回結果。 1.創建XMLHttpRequest對象語法 老版本IE（IE5和IE6） XMLHttpRequest=new ActiveXObject("Microsoft.XMLHTTP"); 新版本IE和其他大部分浏覽器（推薦使用） XMLHttpRequest = new XMLHttpRequest(); 2.XMLHttpRequest對象常用屬性和方法 常用屬性 屬性名稱說明 readyState 返回請求的當前狀態常用值： 0——未初始化 1——開始發送請求 2——請求發送完成 3——開始讀取相應 4——讀取響應結束 status HTTP相應狀態碼： 200——相應正常 400——錯誤請求，如語法錯誤 403——沒有訪問權限 404——資源不存在 500——服務器內部錯誤 responseText 以文本形式獲取相應值 responseXML 以XML形式獲取相應值，並且解析成DOM對象返回 statusText 返回當前請求的相應行狀態 onreadystatechange 設置回調函數 常用方法 方法說明 open(String method,String url,boolean async,String user,String password) 用於創建一個新的HTTP請求
參數method：設置HTTP請求方法，如POST、GET等，不區分大小寫
參數url:請求的url地址（如果是get請求，參數在這裡拼接）
參數async：可選，指定此請求是否為異步方法，默認為true
參數user：可選，如果服務器需要驗證，此處指定用戶名，否則彈出驗證窗口
參數password：可選，驗證中的密碼 send(String data) 發送請求到服務器端參數data：字符串類型，通過此請求發送的數據。POST方式需要指定，GET方式則不指定 abort() 取消當前請求 setRequestHeader(String header,String value) 單獨設置請求的某個HTTP頭信息
參數header：要指定的HTTP頭名稱
參數value：要指定的HTTP頭名稱所對應的值
常用的：setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8") getResponseHeader(String header) 從響應中獲取指定的HTTP頭信息參數header：要獲取指定的HTTP頭 getAllResponseHeaders() 獲取相應的所有的HTTP頭信息 服務器主要代碼(s_1 servlet)

 request.setCharacterEncoding("utf-8");
 response.setHeader("content-Type", "text/html;charset=utf-8");
 // 讀取參數
 String mail = request.getParameter("mail");
 System.out.println("debug:mail:" + mail);
 String result = "false";
 if (mail.equalsIgnoreCase("qq")) {
     result = "true";
 }
 // 輸出結果
 PrintWriter out = response.getWriter();
 out.print(result);
 out.flush();

JS代碼(j_1)

 /**
  * 創建xmlHttpRequest對象
  * 
  * 兼容版本
  * 
  * 開發時間：2016-5-18 上午10:00:49
  * @author MrFalse
  */
 function createXMLHttpRequest(){
     //  定義變量
     var request=null;
     if(window.XMLHttpRequest){
         request=new XMLHttpRequest();
     }else{
         //  兼容早期IE5、IE6浏覽器
         request=new ActiveXObject("Microsoft.XMLHTTP");
     }
     return request;
 }
 /**
  * 驗證郵箱
  * 
  * 
  * 開發時間：2016-5-18 上午10:05:07
  * @author MrFalse
  * @param oInput
  */
 function checkUserName(oInput){
     //  讀取輸入框的的值
     var strUserName=oInput.value;
     if(strUserName==null||strUserName==""){
         userNameMessage.innerHTML="郵箱不能為空";
         return;
     }
     //  創建XMLHttpRequest對象
     var xmlHttpRequest=createXMLHttpRequest();
     //  設置回調函數
     xmlHttpRequest.onreadystatechange=function(){
         if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
             var strReturnString=xmlHttpRequest.responseText;
             if(strReturnString.indexOf("true")>=0){
                 userNameMessage.innerHTML="用戶名已經被占用";
                 userNameMessage.className="red";
             }else{
                 userNameMessage.innerHTML="用戶名可以使用";
                 userNameMessage.className="blue";
             }
         }
     }
     var url="RegisterServlet";
     xmlHttpRequest.open("post",url,true);
     //  設置頭信息
     xmlHttpRequest.setRequestHeader("Content-Type",
             "application/x-www-form-urlencoded;charset=utf-8");
     //  參數數據,使用key=value&key=value……的方式
     var urlParam="mail="+strUserName;
     //發送請求
     xmlHttpRequest.send(urlParam);
 }

HTML代碼(h_1)

 <!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>注冊頁面</title>
 <script type="text/javascript" src="register.js"></script>
 <style type="text/css">
 
 .blue{
     color: blue;
     font-weight: normal;
 }
 
 .red{
     color: red;
     font-weight: bold;
 }
 </style>
 </head>
 <body>
     <form action="">
         <p>注冊郵箱：<input type="text" onblur="checkUserName(this);"/>*<span id="userNameMessage"></span></p>
     </form>
 </body>
 </html>

jQuery實現Ajax jquery常用Ajax方法

$.ajax() 綜合的請求，比較強大，功能較全，但是復雜 $.get() get方式請求，但是帶參數時轉為post請求
$.post() post方式請求 $.getJSON() 獲取服務器返回的json數據 $(selecter).load() 將服務器返回的數據加載到選擇器選中的內容中

使用$.ajax()

1.服務器代碼使用上面代碼（s_1） 2.html代碼(h_2)

 <!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>ajax請求jquery</title>
 </head>
 <body>
     <form action="">
         <p><input type="text" name="email" id="email" onblur="requestxx(this);"/>
               <span id="prompt">*</span>
        </p>
     </form>
 </body>
 </script>
 </html>

3.為h_1添加jquery代碼如下 encodeURI(thisobj.value)使用情況 1.get模式時 2.傳參是url模式 3.參數中有中文 jq_1

 <!-- 導入jquery庫 -->
 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 <script type="text/javascript">
     function requestxx(thisobj){
         //對中文進行uri編碼
         email=encodeURI(thisobj.value);
         $.ajax({
             url:"RegisterServlet",
             type:"get",
             data:"mail="+email,
             //執行成功的回調函數
             success:function(result,textStatus){
                 if(result.indexOf("true")>=0){
                     $("#prompt").text("用戶名已經被占用");
                 }else{
                     $("#prompt").text("用戶名可以使用");
                 }
             },
             //執行失敗或錯誤的回調函數
             error:function(){
                 alert("ajax執行失敗");
             }
         });
     }
 </script>

使用$.get()

1.服務器代碼使用上面代碼（s_1） 2.html代碼使用上面代碼(h_2) 3.為h_2添加jquery代碼如下 jq_2

 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 <script type="text/javascript">
     function check(input){
         $.get("RegisterServlet","mail="+input.value,function(result){
             if(result.indexOf("true")>=0){
                 $("#prompt").text("用戶名已經被占用");
             }else{
                 $("#prompt").text("用戶名可以使用");
             }
         });
     }
 </script>

使用$.post()

1.服務器代碼使用上面代碼（s_1） 2.html代碼使用上面代碼(h_2) 3.為h_2添加jquery代碼如下 jq_3

 <script type="text/javascript">
     function check(input){
         $.post("RegisterServlet","mail="+input.value,function(result){
             if(result.indexOf("true")>=0){
                 $("#prompt").text("用戶名已經被占用");
             }else{
                 $("#prompt").text("用戶名可以使用");
             }
         });
     }
 </script>

使用$.getJSON()

1.服務器代碼(s_2 Servlet)

 request.setCharacterEncoding("utf-8");
 //兩種響應頭都可以使用
 response.setHeader("Content-Type", "application/json;charset=utf-8");
 //response.setHeader("content-Type", "text/html;charset=utf-8");
 PrintWriter out=response.getWriter();
 //返回的json格式必須是嚴格的json格式，否則浏覽器無法調用
 out.print("{\"name\":\"張三\"}");
 out.flush();

2.html代碼 h_3

 <button onclick="clickTest()">提交</button>

3.為h_2添加jquery代碼如下 jq_4

 <script type="text/javascript">
     function clickTest() {
         $.getJSON("ResponseJSON",function(data) {
             alert(data.name);
         })
     }
 </script>

使用$(selecter).load()

1.使用上面服務器代碼s_2 2.html代碼使用上面代碼(h_2) 3.為h_2添加jquery代碼如下 jq_5

 <script type="text/javascript">
     function check(input){
         $("#prompt").load("RegisterServlet","mail="+input.value);
     }
 </script>

注意：

一定要注意JSON字符串的書寫格式，如果傳入的字符串不是JSON格式，如果傳入的字符串不是JSON格式或者格式錯誤，將不能得到正確的值。
使用$.getJSON()方法時，默認從服務器接收到的數據就是JSON對象，不需要再使用$.parseJSON()方法去解析即可使用

$.parseJSON(str)的使用

demo

 <!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>jqueryParseJSON</title>
 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 <script type="text/javascript">
     function test() {
         //json的字符串
         var jsonStr = '{"name":"張三","age":20}';
         //解析成json對象
         var jsonObj = $.parseJSON(jsonStr);
         alert("name:" + jsonObj.name + "age:" + jsonObj.age);
     }
 </script>
 </head>
 <body>
     <button onclick="test()">測試</button>
 </body>
 </html>

result:

上一頁:easyui-combobox設置成無法輸入，只能從下拉菜單選擇
下一頁:點擊按鈕之後等待60秒

JQuery特效代碼

jQuery中:nth-child選擇器用法實例教程: 本文實例講述了jQuery中:nth-child選擇器用法。分享給大家供大家參考。具體分析如下：此選
jQuery類選擇器用法實例教程: 本文實例講述了jQuery類選擇器用法。分享給大家供大家參考。具體分析如下：類選擇的器匹配具有指定類
JQuery onload、ready概念介紹及使用方法: 頁面加載完成有兩種事件，一是ready，表示文檔結構已經加載完成（不包含圖片等非文字媒體文件），二是

jQuery基礎知識 JQuery入門技巧 JQuery特效代碼 JQuery常見問題

DIV CSS 佈局教程網

相關文章