ajax與json思維導圖及知識點梳理

ajax概述

• AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創建交互式網頁應用的網頁開發技術。

• AJAX = 異步 JavaScript和XML

• AJAX 是一種用于創建快速動態網頁的技術。

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

• 通過在前臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

應用場景

• 用戶名校驗

• 百度自動補全

• 商品查找

• 搜索圖片

javaScript中使用ajax(理解)

原生ajax

入門案例

• 1.創建一個核心對象(XMLHTTPRequest)該對象稱之為ajax引擎

• 2.編寫onreadystatechange事件所調用的函數回調函數

• 3.確定請求方式和請求路徑

• 4.發送請求

• 5.處理返回結果

api詳解

創建核心對象(XMLHttpRequest)

js代碼  ------>  翻譯器(js引擎)  -----> 被所有瀏覽器內置

ajax引擎對象被js引擎所包含

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");   }

屬性

• onreadystatechange事件在ajax對象狀態發生改變時,就會觸發該事件對象.onreadystatechange = function(){}

• readyState

  存有 XMLHttpRequest 的狀態

• 0: 請求未初始化

• 1: 服務器連接已建立

• 2: 請求已接收

• 3: 請求處理中

• 4: 請求已完成，且響應已就緒

• status響應狀態碼if(xmlhttp.readyState==4 && xmlhttp.status == 200){ 執行的代碼片段}

• responseText獲取服務器響應回來的文本信息

常用方法

• open(method,url,[async])

  設置請求的類型,請求地址以及是否異步處理請求。

• method：請求的類型；GET 或 POST

• url：文件在服務器上的位置

• async：true（異步）或 false（同步）

• send([string])

  將請求發送到服務器

• string：存放post請求攜帶的參數

• 在post請求時要設置請求參數的mime類型xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

小結:

原生ajax使用方式:

1.創建核心引擎對象(XMLHttpRequest)

        // 復制

    2.編寫回調函數(監聽ajax引擎對象的狀態變化)

        xmlhttp.onreadystatechange=function(){

        if(xmlhttp.readyState==4 && xmlhttp.status == 200){

// 獲取響應結果信息,并處理信息

                xmlhttp.responseText; 

}

    }

3.設置請求方式和請求路徑

// get請求攜帶參數拼接在請求路徑后面 ?參數=值&參數=值

xmlhttp.open(method,url,[async]);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

4.發送請求

// 參數格式: 參數=值&參數=值

// post請求攜帶的參數要想提交給服務器需要設置請求參數的mime類型

xmlhttp.send([post請求攜帶的參數]);

jQuery中使用ajax(★)

$.post(url,[params],fn,[type])

發送post請求

• url:請求的路徑

• params:請求的參數

• 格式1:字符串 key1=value1&key2=value2

• 格式2:json格式{"key1":value1,"key2":value2}

• fn:回調函數 (ajax請求執行完成后調用的函數)function(data){ //data:響應回來的數據 （xmlHttp.responseText）}

• type:返回內容的格式   text xml json

  默認返回text類型的數據

  一般不需要自己設置,如果需要設置一般設置為 "json"

$.get(url,[params],fn,[type])

發送get請求

$.ajax({url,[settings]})

• url:請求路徑

• type:請求方式

• data:請求參數

• success:請求成功后的回調函數

• error:請求失敗時調用此函數

• dataType:服務器返回的數據類型一般不需要自己設置,如果需要設置一般設置為 "json"

• async:設置是否異步提交 默認值為true(異步提交)

• 例如:$.ajax({ url:url, data:params, type:"post", success:f, error:function(){alert("失敗了")}, async:true});

• 注意事項: 默認get方式提交  

新增簽名方式:

$.get({[settings]});

• url:請求路徑

• data:請求參數

• success:請求成功后的回調函數

• error:請求失敗時調用此函數

• dataType:服務器返回的數據類型一般不需要自己設置,如果需要設置一般設置為 "json"

• async:設置是否異步提交 默認值為true(異步提交)

$.post([settings]);

• url:請求路徑

• data:請求參數

• success:請求成功后的回調函數

• error:請求失敗時調用此函數

• dataType:服務器返回的數據類型一般不需要自己設置,如果需要設置一般設置為 "json"

• async:設置是否異步提交 默認值為true(異步提交)

json

xml:

作用:

配置文件

數據傳遞的載體  ----> json

概述:

• JavaScript 對象表示法（JavaScript Object Notation）

• 是存儲和交換文本信息的語法。類似 XML

• 比 XML 更小、更快，更易解析

格式:

• 格式1:json對象  

• { "key":"value" , "key":value }

  key: String

  value可以為任意類型的數據  

• 格式2:json數組

• ["aa","bb",123,true]

• 格式3:混合json

• [{"name":"張三","age":18},{"name":"張三","age":18}]

• {"sudent":["張三","李四","王五"]};

javaScript中使用json

java對象轉json串

List:

張三 李四 王五 趙六 田七

list轉json: (json在java中以字符串的形式體現)

"['張三','李四'...]"

常見工具類

jsonlib

• 1.導入jar包

• 2.使用api

• JSONArray.fromObject(數組或者list)

• JSONObject.fromObject(對象或者map)

fastjson(阿里巴巴)

• JSON.toJSONString(str)可以轉一切對象

gson(google)

• 使用步驟:

• 1.Gson g = new Gson();

• 2.g.toJson(對象);可以轉一切對象

Jackson

開源免費的json轉換工具，springmvc轉換默認使用jackson

• 導入json相關jar包

• 創建核心解析對象

• ObjectMapper om = new ObjectMapper();

• om.writeValueAsString(obj)

案例:

案例1-檢測用戶名是否已經被注冊

需求分析:

在注冊頁面上,當用戶在用戶名的輸入框中輸入完用戶后,失去焦點時發送ajax請求,校驗該用戶名是否存在.

    該用戶名已存在:

提示: "該用戶名已被占用"

    該用戶名不存在:

提示: "?"

 技術分析:

blur: 失去焦點事件

ajax:

$.post(url,params,function(data){},"json|text");

步驟分析:

前臺:

提供注冊頁面,給用戶名的輸入框添加失去焦點事件

        輸入框對象.blur(function(){

        // 發送ajax請求

        var url = "demo1";

        var params = {"username":"tom"};

            $.post(url,params,function(data){

            // 判斷執行結果...

            },"text");

        });

后臺:

web:

Demo1Servlet:

a.獲取請求攜帶的參數信息: username

b.調用service處理業務邏輯

boolean flag = service.isRegister(username);

c.判斷執行結果

            if(flag){

            // 當前用戶名可以使用

            }else{

            // 用戶名已被占用    

            }

service:

isRegister(username)

            {

                User user = dao.isRegister(username);

                return user == null ? true : false ;

            }

dao:

isRegister(username)

            {

                sql = "select * from user where username = ? ";

                user;

            }

案例2-異步自動填充

需求分析:

當用戶在搜索框中輸入關鍵字,鍵盤彈起時,獲取用戶輸入的關鍵字,向服務器發送ajax請求,將匹配的熱搜詞展示到輸入框下面.展示4條.

技術分析:

keyup: 鍵盤彈起事件

ajax:

步驟分析:

前臺:

給搜索框添加鍵盤彈起事件:

搜索框對象.keyup(function(){

    // 發送ajax請求

    var url = "demo2";

        var params = {"keyWords":"t"};

            $.post(url,params,function(data){

            // 展示結果

            },"json");

});

后臺:

web:

Demo2Servlet:

//a.獲取用戶輸入的關鍵字

String keyWords = req....;

//b.調用service處理業務邏輯

List<Object> list = service.findKeyWords(keyWords);

//c.將執行結果寫回給ajax請求

service:

findKeyWords(keyWords) 

            {

                return dao.findKeyWords(keyWords);

            }

dao:

findKeyWords(keyWords)

            {

                sql = "select name from user where name like ? limit 4 ";

                template.queryForList(sql,Object.class,"%"+keyWords+"%");

            }

總結:

前后端分離:

同步 + 異步

ajax:

JavaScript的ajax: 原生ajax

1.創建ajax引擎對象: XMLHttpRequest

2.編寫監聽ajax對象狀態變化的函數

// 5.判斷狀態碼處理響應結果

3.設置請求方式和請求路徑

4.發送請求

jq:

$.post(url,params,function(data){},"text|json"); ★

$.get(url,params,function(data){},"text|json"); ★

    $.ajax({

url:url,

        type:"get|post",

        data:params,

        success:function(data){},

        dataType:"text|json"

    });

$.get({

url:url,

        data:params,

        success:function(data){},

        dataType:"text|json"

    });

$.post({

url:url,

        data:params,

        success:function(data){},

        dataType:"text|json"

    });

json: ★

格式:

json對象: {}

json數組: []

混合json: [] {}

將java對象轉成json: ★

jackson:

new ObjectMapper()

            om.writeValueAsString(obj);