【JavaWeb】AJAX概述

概念

AJAX 是三個單詞的縮寫 ： Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。

作用

傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。

AJAX 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。

實現方式

實現方式有兩種：

1. 使用 JavaScript 實現

2. 使用 JQuery 實現

使用 JavaScript 實現(瞭解)

//定義方法
        function  fun() {
            //發送異步請求
            //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);
                }
            }

使用 JQuery 實現

1.    $.ajax()
2.    $.get()
3.    $.post()

1     $.ajax()

語法：$.ajax({鍵值對});

$.ajax({
                url:"ajaxServlet" , //請求路徑
                type:"POST" ,   //請求方式
        //      data:"username = zhangsan & age =23",//請求參數第一種寫法
                data:{"username":"zhangsan","age":"23"},//請求參數第二種寫法
                //響應成功後自動執行的回調函數
                success:function (data) { //data會接收響應給的值
                    alert(data);
                },
                error:success:function () {
                    alert("出錯啦");
                },
                dataType:"text"  //設置接收到的相應數據格式
            });

2    $.get()   發送get請求

語法：$.get(url, [data], [callback], [type])
    參數：
             url：請求路徑
             data：請求參數
             callback：回調函數
             type：響應結果的類型

$.get({"ajaxServlet",{username":"zhangsan","age":"23"},function (data) {
                    alert(data);
                },"text"  
            });

3   $.post()  發送post請求

語法：$.post(url, [data], [callback], [type])
    參數：
             url：請求路徑
             data：請求參數
             callback：回調函數
             type：響應結果的類型