php之四厚積薄發(fā)ajax

1、Ajax 技術(shù)作者：西嶺第8章 Ajax與jsonXML之所以應(yīng)用廣泛，就因?yàn)閄ML數(shù)據(jù)結(jié)構(gòu)化明確，適合大數(shù)據(jù)傳輸；但是，在中生成XML數(shù)據(jù)時(shí)，需要填寫很多成對(duì)，然后響應(yīng)頭為XML；而在JS時(shí)，也要進(jìn)行DOM節(jié)點(diǎn)的遍歷查找；而字符串，沒(méi)有結(jié)構(gòu)化，容易造成，無(wú)法完成大量數(shù)據(jù)的傳輸；難道，就不能創(chuàng)造一種具有結(jié)構(gòu)明確的字符串格式嗎？生成和簡(jiǎn)單，易讀且結(jié)構(gòu)化明確，適合大數(shù)據(jù)傳輸?shù)淖址Y(jié)構(gòu)：JSONname:,age:45,height:172name:,age:45,height:172,name:大腳,age:43,height:168,name:8.1JSONJSON 指的是 JavaScr p

2、t 對(duì)象表示法（JavaScr pt Object Noon）JSON 是輕量級(jí)的文本 JSON 獨(dú)立于語(yǔ)言 *格式JSON 具有自我描述性，更易理解注意：JSON 使用 Javascr pt語(yǔ)法來(lái)描述數(shù)據(jù)對(duì)象，但是 JSON 仍然獨(dú)立于語(yǔ)言和。JSON器和 JSON 庫(kù)支持許多不同的編程語(yǔ)言。JSON 其實(shí)就是長(zhǎng)的和JS對(duì)象幾乎一樣的 字符串 ，8.2生成JSON & JSjson之前的案例中，修改第6章案例中從數(shù)據(jù)庫(kù)獲取到數(shù)據(jù)后，生成XML格式返回給前端，代碼，使生成json字符串：connect( localhost , root , );query( use test ); query

3、( set names utf8 );/SQL 語(yǔ)句$sql = selectfrom test;$res =$data = ; while($row =query($sql);fetch assoc($res)$data = $row;/json encode 轉(zhuǎn)為json字符串echo json encode($d);修改第6章案例中前端代碼，使JSjson字符串為數(shù)組對(duì)象：var fm = gid( su );fm.onclick = function() var xhr = cXHR();xhr.onreadysechange = function()if(xhr.readySvar

4、d = xhr.respo/將json字符串var f = JSON.parse(d);/循環(huán)數(shù)組for(var i=0;if.length;i )/獲取對(duì)象值var u = ;gid( d ).innerHTML = u ;var url = 08 2. xhr.open(/設(shè)置請(qǐng)求頭xhr.setRequestHeader( Content type , application/x www form urlencoded ); xhr.send();8.3 無(wú)刷新錄入系統(tǒng)-案例前臺(tái)代碼： ： ： var btu = gid( btu ); btu.onclick = func

5、tion()var inp =.ge/將數(shù)據(jù)存入JS對(duì)象；var ar = name:inp0.value,age:inp1.value,sex:inp2.value;/ console.log(ar);/打印并查看數(shù)據(jù)類型var jn = JSON.stringify(ar);/將JS對(duì)象轉(zhuǎn)為JSON字符串/ console.log(jn);/打印并查看數(shù)據(jù)類型/Ajax 發(fā)送數(shù)據(jù)var xhr = cXHR(); xhr.onreadysif(xhr.readySe=4)if(xhr.responseText = 1)inp0.value=inp1.value= inp2.value=;a

6、lert( 錄入成功 );elsealert( 錄入失敗 );xhr.open( get , 08 3. xhr.send();?data= jn);代碼8.4 知識(shí)點(diǎn)總結(jié)8.4.1 JS操作JSON結(jié)果： ,娜美,結(jié)果：name:,age:17,money:5,nature:橡膠結(jié)果：/數(shù)組形式的JSON字符串轉(zhuǎn)JSvar arr = ,娜美, ; var s = JSON.parse(arr);/結(jié)果為 JS 數(shù)組/對(duì)象形式的JSON字符串轉(zhuǎn)JSvar arr = name:,age:17,money:5,nature:橡膠 ; var s = JSON.parse(arr);/結(jié)果為 J

7、S對(duì)象 console.log(s);/JS對(duì)象轉(zhuǎn)JSON字符串var arr = name :, age :17, money :5, nature : 橡膠 ; var s = JSON.stringify(arr);/結(jié)果為 對(duì)象形式的 JSON 字符串console.log(s);/JS數(shù)組轉(zhuǎn)JSON字符串var arr = , 娜美 , var s = JSON.stringify(arr);/結(jié)果為 數(shù)組形式的 JSON 字符串console.log(s);connect( localhost , root , ); query( use test );query( set nam

8、es utf8 );/獲取前臺(tái)傳參$json = $ GET data ;/ echo $json;/將JSON字符串為對(duì)象/ $d = json decode($json);/ $sql = inserto test(name,age,sex) values ( .$d name. , .$d age. , .$d sex. ) ;/將JSON字符串為$d = json decode($json,true);$sql = inserto test(name,age,sex) values ( .$d name . , .$d age . , .$d sex . ) ;$res =if(ins

9、ert id()0) echo 1;elseecho 0;結(jié)果：8.4.2操作JSON結(jié)果：array(5) 0= stri g(6) 1= stri g(6) 2= stri g(6) 娜美 3= stri g(6) 4= stri g(6) 結(jié)果：object(stdClass)#1 (4) ame= stri g(6) age= i t(17) mo ey= i t(5) ature= stri g(6) 橡膠 array(4) ame= stri g(6) age= i t(17) mo ey= i t(5) ature= stri g(6) 橡膠 結(jié)果：,娜美,/關(guān)聯(lián)數(shù)字$arrs

10、= name =, age =17, money =5, nature = 橡膠 ;/對(duì)象class Hz$arr = new Hz();$arr name =;$arr age = 17;$arr money = 5;$arr nature = 橡膠 ;/中關(guān)聯(lián)數(shù)組和對(duì)象，生成的JSON字符串均為對(duì)象形式JSON echo json encode($arrs);echo json encode($arr);/$arr = ,娜美,$jn = json encode($arr);/結(jié)果為 數(shù)組形式的 JSON 字符串var dump($jn);/對(duì)象格式的JSON字符串轉(zhuǎn)$d = name:/

11、結(jié)果為$s = json decode/結(jié)果為$s = json decode($d，true);var dump($s);/數(shù)組格式的JSON字符串轉(zhuǎn)$d = ,娜美, ;$s = json decode($d);/結(jié)果為var dump($s);console.log(s);8.4.3 總結(jié)生成JSON：JS 數(shù)組轉(zhuǎn)JSON為 數(shù)組形式JSON JS 對(duì)象轉(zhuǎn)JSON為 對(duì)象形式JSON索引數(shù)組轉(zhuǎn)JSON為 數(shù)組形式JSON關(guān)聯(lián)數(shù)組轉(zhuǎn)JSON為 對(duì)象形式JSON對(duì)象轉(zhuǎn)JSON為 對(duì)象形式JSONJSON：數(shù)組形式JSON轉(zhuǎn) JS數(shù)組對(duì)象形式JSON轉(zhuǎn) JS對(duì)象數(shù)組形式JSON轉(zhuǎn)對(duì)象形式JSO

12、N轉(zhuǎn)對(duì)象形式JSON轉(zhuǎn)索引數(shù)組對(duì)象關(guān)聯(lián)數(shù)組(參數(shù)true)函數(shù)及方法：json_encode()：轉(zhuǎn)JSON；json_decode(data，true):JSON 轉(zhuǎn)對(duì)象或關(guān)聯(lián)數(shù)組；JSON.parse():JSON字符串轉(zhuǎn)JS JSON.str ng fy():JS轉(zhuǎn)JSON注意：JSON就是字符串，各種編程語(yǔ)言都可以或生成的字符串第9章 Ajax框架的封裝如果一個(gè)頁(yè)面中有十幾個(gè)地方用到Ajax，那么需要寫十幾次open()、十幾次send()、十幾次獲取xhr對(duì)象；代碼 復(fù)相當(dāng)多，而凡是有代碼 復(fù)的地方，就有封裝的可能；創(chuàng)建新文件： ajax.js9.1 餐前甜點(diǎn)之前為了方便使用，封裝過(guò)

13、使用指定 d 獲取DOM對(duì)象及獲取xhr對(duì)象；對(duì)之前的代碼進(jìn)行一次修改，使其更加優(yōu)雅；定義一個(gè)自調(diào)用函數(shù)為什么 定義一個(gè)自調(diào)用函數(shù)？在實(shí)際項(xiàng)目開發(fā)中，如果一個(gè)項(xiàng)目同時(shí)引入了多個(gè)javascr pt框架，可能會(huì)產(chǎn)生命名的問(wèn)題，如果使用自調(diào)用函數(shù)來(lái)封裝javascr pt框架，所有變量處于封閉狀態(tài)，就可以避免這個(gè)問(wèn)題。封裝一個(gè)$函數(shù)，用于獲取指定id的dom對(duì)象(function()/封裝$函數(shù)，獲取指定 id 的DOM對(duì)象并返回給調(diào)用者var $ = function(id)return.geementById(id);)();臺(tái)代碼中引入并使用ajax.js(function()/code)(

14、);divalert($( d );報(bào)錯(cuò)原因： 函數(shù) $ 為局部變量；讓 $ 局部變量全局化(function()/封裝$函數(shù)，獲取指定 id 的DOM對(duì)象并返回給調(diào)用者var $ = function(id)return.geementById(id);/將局部變量 $ window.$ = $;)();給頂層window對(duì)象，使其成為全局變量9.2 封裝get方法ajax代碼都會(huì)寫，問(wèn)題是：如何把代碼放進(jìn)函數(shù)中并且外部可以調(diào)用？(function()/封裝$函數(shù)，獲取指定 id 的DOM對(duì)象并返回給調(diào)用者var $ = function(id)return.geementById(id);

15、/將局部變量 $ window.$ = $;/var gets = function(url)var xhr = new XMLHttpRequest(); xhr.onreadysif(xhr.readySalert(xhr.responseText);xhr.open( get ,url); xhr.send();/將局部變量 gets window.ajax get = gets;)();這樣寫并沒(méi)有語(yǔ)法錯(cuò)誤，也可以正常調(diào)用，但是，隨著功能的不斷增加，的wndow對(duì)象也會(huì)被賦予各種各樣的值，最終還是會(huì)導(dǎo)致；在JavaScript中一切都是對(duì)象$ 也可以被當(dāng)作對(duì)象，就可以將ajax函數(shù)賦值

16、給 $ ；(function()/封裝$函數(shù)，獲取指定 id 的DOM對(duì)象并返回給調(diào)用者var $ = function(id)return.geementById(id);/ajax函數(shù)，并給$;$.get = function(url)var xhr = new XMLHttpRequest();xhr.onreadysechange = function()if(xhr.readySe = 4)alert(xhr.responseText);xhr.open( get ,url); xhr.send();window.$ = $;)();前臺(tái)調(diào)用$.get( 09 1.);9.3 解決獲

17、取Ajax對(duì)象的兼容性修改上節(jié)代碼：/獲取Ajax對(duì)象$.init = function()tryreturn new XMLHttpRequest()catch(e);tryreturn new ActiveXObject(.XMLHTTP )catch(e);/ajax函數(shù)，并$.get = function(url)var xhr = $.init(); /調(diào)用init,獲取ajax對(duì)象xhr.onreadysechange = function()if(xhr.readySalert(xhr.responseText);xhr.open( get ,url); xhr.send();9

18、.4 獲取Ajax的返回值前臺(tái)調(diào)用：var cb = function(msg)$( d ).innerHTML = msg;$.get( 09 1.,cb);修改 ajax.js$.get = function(url,callback)var xhr = $.init(); /調(diào)用init,獲取ajax對(duì)象xhr.onreadysechange = function()if(xhr.readyScallback(xhr.responseText);xhr.open( get ,url); xhr.send();前臺(tái)調(diào)用修改：/ var cb = function(msg)/ $( d ).

19、innerHTML = msg;$.get( 09 1.,function(msg)$( d ).innerHTML = msg;);9.5 配合修改 ajax.js獲取不同的返回值類型/ajax函數(shù)，并給$;$.get = function(url,callback,type=null)var xhr = $.init(); /調(diào)用init,獲取ajax對(duì)象xhr.onreadysechange = function()if(xhr.readySe = 4)if(type=null)callback(xhr.responseText);if(type= xml ) callback(xhr.

20、responseXML);if(type= json )var t = JSON.parse(xhr.responseText); callback(t);xhr.open( get ,url); xhr.send();前臺(tái)調(diào)用，代碼修改：$.get( 09 1.,function(msg)console.log(msg);, json );9.6 仿搜索推舉-案例模糊查找獲取數(shù)據(jù)：$v = $ GET v ;connect( localhost , root , );query( use test ); query( set names utf8 );/SQL 語(yǔ)句$sql = select

21、from test where name like .$v.% ;$res =$data = ; while($row =query($sql);fetch assoc($res)$data = $row;echo json encode($data);前臺(tái)請(qǐng)求遍歷數(shù)據(jù)：/oninput 元素的值發(fā)生改變時(shí)觸發(fā)。/該事件僅支持、 元素$( key ).oninput = function() var v = this.value;$.get( 09 6./ console.log(msg);$( result ).innerHTML= ; for(var i=0;imsg.length;i )

22、$( result ).innerHTML = ;, json );9.7 無(wú)刷新分頁(yè)整體思路：用戶點(diǎn)擊上一頁(yè)、下一頁(yè)，點(diǎn)擊觸發(fā)事件，根據(jù)當(dāng)前頁(yè)碼，拼接ajax請(qǐng)求參數(shù)，發(fā)送請(qǐng)求；接受請(qǐng)求及參數(shù)，數(shù)據(jù)庫(kù)獲取數(shù)據(jù)，處理數(shù)據(jù)后返回前臺(tái)；前臺(tái)接到數(shù)據(jù)后，刪除舊數(shù)據(jù)，遍歷添加新數(shù)據(jù)；前臺(tái)代碼：上一頁(yè)下一頁(yè) function pub(p)$.get( 09 7page.?page= p,function(msg)/ console.log(msg);$(h).value = msg.p;/更改當(dāng)前頁(yè)碼數(shù) delete msg.p;/刪除舊數(shù)據(jù)/制作表格頭$(tb).innerHTML

23、 = /遍歷數(shù)據(jù)并展示 for(var i=0;i3;i )var h = ;h = msgi.id ;h = ; h = ;$(tb).innerHTML =h;, json );/頁(yè)面加載完成，調(diào)用函數(shù)發(fā)送ajax window.onload = function()pub(0);/上一頁(yè) function s()pub(parse($( h ).value) 1); /當(dāng)前頁(yè)減一/下一頁(yè) function x()pub(parse($( h ).value) 1);/當(dāng)前頁(yè)加一代碼：connect( localhost , root , );/查詢SQL/獲取數(shù)據(jù)總條

24、數(shù)$sql = select count( ) as num from test;$res =$row =fetch assoc($res);$count= $row num ;/獲取數(shù)據(jù)總條數(shù)$psize = 3; /設(shè)置每頁(yè)條數(shù)/ceil 向上取整$pcount = ceil($count/$psize);/最大頁(yè)碼數(shù)/獲取get傳參，第幾頁(yè)數(shù)據(jù)$page = isset($ GET page )?$ GET page :0; if($page$pcount)/頁(yè)碼大于最大數(shù)，則去最大數(shù)$page = $pcount;$offset = ($page 1) $psize; /計(jì)算查詢區(qū)間$

25、sql = selectfrom test limit $offset,$psize;$res =$data = ;query($sql);while ($row =$data = $row;/返回當(dāng)前頁(yè)碼數(shù)$data p = $page;fetch assoc($res) echo json encode($data);9.8 作業(yè)封裝T 方法到 ajax.js第10章 JSONP技術(shù)10.1 認(rèn)識(shí)jsonp $.get(/1.,function();ajax 請(qǐng)求的URL地址，不在當(dāng)前下，就會(huì)出現(xiàn)一下錯(cuò)誤：同源策略，也叫跨域從一個(gè)域上加載的策略；，獲取或操作另一個(gè)域上的資源；但是，公司內(nèi)部系統(tǒng)的數(shù)據(jù)交互就無(wú)法進(jìn)行：公司OA系統(tǒng) ：.公司系統(tǒng) ：.公司ESM系統(tǒng) ：.而Web頁(yè)面上調(diào)用js文件時(shí)則不受是否跨域的影響（不僅如此，src 的能力就是把還發(fā)現(xiàn)凡是擁有src這個(gè)屬性的都擁有跨域的能力，比如scr pt、 mg、 frame）；的數(shù)據(jù)資源加載到本地(、JS代碼等);前臺(tái)代碼： /提前寫好函數(shù)，調(diào)用函數(shù)需要傳參 function cb(msg)console.log(msg);代碼：$arr = a =1, b = san , c = wu , d =4;$