AJAX異步請求

A: 異步Asynchronous
J: JavaScript
A: And
X: XML
同步請求: 客戶端請求到服務器,如果服務器沒有響應,客戶端只能等待,卡死
異步請求: 客戶端請求到服務器,如果服務器沒有響應,客戶可是自由活

AJAX的運行原理

瀏覽器內置了AJAX的引擎其實就是XMLHttpRequest對象對象操作引擎、操作數據

原生態的JavaScript實現異步請求(太複雜，簡單瞭解即可)

實現步驟

獲取AJAX引擎

設置回調函數

自定義函數,服務器響應成功後,會自動調用該函數

設置請求服務器路徑

提交

新建web項目：

從"Java Enterprise"這裏選才有create web.xml 且tomcat都自動幫你配好了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        /**
         * 原生js實現ajax
         */
        function fn() {
            //獲取ajax引擎對象 XMLHttpRequest
            var xmlhttp = new XMLHttpRequest();
            //對象調用了事件 監聽ajax引擎狀態變化
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                    //xmlhttp.responseText 引擎對象屬性 表示服務器響應回來的文本屬性
                    document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
                }
            };

            //設置服務器路徑
            xmlhttp.open("GET","/web11/js_ajax");
            //提交請求
            xmlhttp.send();
        }
    </script>
</head>
<body>
    <input type="button" value="AJAX提交" οnclick="fn()">
    <div id="myDiv"></div>
</body>
</html>

很煩而且代碼不通用，低端瀏覽器不能用

jQuery的ajax請求

爲了跨瀏覽器，用jQuery就用1.11版本

$.get()函數

格式: $.get(url,data,回調函數,type);
參數解釋:
       url:提交的服務器地址
       data:提交到服務器的數據 k=v&k=v 的格式
       回調函數:服務器響應成功,自動調用函數
       type:服務器端響應回來的數據類型(只用到:json、text)
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
    function fn() {
        /**
         * jQuery中函數get發送異步請求
         */
        var url="/web11/jquery_get";
        var param="username=zhangsan&age=20";
        $.get(url,param,function (data) {
            //服務器響應回來的參數 發送到data
            alert(data);
        },"text");
    }
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        function fn() {
            /**
             * jQuery中函數get發送異步請求
             */
            var url="/web11/jquery_get";
            var param="username=zhangsan&age=20";
            $.get(url,param,function (data) {
                //服務器響應回來的參數 發送到data
                alert(data);
            },"text");
        }

    </script>
</head>
<body>
    <input type="button" value="get請求" οnclick="fn()">
</body>
</html>

$.post()函數

除了get改爲post，其他完全同上

格式: $.get(url,data,回調函數,type);
參數解釋:
       url:提交的服務器地址
       data:提交到服務器的數據 k=v&k=v 的格式
       回調函數:服務器響應成功,自動調用函數
       type:服務器端響應回來的數據類型(只用到:json、text)
<script type="text/javascript">
    function fn() {
        /**
         * jQuery中函數get發送異步請求
         */
        var url="/web11/jquery_post";
        var param="username=zhangsan&age=20";
        $.post(url,param,function (data) {
            //服務器響應回來的參數 發送到data
            alert(data);
        },"text");
    }
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        function fn() {
            /**
             * jQuery中函數get發送異步請求
             */
            var url="/web11/jquery_post";
            var param="username=zhangsan&age=20";
            $.post(url,param,function (data) {
                //服務器響應回來的參數 發送到data
                alert(data);
            },"text");
        }
    </script>
</head>
<body>
    <input type="button" value="post請求" οnclick="fn()">
</body>
</html>

$.ajax()函數

jQuery的異步請求函數 ajax(), 他是get和post的底層函數
使用get或者post的時候,調用的底層都是ajax函數
上層函數: 代碼簡單,可以控制內容少
底層函數: 代碼量多,靈活性很大,可以控制的內容多（需要深一步處理ajax時纔會用到此函數）

* 函數的參數
* url:服務器請求地址
* async: 異步請求或者同步請求,默認是true,表示異步（一般不寫默認true）
* data:請求到服務器參數 k=v
* dataType:接收服務器響應的數據格式 text json
* error:服務器響應失敗的回調函數(有失敗處理，很靈活，很不錯的一種寫法)
* success:服務器響應成功的回調函數
* type:get請求或者是post

格式:
$.ajax({
k:v,
k:v
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        function fn() {
            /**
             * jQuery中底層函數ajax發送異步請求
             * $.ajax({
             *  k:v,
             *  K:v
             * });
             */
            $.ajax({
                //服務器路徑
                url:"/web11/jquery_ajax",
                //提交服務器數據
                data:"username=zhangsan&age=18",
                //響應失敗的回調函數
                error:function () {
                    alert("ajax響應失敗")
                },
                //響應成功的回調函數
                success:function (data) {
                    alert("響應成功"+data);
                },
                //設置接收的響應數據格式
                dataType:"text",
                //設置請求方式
                type:"GET"
            });
        }
    </script>
</head>
<body>
    <input type="button" value="ajax底層函數實現" οnclick="fn()">
</body>
</html>

package cn.ahpu.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @author 韓竹安
 * @create 2020-01-04 23:34
 */
@WebServlet(urlPatterns = "/jquery_ajax")
public class JQuery_AjaxServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        /*
         * 接收客戶端的ajax請求
         * 響應文本類型的數據
         */
        String username = request.getParameter("username");
        String age = request.getParameter("age");
        int a=1/0;//模擬服務器端異常
        System.out.println(username+"||" + age);
        response.getWriter().write("okokok");
    }
}

參數直接發送中文也沒有亂碼，jquery_ajax不是吃乾飯的，都幫你處理好了

function fn() {
    var url="/web11/jquery_demo";
    var data="name=張三&hobby=籃球";
    $.get(url,data,function (data) {
        alert(data);
    },"text");
}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    /*
     * 接收客戶端的ajax請求
     * 響應文本類型的數據
     */
    String name = request.getParameter("name");
    String hobby = request.getParameter("hobby");
    System.out.println(name+"||" + hobby);
    response.getWriter().write("okDemo");
}

異步請求和同步請求的差異

同步請求: 沒有響應,卡死
異步請求: 沒有響應,自由活動
好處: 速度快,用戶體驗好,節約資源

現在的趨勢是所有的請求都寫成異步，用戶體驗好，但程序員工作量可能就很大了

JSON介紹

JSON,是JavaScript支持的一種數據格式
(JavaScript Object Notation, JS 對象簡譜)

json格式

格式1
對象: { "k1":obj,"k2":obj } （鍵必須是字符串）
格式2
數組: [ obj1,obj2,obj3 ]

數組格式和對象格式相互嵌套

{ "k1":obj,"k2": [o1,o2, {"k3":o3} ] }
[o1,o2, {"k":v,"k2": [03,04] } ]

json格式使用

格式1：json表示javabean對象

<script type="text/javascript">
	/**
	 * 案例一
	 *  {key:value,key:value}
	 *  
	 * class Person{
	 * 	  String firstname = "張";
	 *    String lastname = "三豐";
	 *    Integer age = 100;
	 * }
	 * 
	 * Person p = new Person();
	 * System.out.println(p.firstname);
	 */
	//json數據格式變現java對象
    var person={"firstname":"張","lastname":"三豐","age":100};
    //取出三豐
    alert(person.lastname);
  </script>

格式2:數組型json嵌套多個對象

此種json本質是數組，數組當然能嵌套多個對象了
既然是數組，那麼json肯定可以遍歷了

 <script type="text/javascript">
  	/**
	 * 案例二
	 *  [{key:value,key:value},{key:value,key:value}]
	 *  JSON數據本質是數組
     *  有2個元素,每個元素都是一個對象
	 */
  	var json=[
        {"firstname":"張","lastname":"三豐","age":100},
        {"firstname":"張","lastname":"無極","age":18}
    ];
  	//json本質數組 那麼就來遍歷下吧
    for(var i=0;i<json.length;i++){
        alert(json[i].firstname+"|"+json[i].lastname+"|"+json[i].age);
    }
  </script>

格式3:對象型json嵌套數組

對象型json是k:v k必須字符串,而v是對象,既然是對象,那麼什麼都可以放了,自然包括數組

此種json本質是單個對象,不過對象內的屬性值是個數組(數組內兩個對象)

<script  type="text/javascript">
   /**
	 * 案例三
	 * {
	 *   "param":[{key:value,key:value},{key:value,key:value}]
	 * }
	 *  JSON數據本質是對象
    *   對象的鍵是param
    *   對應一個值,值是數組
    *   數組2個元素,都是對象
	 */
   var json={
       "param":[
           {"firstname":"張","lastname":"三豐","age":100},
           {"firstname":"張","lastname":"無極","age":18}
       ]
   };
   //取出無極
    alert(json.param[1].lastname);
  </script>

格式4：對象型json嵌套多個數組

此種json本質是單個對象,不過對象有2個屬性,每個屬性的值又是對象數組罷了

<script type="text/javascript">
   /**
	 * 案例四
	 * {
	 *   "param1":[{key:value,key:value},{key:value,key:value}],
	 *   "param2":[{key:value,key:value},{key:value,key:value}],
	 *   "param3":[{key:value,key:value},{key:value,key:value}]
	 * }
	 *  JSON數據本質是對象
    *  對象有三個鍵值對
    *    param1
    *      對應的值是數組
    *      數組中2個元素是對象
    *    param2
	 */
   var json={
        "param1":[
            {"firstname":"張","lastname":"三豐","age":100},
            {"firstname":"張","lastname":"無極","age":18}
        ],
       "param2":[
           {"firstname":"李","lastname":"逍遙","age":100},
           {"firstname":"雲","lastname":"天河","age":18}
       ]
   };

   //取出天河
    alert(json.param2[1].lastname);
    //可以單獨取出某個鍵，然後遍歷
  </script>

ajax內使用json

服務器返回json

<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
    //發送ajax請求 獲取服務器響應的json格式數據
    function fn() {
        var url="/web11/jquery_json";
        $.post(url,null,function (data) {
            alert(data.firstname+"|"+data.lastname+"|"+data.age);
        },"json");
    }
</script>

@WebServlet(urlPatterns = "/jquery_json")
public class Jquery_jsonServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("servlet");
        //向客戶端反饋json格式數據
        response.setContentType("text/html;charset=utf-8");
        //定義json格式數據 {"firstname":"張","lastname":"三豐","age":100}
        String json="{\"firstname\":\"張\",\"lastname\":\"三豐\",\"age\":100}";//注意轉義字符的使用
        // 自己寫容易錯 少了一個:或者多一個,就全掛了    還是先寫好一般的然後複製粘貼吧
        response.getWriter().write(json);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

很明顯，服務器端沒有現成的json格式數據，只有javebean對象，肯定要學習javabean->json的工具類

之前用過fastjson與jsonlib.此處再來回顧下jsonlib吧

javabean轉json工具

JSON-LIB工具

作用: Java中的數據轉成JSON格式數據
java數據可以是包含：對象,數組,集合

2010年的，稍微有點落後了，而且jar包超級多...不如Gson和fastJson

需要的jar包還真多：

自己新建lib目錄:(後期建立了web工程模板就不用了)

右鍵add as library

對象轉json：JSONObject.fromObject(o).toString()

 public void objectToJson(){
        Person person = new Person("張三", 20, "武當山");
        //JSON-LIB工具類靜態方法fromObject 返回值還是此類對象
        //獲取返回的此類對象後再調用toString()方法就行了
        String s = JSONObject.fromObject(person).toString();
        System.out.println("s = " + s);
    }

集合數組轉json:JSONArray.fromObject(list).toString();

public void ListToJson(){
        List<Person> list=new ArrayList<Person>();
        list.add(new Person("張三", 20, "武當山"));
        list.add(new Person("李四", 20, "武當山"));
        list.add(new Person("王五", 20, "武當山"));
        //JSON-LIB裏的JsonArray類的靜態方法fromObject
        String json = JSONArray.fromObject(list).toString();

        //array轉數組集合都行
        //String[] strs={"qq","weixin","msn"};
        //String json = JSONArray.fromObject(strs).toString();
        System.out.println("json = " + json);
    }

Gson工具

google公司開發的轉換工具
Java中的數據轉成JSON數據

好處，就一個jar包.方便，一個方法解決所有。（就是對象需要自己new）

目前發現的最好用的，就是還是不知道有沒有fastjson那樣循環調用的問題

public void ListToJson(){
        List<Person> list=new ArrayList<Person>();
        list.add(new Person("張三", 20, "武當山"));
        list.add(new Person("李四", 20, "武當山"));
        list.add(new Person("王五", 20, "武當山"));
        //gson工具轉換爲json
        Gson gson = new Gson();
        String json = gson.toJson(list);//此方法可以傳入任何類型參數:對象、集合、數組都行   一個方法全部解決
        System.out.println("json = " + json);
    }

fastjson工具

阿里開發的java數據轉JSON數據工具

好處：就一個jar包

練習:

ajax註冊時檢查用戶名是否被佔用

前端UI:

<div class="form-group">
	<label for="username" class="col-sm-2 control-label">用戶名</label>
	<div class="col-sm-6">
		<input type="text" class="form-control" id="username"
			placeholder="請輸入用戶名" οnblur="check()">
		<span id="userSpan"></span>
	</div>
</div>

<script type="text/javascript">
    /**
	 * 獲取文本框輸入的內容
	 * ajax將內容發送到服務器
	 * 接收響應數據 text
	 * 判斷結果內容，決定給出何種提示
     */
    function check() {
        var username=$("#username").val();
        if(username.trim()===""){
            return;
        }
        //發送請求
        $.get(
            "/web11_store/check",
            "username="+username,
			function (data) {
				//alert(data);
				if(data==="true"){
				    $("#userSpan").html("可以註冊").css("color","green");
				}else{
                    $("#userSpan").html("該用戶名已經被佔用").css("color","red");
				}
            },"text"
		);
    }
</script>

後臺:

@WebServlet(urlPatterns = "/check")
public class CheckServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        User user = new UserService().check(username);
        PrintWriter writer = response.getWriter();

        if(user==null){
            writer.write("true");
        }else{
            writer.write("false");
        }
    }
}

ajax實現文本框搜索時自動補全

事件內寫this:傳回當前標籤dom對象
style內:
    position: absolute 不會撐高而影響其他div
    z-index: 5 值越大,優先級越高,越靠近你臉(越不會被其他樣式遮擋)
事件: onmouseover  onmouseout

前端（難點）：

<form class="navbar-form navbar-right" role="search">
	<div class="form-group">
		<input type="text" class="form-control" placeholder="Search"
		οnkeyup="search()" id="word">
	</div>
	<button type="submit" class="btn btn-default">Submit</button>
	<%--position: absolute 不會撐高而影響其他div
		z-index: 5 值越大,優先級越高,越靠近你臉(越不會被其他樣式遮擋)
	--%>
	<div id="proID" style="margin-top: 15px;display: none; z-index: 5; position: absolute ;border: 1px solid red;width:195px;">
		hello
	</div>
</form>

<script type="text/javascript">
	function search() {
		var word=$("#word").val().trim();
		if(word.trim()==="") {
		    $("#proID").hide();
		    return;//不要浪費資源
        }
		//alert(word);
		$.get(
		    "/web11_store/search",
			"word="+word,
			function (data) {
		        var proId=$("#proID");
		        //判斷json是否爲空
		        if($.isEmptyObject(data)){
                    proId.hide();
		            return;
                }
                proId.show();
                var s="";
				$.each(data,function () {
				    s+="<div οnmοuseοver='over(this)' οnmοuseοut='out(this)' style='border-bottom: 1px solid #909090'>"+this.pname+"</div>";
                });
				proId.html(s);
            },"json"
		);
    }
    
    function over(obj) {
	    //事件內寫this 傳回當前標籤dom對象
		$(obj).css("background-color","yellow");
    }
    function out(obj) {
        $(obj).css("background-color","");
    }
</script>

後臺：

@WebServlet(urlPatterns = "/search")
public class SearchServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String word = request.getParameter("word");
        List<Product> list = new ProductService().search(word);
        Gson gson = new Gson();
        String json = gson.toJson(list);
        System.out.println("json = " + json);
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write(json);
    }
}

樹葉子_

發佈了388 篇原創文章 · 獲贊 89 · 訪問量 9萬+

私信關注

AJAX