1.Ajax

作用：

（1）網頁非同步、區域性更新的JS元件

（2）模擬Http請求，處理Http響應

（3）模擬所有請求型別、所有mime型別以及檔案上傳、下載、跨域請求

如何使用JQuery提供的Ajax元件完成Http請求和響應的處理

（1）如何編寫Ajax

++ 引入JQuery

<script src="../../lib/jquery-3.6.0-min.js" type="text/javascript"></script>

++ 編寫ajax內容（編寫js內容）

前端部分

<button onclick="toAjax()">呼叫ajax</button>

<select id="mySelect">
    <option value="0">--請選擇--</option>
</select>

<script>

    function toAjax(){
        //呼叫一個ajax
        $.ajax({
            url:"http://localhost:8080/JavaServletDemo/textServlet",
            type:"GET",
            data:{name:"馬花子"},
            dataType:"JSON",
            success:function(data){
                console.dir(data);
                for(var i in data.data){
                    $("#mySelect").append("<option value='"+i+"'>"+data.data[i].name+"</option>")
                }
            },
            error:function(XMLHttpRequest, textStatus, errorThrown){
                console.dir("請求失敗！");
            }
        });
    }

</script>
 

後端Servlet部分：

 @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        Result res = new Result();

        req.setCharacterEncoding("UTF-8");
        resp.setCharacterEncoding("UTF-8");

        resp.setContentType("application/json;charset=UTF-8");

        PrintWriter writer = resp.getWriter();

        List<Map<String,String>> list = new ArrayList<>();

        for(int i=0;i<5;i++){
            Map<String,String> map = new HashMap<>();
            map.put("name","昆明"+(i+1));
            list.add(map);
        }



        res.setData(list);

        writer.print(res.toString());
        writer.flush();
        writer.close();

    }
 

(2)ajax的組成

ajax是$,JQuery物件的一個ajax()方法

$.ajax();

配置屬性：

url: 請求地址，要求為String型別的引數，（預設為當前頁地址）傳送請求的地址。

type: 請求型別，GET、POST，預設為GET

timeout：最長請求時間，單位毫秒，是Number型別

async：非同步引數：true=》非同步執行（預設），false=》同步執行

data：引數屬性：傳入一個JSON物件，如 data：{userID：1}

dataType：預期服務端響應資料型別，主要有：JSON、HTML、TEXT、JSONP

contentType： 設定請求的mime型別，application/json

配置回撥函式：

beforeSend : 傳送前的回撥

beforeSend:function(XMLHttpRequest){
    //在執行前會被呼叫
}

complete：請求完成之後回撥方法（不管請求成功或失敗都執行）

complete:function(XMLHttpRequest,textStatus){
    //在執行後會被呼叫（不管請求成功或失敗都執行）
}

success：請求成功傳送，響應成功接收

success:function(data, textStatus){
            //data可能是xmlDoc、jsonObj、html、text等等
            //textStatus ajax執行狀態編碼
}

error：請求失敗，無法接收正常響應時呼叫

error:function(XMLHttpRequest, textStatus, errorThrown){
          //通常情況下textStatus和errorThrown只有其中一個包含資訊
          //呼叫本次ajax請求時傳遞的options引數
          //errorThrown : 異常物件
}