Ajax和json

 

1、Ajax概述

1．什麼是同步，什麼是異步

同步現象：客戶端發送請求到服務器端，當服務器返回響應以前，客戶端都處於等待卡死狀態

異步現象：客戶端發送請求到服務器端，不管服務器是否返回響應，客戶端均可以隨意作其餘事情，不會被卡死

2．Ajax的運行原理

頁面發起請求，會將請求發送給瀏覽器內核中的Ajax引擎，Ajax引擎會提交請求到服務器端，在這段時間裏，客戶端能夠任意進行任意操做，直到服務器端將數據返回    給Ajax引擎後，會觸發你設置的事件，從而執行自定義的js邏輯代碼完成某種頁面功能。

2、js原生的Ajax技術

js原生的Ajax其實就是圍繞瀏覽器內內置的Ajax引擎對象進行學習的，要使用js原    生的Ajax完成異步操做，有以下幾個步驟：

1）建立Ajax引擎對象

2）爲Ajax引擎對象綁定監聽（監聽服務器已將數據響應給引擎）

3）綁定提交地址

4）發送請求

5）接受響應數據

//1.建立引擎對象

var xmlHttp=new XMLHttpRequest();

//2.綁定監聽

xmlhttp.onreadystatechange=function(){

       //5.接受響應數據

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

        var res=xmlhttp.responseText;

        alert(res);

        }

}

//3.綁定地址

xmlhttp.open("GET","${pageContext.request.contextPath}/ajax",true);

//4.發送請求

xmlhttp.send();

低版本的Internet Explorer（IE5和IE6）使用ActiveX對象

Variable=new ActiveXObject(「Microsoft.XMLHTTP」)

 

 

注意：若是是post提交

在發送請求以前設置一個頭

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

總結：

所用異步訪問都是ajax引擎

3、Json數據格式

 json是一種與語言無關的數據交換的格式，其做用是使用ajax進行先後臺數據交換，移動端與服務端的數據交換。

1．Json的格式與解析

json有兩種格式：

1）對象格式：{"key1":obj,"key2":obj,"key3":obj...}

2）數組/集合格式：[obj,obj,obj...]

 

例如：user對象 用json數據格式表示

{"username":"zhangsan","age":28,"password":"123","addr":"北京"}

List<Product> 用json數據格式表示

[{"pid":"10","pname":"小米4C"},{},{}]

 

注意：對象格式和數組格式能夠互相嵌套；json的key是字符串，json的value是對象

 

json的解析：

1.使用js從json中取數據，json是js的原生內容，也就意味着js能夠直接取出json對象中的數據。

   var person={「firstname」:「張」，「lastname」:」三豐」}；

    alert（person.lastname）;

    嵌套使用

　　var persons=[

　　　　　　　　{「firstname」:「張」，「lastname」:」三豐」},

　　　　　　　　{「firstname」:「李」，「lastname」:」市民」}

　　　　　　　　];

　　alert(persons[1].firstname);

 

　　var json={

　　　　「baobao」:[

　　　　　　　　　{「name」:」小雙」，」age」:28},

　　　　　　　　　 {「name」:」建寧」，」age」:18},

　　　　　　　　　]

　　　　　　　};

　　alert(json.baobao[1].name);

 

JSON的轉換插件能夠將java對象或幾個轉成json形式字符串。

json的轉換插件是經過java的一些工具，直接將java對象或集合轉換成json字符串。

經常使用的json轉換工具備以下幾種：

1）jsonlib

2）Gson：google

3）fastjson：阿里巴巴

 

4、 Jquery的Ajax技術

jquery是一個優秀的js框架，對js原生的ajax進行了封裝，與ajax操做相關的jqery方法常常使用到的爲一下三個方法

括號[]中的內容可寫可不寫

1）$.get(url, [data], [callback], [type])

2）$.post(url, [data], [callback], [type])

 

其中：

url：表明請求的服務器端地址

data：表明請求服務器端的數據（能夠是key=value形式也能夠是json格式）

callback：表示服務器端成功響應所觸發的函數（只有正常成功返回才執行）

type：表示服務器端返回的數據類型（jquery會根據指定的類型自動類型轉換）

經常使用的返回類型：text、json、html等

 

3）$.ajax( { option1:value1,option2:value2... } ); 

經常使用的option有以下：

async：是否異步，默認是true表明異步

data：發送到服務器的參數，建議使用json格式

dataType：服務器端返回的數據類型，經常使用text和json

success：成功響應執行的函數，對應的類型是function類型

type：請求方式，POST/GET

url：請求服務器端地址