Ajax學習(重點)

Lmobject發表於2019-10-31

今日內容

1. AJAX:
2. 原生js方式實現Ajax(瞭解即可,因為太麻煩)
3. jQuery通用方式實現Ajax(重點掌握,以後常用)
4. jQuery中get方式實現Ajax(重點掌握,簡單常用)
5. jQuery中post方式實現Ajax(重點掌握,簡單常用)
複製程式碼

Ajax學習(重點)

1、AJAX學習:

1. 概念: ASynchronous JavaScript And XML	非同步的JavaScript 和 XML
	1. 非同步和同步:客戶端和伺服器端相互通訊的基礎上
		* 客戶端必須等待伺服器端的響應。在等待的期間客戶端不能做其他操作。
		* 客戶端不需要等待伺服器端的響應。在伺服器處理請求的過程中,客戶端可以進行其他的操作。

		Ajax 是一種在無需重新載入整個網頁的情況下,能夠更新部分網頁的技術。 [1] 
		通過在後臺與伺服器進行少量資料交換,Ajax 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下,對網頁的某部分進行更新。
		傳統的網頁(不使用 Ajax)如果需要更新內容,必須過載整個網頁頁面。

		提升使用者的體驗

2. 實現方式:
	1. 原生的JS實現方式(瞭解)
				 //1.建立核心物件
	            var xmlhttp;
	            if (window.XMLHttpRequest)
	            {// code for IE7+, Firefox, Chrome, Opera, Safari
	                xmlhttp=new XMLHttpRequest();
	            }
	            else
	            {// code for IE6, IE5
	                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	            }
	
	            //2. 建立連線
	            /*
	                引數:
	                    1. 請求方式:GET、POST
	                        * get方式,請求引數在URL後邊拼接。send方法為空參
	                        * post方式,請求引數在send方法中定義
	                    2. 請求的URL:
	                    3. 同步或非同步請求:true(非同步)或 false(同步)
	
	             */
	            xmlhttp.open("GET","ajaxServlet?username=tom",true);
	
	            //3.傳送請求
	            xmlhttp.send();
	
	            //4.接受並處理來自伺服器的響應結果
	            //獲取方式 :xmlhttp.responseText
	            //什麼時候獲取?當伺服器響應成功後再獲取
	
	            //當xmlhttp物件的就緒狀態改變時,觸發事件onreadystatechange。
	            xmlhttp.onreadystatechange=function()
	            {
	                //判斷readyState就緒狀態是否為4,判斷status響應狀態碼是否為200
	                if (xmlhttp.readyState==4 && xmlhttp.status==200)
	                {
	                   //獲取伺服器的響應結果
	                    var responseText = xmlhttp.responseText;
	                    alert(responseText);
	                }
	            }
	2. JQeury實現方式
		1. $.ajax()
			* 語法:$.ajax({鍵值對});
			 //使用$.ajax()傳送非同步請求
	            $.ajax({
	                url:"ajaxServlet1111" , // 請求路徑
	                type:"POST" , //請求方式
	                //data: "username=jack&age=23",//請求引數
	                data:{"username":"jack","age":23},
	                success:function (data) {
	                    alert(data);
	                },//響應成功後的回撥函式
	                error:function () {
	                    alert("出錯啦...")
	                },//表示如果請求響應出現錯誤,會執行的回撥函式
	
	                dataType:"text"//設定接受到的響應資料的格式
	            });
		2. $.get():傳送get請求
			* 語法:$.get(url, [data], [callback], [type])
				* 引數:
					* url:請求路徑
					* data:請求引數
					* callback:回撥函式
					* type:響應結果的型別

		3. $.post():傳送post請求
			* 語法:$.post(url, [data], [callback], [type])
				* 引數:
					* url:請求路徑
					* data:請求引數
					* callback:回撥函式
					* type:響應結果的型別
複製程式碼

2、原生js方式實現Ajax

(具體實現方式參照w3cschool線上文件) www.w3school.com.cn/

Ajax學習(重點)

Ajax學習(重點)

程式碼如下:
複製程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生js方式實現Ajax</title>
    <script>
        //定義方法
        function fun() {
            //傳送非同步請求(w3cscool文件中檢視js實現的程式碼  https://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp)
            //1、建立核心物件(根據不同瀏覽器進行選擇)
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2、建立連線(get post)
            /**
             * 引數:  1、請求方式:get post
             *              * get方式:請求引數在url後邊拼接,send後邊不拼引數
             *              * post方式:請求引數在send中定義
             *         2、請求的URL:
             *         3、同步或非同步請求  true(非同步)  false(同步)
             */
            xmlhttp.open("GET","ajaxServlet?username=tom",true);
            //3、傳送請求
            xmlhttp.send();
            //4、接受並處理來自伺服器的響應結果
            //接受並處理來自伺服器的響應結果
            //獲取方式: xmlhttp.responseText
            //什麼時候獲取,當伺服器響應成功之後獲取
            //當xmlhttp物件的就緒狀態改變時,觸發事件onreadystatechange
            xmlhttp.onreadystatechange=function()
            {
                //判斷readyState狀態是否為4,判斷status響應狀態碼是否為200
                /**
                 * onreadystatechange	儲存函式(或函式名),每當 readyState 屬性改變時,就會呼叫該函式。
                 readyState
                 存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。

                 0: 請求未初始化
                 1: 伺服器連線已建立
                 2: 請求已接收
                 3: 請求處理中
                 4: 請求已完成,且響應已就緒
                 status
                 200: "OK"

                 404: 未找到頁面
                 */
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    //獲取伺服器的響應結果
                    var responseText=xmlhttp.responseText;
                    alert(responseText);
                }
            }

        }
    </script>
</head>
<body>
    <input type="button" value="傳送非同步請求" onclick="fun();">
    <input>
</body>
</html>
複製程式碼

2、jQuery通用方式實現Ajax

程式碼如下:
複製程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery通用方法實現Ajax</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        //定義方法
       function fun() {
           //使用$.ajax方式實現ajax
           $.ajax({
               url:"ajaxServlet",  //請求路徑
               type:"post",  //請求方式
               //data:"username=jack&age=20",  //請求引數
               data:{"username":"jack","age":20},  //json方式設定請求引數
               success:function (data) {
                   alert(data);
               },//響應成功後的回撥函式
                error:function () {
                    alert("出錯了。。。");
                },//表示如果請求響應出現錯誤,會執行的回撥函式
               dataType:"json" //設定接受到的響應資料的格式
           });
       }
    </script>
</head>
<body>
    <input type="button" value="傳送非同步請求" onclick="fun();">
    <input>
</body>
</html>
複製程式碼

4、jQuery中get方式實現Ajax

程式碼如下:
複製程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery通用方法實現Ajax</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
       //定義方法
       /**
        * 引數:   1、url:請求路徑
        *          2、data: 請求引數(可選)
        *          3、callback: 回撥函式 (可選)
        *          4、type:  響應結果的型別 (可選)
        */
        function fun() {
            $.get("ajaxServlet",{"username":"jack"},function (data) {
                alert(data);
            },"json");
        }
    </script>
</head>
<body>
    <input type="button" value="傳送非同步請求" onclick="fun();">
    <input>
</body>
</html>
複製程式碼

5、jQuery中post方式實現Ajax

程式碼如下
複製程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery通用方法實現Ajax</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
       //定義方法
       /**
        * 引數:   1、url:請求路徑
        *          2、data: 請求引數(可選)
        *          3、callback: 回撥函式 (可選)
        *          4、type:  響應結果的型別 (可選)
        */
        function fun() {
            $.post("ajaxServlet",{"username":"jack"},function (data) {
                alert(data);
            },"json");
        }
    </script>
</head>
<body>
    <input type="button" value="傳送非同步請求" onclick="fun();">
    <input>
</body>
</html>
複製程式碼
心得體會:Ajax相當的重要,以後要達到使用者完美的體驗度,採用非同步請求處理方式傳送數

據,所以ajax技術就相當的重要了,所以還是通過這篇文章來鞏固學習把!
複製程式碼

6、寫在最後

推薦作者的Github地址:github.com/Lmobject

相關文章