詳細的Ajax使用

1. ajax對xml的接收和處理

xml主要作用:

主要保存和傳輸數據

1. xml文檔結構

史上最詳細的ajax教程（二），不容錯過

dom操作xml

getElementsByTagName(); //根據標簽名獲取元素

childNodes //獲取元素下面的子節點,返回數組

nodeValue //獲取節點的文本值

問題,如何獲取html中的form標簽元素

答:document.getElementsByTagName('form')[0];

//獲取上面的xml結構的book

document.getElementsByTagName('book')[1];

//獲取第二本書的名稱(盜墓筆記)

document.getElementsByTagName('book')[1].childNodes[0].childNodes[0].nodeValue;

注意一點:獲取文本節點的時候需要在調用一次childNodes[0].nodeValue

2. 使用ajax獲取php輸出的xml結構文檔

服務端輸出xml數據:

史上最詳細的ajax教程（二），不容錯過

console.log()或console.info()調試工具的使用:

史上最詳細的ajax教程（二），不容錯過

使用ajax來請求php輸出的xml數據:

史上最詳細的ajax教程（二），不容錯過

運行結果:

史上最詳細的ajax教程（二），不容錯過

2. json(數據傳輸格式)

1. 什么是json

什么是json?

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式

JSON的優點：

1、Javascript原生支持，后台語言幾乎全部支持；

2、輕量級數據格式，占用字符數量極少，特別適合互聯網傳遞；

3、可讀性較強，雖然比不上XML那么一目了然，但是xml組裝生成麻煩,json易於解析和生成

2.js中的json

例,用json描述一本書的信息

var json={ 'title':'盜墓筆記' , 'price':'100' };

基本: json以"{"開始,"}"結束

鍵值對以逗號","隔開

鍵和值之間以冒號":"隔開

代碼示例:

史上最詳細的ajax教程（二），不容錯過

3. php中的json

json_encode(數組/對象);

史上最詳細的ajax教程（二），不容錯過

json_encode("索引數組");============>js數組字符串

json_encode("關聯數組");============>json字符串

json_encode("索引關聯數組");============>json字符串

json_encode("對象");============>json字符串

代碼示例:

史上最詳細的ajax教程（二），不容錯過

輸出結果:

史上最詳細的ajax教程（二），不容錯過

json_decode();

json_decode("json字符串",true)重點掌握 =============>返回數組

json_decode("json字符串") =============>返回對象

史上最詳細的ajax教程（二），不容錯過

三.使用ajax+json實現多級聯動

category表結構:

史上最詳細的ajax教程（二），不容錯過

找游戲的子分類;

sql: select * from category where pid=游戲的ID

找食品的子分類;

sql: select * from category where pid=食品的ID

在js中通過JSON.parse()可以把json字符串變成json對象

史上最詳細的ajax教程（二），不容錯過

完整代碼:

php輸出json數據:

史上最詳細的ajax教程（二），不容錯過

ajax請求json數據:

史上最詳細的ajax教程（二），不容錯過

結果:

史上最詳細的ajax教程（二），不容錯過

app接口開發:

app接口開發就是我們后台程序員提供一個url地址供app開發者(android和ios)來調用,我們根據接口的參數不同做不同的業務邏輯處理,最后把處理的數據以json的格式輸出給我們的app調用者

4. 使用ajax做無刷新分頁的案例

1.無刷新的必要性

史上最詳細的ajax教程（二），不容錯過

如果我們通過"傳統方式"實現上圖的商品評論分頁效果，每次分頁的時候就會使得頭部、左側、底部等已經顯示的信息重新從服務器獲得出來，這樣對帶寬、服務器資源、用戶等待時間都有額外的損耗。如果使用ajax無刷新分頁，每次就只從服務器獲得"商品評論區域"信息即可，對各方面資源的使用就有相應節省。因此ajax無刷新分頁效果有其存在必要性。

2. 回顧傳統分頁

商品總記錄條數($count)、每頁顯示多少條($pagesize)

mysql數據庫關鍵字limit。

limit 偏移量，長度。

偏移量：(當前頁碼($page)-1)*每頁顯示條數。

第一頁: limit 0,7

第二頁: limit 7,7

第三頁: limit 14,7

ajax無刷新分頁是對傳統分頁效果的封裝：

http://網址/data.php?page=1

http://網址/data.php?page=2

ajax對象.open('get','./data.php?page=2');

以上是ajax通過無刷新方式獲得第2頁數據

傳統分頁實現代碼:

史上最詳細的ajax教程（二），不容錯過

效果:

史上最詳細的ajax教程（二），不容錯過

三,使用ajax做無刷新分頁

無刷新分頁的核心關鍵點:把a連接的href屬性用js函數操作ajax來獲取分頁的數據

史上最詳細的ajax教程（二），不容錯過

修改分頁類分頁列表的a連接的href屬性,改為js函數調用:

史上最詳細的ajax教程（二），不容錯過

注意:可以在a鏈接的href屬性中調用js代碼如: <a href="javascript:getData()"> 點我查看 </a>

ajax獲取分頁的數據代碼:

史上最詳細的ajax教程（二），不容錯過

運行效果:

史上最詳細的ajax教程（二），不容錯過

for in 調試對象的屬性:

史上最詳細的ajax教程（二），不容錯過

結果:

史上最詳細的ajax教程（二），不容錯過

4. 天氣預報(掌握ajax跨域)

1.Ajax跨域請求天氣預報接口

請求代碼:

史上最詳細的ajax教程（二），不容錯過

運行結果:

提示跨域請求,請求不到數據:

史上最詳細的ajax教程（二），不容錯過

2.如何才算跨域

一個url地址如下:

分成四個部分

黃色請求的協議: http,https

紅色:二級域名

淺藍色:一級域名

綠色:請求的端口號(默認端口是80端口)

只要以上四個部分有不同的地方都算做跨域請求

解決跨域的辦法:用php做代理請求,使用ajax直接請求php的代理文件

php獲取接口地址(php是可以跨域請求的):

史上最詳細的ajax教程（二），不容錯過

輸出結果:

史上最詳細的ajax教程（二），不容錯過

ajax調用php代理文件實現跨域:

史上最詳細的ajax教程（二），不容錯過

輸出結果:

史上最詳細的ajax教程（二），不容錯過

在線解析json網站:

史上最詳細的ajax教程（二），不容錯過

3. 天氣代碼調用

利用標簽的src屬性進行跨域

接口網站:

史上最詳細的ajax教程（二），不容錯過

代碼調用實例:

史上最詳細的ajax教程（二），不容錯過

注意script,iframe,img具有跨域能力,因為其元素都有一個src屬性,此屬性可以無跨域的限制

4. jsonp

JSONP(JSON with Padding) 是一種跨域請求方式。

主要原理是利用了script 標簽可以跨域請求的特點，由其 src 屬性發送請求到服務器，服務器返回 js 代碼，網頁端接受響應，然后就直接執行了，這和通過 script 標簽引用外部文件的原理是一樣的。

比如網頁端創建一個 script 標簽，並給其 src 賦值為 http://localhost/json.php?callback=process，此時網頁端就發起一個請求。服務端將要返回的數據拼好最為函數的參數傳入，服務端返回的數據格式類似"echo process({'name':'superfiresun'})"，網頁端接收到了響應值，因為請求者是 script，所以相當於直接調用 process 方法，並且傳入了一個參數。

代碼示例:

php組裝生成js方法輸出:

史上最詳細的ajax教程（二），不容錯過