Ajax後端極簡筆記

AJAX

第一章：AJAX基礎

概念：AJAX = Asynchronous JavaScript And XML（異步的 JavaScript 和 XML）。阿賈克斯

AJAX 不是新的編程語言，而是一種使用現有標準的新方法。

AJAX 是與服務器交換數據並更新部分網頁的藝術，在不從新加載整個頁面的狀況下。簡言之：是局部刷新技術。異步刷新。

回顧歷史：

• Web 1.0 sina sohu 用戶被動接受新聞
• Web 2.0 社區，web羣 互動 環節增長，用戶和服務器交互
• Web 3.0 自媒體，突出客戶的實現，客戶也能夠成爲中心，其餘人訂閱 參與 討論等
• Web 4.0 物聯網時代 自媒體 人 服務器 +機器交互，機器自己也是參與者。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-b2zn4Crx-1595717644137)(E:\政通路\課堂筆記\S2\Ajax\assets\image-20200509143743804.png)]

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-M9fByRhC-1595717644139)(E:\政通路\課堂筆記\S2\Ajax\assets\image-20200509143807384.png)]

1.Ajax核心 XMLHttpRequest

全部現代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用於在後臺與服務器交換數據。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

1.1 對象的建立

let xmlhttp;if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }else
  {// code for IE6, IE5
  	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }123456789

1.2 對象的方法

method：http請求的方法有倆get/post,選擇就是get/post。

url：就是View層的頁面要提交到服務器的請求，通常是Servlet

async:true：異常請求；false:同步請求

異步請求：效率、性能更高；

同步請求：會致使網絡卡頓|網頁無響應的現象、頁面凍結。

方法	描述
open(method,url,async)	建立一個請求
send(string)	將請求發送到服務器。 string：僅用於 POST 請求

1.3 onreadystatechange 事件

當請求被髮送到服務器時，咱們須要執行一些基於響應的任務。

每當 readyState 改變時，就會觸發 onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態信息。

下面是 XMLHttpRequest 對象的三個重要的屬性：

屬性	描述
onreadystatechange	存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
readyState	存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。 0: 請求未初始化 1: 服務器鏈接已創建 2: 請求已接收 3: 請求處理中 4: 請求已完成，且響應已就緒
status	200: "OK"404: 未找到頁面；500：服務器問題

1.4 服務器的響應

如需得到來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

屬性	描述
responseText	得到字符串形式的響應數據。
responseXML	得到 XML 形式的響應數據。

2.使用步驟

如何使用ajax，使用有兩種：一種是前端的純粹的使用，node+ajax；一種是後臺的，咱們關注的是後臺。

咱們以前增長用戶的時候，假設用戶名(帳戶)不能重複，咱們以前是沒有判斷的。

當數據庫服務器存在某用戶的時候，文本框離開，則報已經存在該用戶了；不然，顯示能夠註冊。

• 建立XMLHttpRequest對象
• 設置請求信息open(get|post,url,true|false)
• 向服務器發送請求
• 讓XmlHttpRequest對象接受服務器的響應數據，經過建立的回調函數
• 編寫服務器端處理客戶端請求

步 驟	請求方式	實 現 代 碼
初始化組件	GET	xmlHttpRequest.open( 「GET」,url, true );
POST	xmlHttpRequest.open( 「POST」,url, true ); xmlHttpRequest.setRequestHeader( 「Content-Type」, 「application/x-www-form-urlencoded」 );
發送請求	GET	xmlHttpRequest.send( null );
POST	xmlHttpRequest.send(「key=xxx&type=12&year=2016」 );

get代碼實現：

 //1.建立XmlHttpRequest對象,封裝一下，封裝到一個函數;
        function createXhr() {
            if(window.XMLHttpRequest)
                return new XMLHttpRequest();//若是有，則建立其對象;
            else
                return new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.開始實現咱們的目標；離開的事件是blur
        $(function () {
            //離開的時候，先判斷一下；用戶名不能爲空，實際上應該是正則驗證;
            $("#name").blur(function () {
                let name=$("#name").val();
                if(name==null||name==''){//後續使用正則實現
                    $("#nameinfo").html("用戶不能爲空!").addClass("nameinfo");
                    /*剛纔的錯誤是style裏面加了一個html的註釋，虧!!!*/
                }else{
                    //不然，就是輸入的不是空了，有值，那這個值就要看看是否存在於數據庫了。
                    //2.1 這時候要獲得XmlHttpRequest對象;
                    xhr=createXhr();
                    //2.2設置請求行open,請求後臺的Servlet,客戶端向服務器發送了一個參數name，值name
                    xhr.open("get","userServletByName?name="+name,true);
                    //2.3.發送請求,get的時候不加東西；
                    xhr.send(null);
                    //2.4當事件改變Ok的時候，響應的函數；
                    xhr.onreadystatechange=function () {
                        //readyState==4;而且狀態爲200的時候，才OK。
                        if(xhr.readyState==4 && xhr.status==200){
                            //定義變量data，接受異步對象xhr的服務器的響應數據;由Servlet來返回
                            let data=xhr.responseText;
                            console.log(data);
                            //暫停一下;
                            //下面就是根據data響應的數據值作出判斷;
                            //服務器端響應給咱們，true|false了.data-->文本;咱們把它當成了boolean
                            if(data=='true'){
                                $("#nameinfo").html("用戶名已經註冊").addClass("nameinfo");
                            }else{
                                $("#nameinfo").html("用戶名能夠註冊");
                                $("#nameinfo").css("color","green");
                            }
                        }

                    }
                }
            });
        })123456789101112131415161718192021222324252627282930313233343536373839404142434445

post代碼實現：

修改get的2. 3.步驟便可;

 //2.2設置請求行open,請求後臺的Servlet,客戶端向服務器發送了一個參數name，值name
                    //xhr.open("get","userServletByName?name="+name,true);
                    xhr.open("post","userServletByName",true);
                    xhr.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" ); //必須有;
                    //2.3.發送請求,get的時候不加東西；
                    //xhr.send(null);get 沒東西;
                    xhr.send("name="+name);1234567

問題：

1.[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-6K4fNd27-1595717644143)(E:\政通路\課堂筆記\S2\Ajax\assets\image-20200509155731042.png)]

//向客戶端發響應，編碼要一致;
        response.setContentType("text/html;charset=UTF-8");
        response.setCharacterEncoding("UTF-8");123

2.出來2行的問題是須要加判斷,而且&&符號；

 if(xhr.readyState==4 && xhr.status==200){
     代碼 }123

總結一下：

1.瞭解異步對象XmlHttpRequest

2.瞭解其四大步驟；

3.經過javaweb代碼來實踐一下。這個是重點，看視頻，一步一步走；

第二章 jQuery實現Ajax

傳統方式實現Ajax的不足

• 步驟繁瑣
• 方法、屬性、經常使用值很差記憶
• 處理複雜數據（如XML）比較麻煩
• 瀏覽器兼容問題

jQuery Ajax將Ajax相關操做進行了封裝。$.ajax() 方法經過 HTTP 請求加載遠程數據。

該方法是 jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get(), . p o s t ( ) 等 。 .post() 等。.post()等。.ajax() 返回其建立的 XMLHttpRequest 對象。

. a j a x ( ) 它 包 括 ： .ajax()它包括：.ajax()它包括：.get(),$.post()

2.1 語法格式

();小括號裏面包括了{}。

在{}裏面，寫了type,url,data,success,dataType這樣幾個key關鍵字的，給這幾個關鍵字賦值的時候，使用的是:"值"的方式。

$.ajax({

type: ‘POST’, //請求方式，默認爲get

url: url ,

data: data ,

success: success ,

dataType: dataType

});

參數

參數	描述
url	必需。規定把請求發送到哪一個 URL,Servlet|Controller
data	可選。映射或字符串值。規定連同請求發送到服務器的數據，客戶端向服務器的數據
success(result, textStatus, jqXHR)	可選。請求成功時執行的回調函數。
dataType	可選。規定預期的服務器響應的數據類型。 默認執行智能判斷（xml、json、script 或 html）。

昨天else以後的代碼替換：

 $.ajax({
                        type:"get",
                        url:"userServletByName",
                        //data:"name="+name, //是客戶端向服務器的請求數據
     					//按照json格式傳遞;
     					data:{"name":name},  //""裏面的是key,不帶"的是value。
                        datatype:"text",
                        success:function(result) {   //成功的時候，執行的匿名函數;對比昨天的onreadyStatechange
                            console.log(result);
                            if(result=='true'){
                                $("#nameinfo").html("用戶名已經註冊").addClass("nameinfo");
                            }else{
                                $("#nameinfo").html("用戶名能夠註冊").addClass("gre");
                            }
                        }
                    });12345678910111213141516

代碼量很是簡練。

第三章 JSON

概念：是一種輕量級的數據交換格式，採用徹底獨立於編程語言的文本格式來存儲和表示數據。英文：JavaScript Object Notation

3.1語法格式

{key1：value1, key2：value2, …} 的鍵值對結構，當值爲字符串的時候，須要使用"",引發來。

let str={「name」:「張三」,「age」:18,「address」:「河南鄭州」}

json數組,數組的格式：

[],這個[]裏面放多個{}對象或字符串

[

{}, 這些都是json格式

{},

{}

]

json對象讀取：

<!DOCTYPE html><html>
	<head>
		<meta charset="utf-8">
		<title>ajax</title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			//1.定義一個簡單的json對象
			//這個json對象，前面的key，id name  age,這些是否是數據庫裏面的字段呢？？？
			//未來，咱們的數據庫的數據，能夠轉換爲json數據,python,go,java均可以使用
			let user={"id":1,"name":"張三","age":22};
			//let user='{"id":1,"name":"張三","age":22}';
			//json字符串，字符串以""或'',包括起來;
			//console.log(user);
			//下面將這個json的數據拿到html元素裏面;
			$(function(){
				//加載的時候，追加到span裏面
				//訪問json對象的時候，格式：對象名.key,對象是user
				$("#cont").append("編號:"+user.id+"<br/>"+
								 "姓名:"+user.name+"<br/>"+
								 "年齡:"+user.age+"<br/>");
			})
		</script>
	</head>
	<body>
		<span id="cont" style="display:block;border: 1px solid #2A65BA;"></span>
	</body></html>1234567891011121314151617181920212223242526272829

json數組讀取：

<!DOCTYPE html><html>
	<head>
		<meta charset="utf-8">
		<title>json數組的格式</title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			//1.定義json數組格式;強調，不加''或""的都是對象格式;
			let users=[
				{"id":1,"name":"張三","age":22},
				{"id":2,"name":"李四","age":12},
				{"id":3,"name":"盧本偉","age":33}
			];
			console.log(users);//json對象數組;
			//目標：將name放到下拉框裏面？？？
			$(function(){
				//針對users左一個遍歷;
				for(let i=0;i<users.length;i++){
					//將name放到select元素裏面;value的好處，能夠未來給後臺傳遞id，name作顯示。
					$("#sel").append("<option value="+users[i].id+">"+users[i].name+"</option>");
				}
			})
		</script>
	</head>
	<body>
		<!-- 下拉框;下拉框裏面的元素對象是option列表對象； -->
		<select id="sel">
			
		</select>
		<!-- 如何擴充，將users的數據填充到table裏面呢？？？ -->
	</body></html>123456789101112131415161718192021222324252627282930313233

第四章 Ajax和Json

案例 Ajax實現搜索框自動補全

由於Ajax技術異步請求和無刷新特性，使得在客戶端用戶體驗愈來愈豐富。 最典型的一個案例是各大搜索引擎都應用的搜索關鍵字自動聯想功能，當打開Google或者百度， 在搜索欄中輸入關鍵字時， 會自動彈出不少和關鍵字相關的信息。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-L3AKdB5Y-1595717644148)(E:\政通路\課堂筆記\S2\Ajax\assets\image-20200512094045330.png)]

思路

1.當用戶鬆開鍵盤（輸入內容）時向服務器發送請求，處理事件是onkeyup;

2.服務器獲得客戶端的請求數據以後，去數據庫查詢結果，返回查詢結果到客戶端；

3.客戶端獲得響應數據以後，自動填充到自動提示區域；

4.在選中內容上，光標懸停會有背景突出顯示；

5.當咱們單擊某個內容的時候，內容顯示到搜索框，整個提示區域關閉；

步驟

1.構建頁面，onkeyup事件

搜索框的onkeyup事件;

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>
    <title>ajax自動補全</title>
    <style>
        @import url("css/news.css");
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        //1.2 搜索框onkeyup事件
        $(function () {
            $("#key").keyup(function () {
                //首選仍是先判斷文本框內容是否爲空;
                let key=$(this).val();
                if(key==null||key==''){
                    $("#tips").css("display","none");
                    return;
                }else{
                    //其餘，就是搜索框有內容，ajax操做；

                }
            });
        });
    </script></head><body>
    <!--1.1構建頁面：頁面元素（搜索框，按鈕，提示區域）-->
    <form action="" method="get">
        <input type="text" name="key" id="key" placeholder="請輸入新聞標題">
        <button id="search" type="button">搜索</button><br/>
        <div id="tips"></div>
    </form></body></html>1234567891011121314151617181920212223242526272829303132333435

2.客戶端請求服務器的數據

$.ajax({})–>Servlet–>業務層對象–>dao層對象–sql數據；

NewsDaoImpl容易出錯的代碼，sql語句的模糊查詢，再次強調！！！

能夠先填坑！！！

//        String sql="select * from news where title like ?";
//        //預編譯語句對象賦值，？% key %
//        Object[]params={"%"+key+"%"};

        String sql="select * from news where title like concat('%',?,'%')";
        Object[]params={key};
        return BaseDao.findList(sql,News.class,params);1234567

補充：fastjons jar

Servlet代碼

坑1：xml問題，須要設置編碼；

坑2：json,修改text/json,務必有json

 //1.服務器端的Servlet,接受客戶端的數據；
        String key=request.getParameter("key");
        //2.調用業務層的對象；業務層的對象，又須要去調用dao層對象;
        NewsService newsService=new NewsServiceImpl();
        //業務層對象，根據關鍵字來查找新聞;
        List<News> newsList = newsService.selNewsByKey(key);
        //System.out.println(newsList);
        response.setContentType("text/html;charset=utf-8");
        response.setCharacterEncoding("utf-8");
        //向客戶端發送數據;
        PrintWriter writer = response.getWriter();
        //注意：此處有變化，使用到了新的jar：fastjson
        //以前輸出的是List<News>對象;
        writer.print(JSON.toJSON(newsList)); //fastJson直接將咱們的對象集合轉換爲json數據;
        writer.flush();
        writer.close();12345678910111213141516

3.填充數據到顯示區域

這時候已經獲得數據了：

[{}] 是json數組;

//測試json數組的長度
                            //console.log(result.length);
                            //如何顯示2條json數組的數據；思路：循環；
                            let content="";  //定義變量，接受title的內容;
                            for(let i=0;i<result.length;i++){
                                content+="<div>"+result[i].title+"</div>";
                            }
                            //填充到提示區域;
                            $("#tips").html(content).show();123456789

4.5 剩下功能

 //4.背景突出顯示;利用hover(a,b):至關於mouseover,mouseout
                            $(".list_link").hover(
                                function(){
                                    $(this).addClass("hover");
                                },
                                function () {
                                    $(this).removeClass("hover");
                                }
                            );
                            //5.單擊選中內容的時候，提示區域沒有了，選中內容到了搜索框 ；
                            $(".list_link").click(function () {
                                $("#key").val($(this).html());
                                $("#tips").html("").hide();//清空，並隱藏;
                            });1234567891011121314

做業：如何顯示新聞標題 新聞做者,模仿天貓的自動補全；

  },
                            function () {
                                $(this).removeClass("hover");
                            }
                        );
                        //5.單擊選中內容的時候，提示區域沒有了，選中內容到了搜索框 ；
                        $(".list_link").click(function () {
                            $("#key").val($(this).html());
                            $("#tips").html("").hide();//清空，並隱藏;
                        });12345678910

做業：如何顯示新聞標題    新聞做者,模仿天貓的自動補全；

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-SlrYvPTS-1595717644153)(E:\政