服務器8

複習：

見思惟導圖

 

練習：學生按分數級別顯示     

(1)編寫SQL：tarena.sql，表student(sid, sname, pic, scoreGrade(A-B-C-D))，插入12條記錄

(2)編寫PHP：student_select.php，根據客戶端請求分數級別，返回該級別下有哪些學生，以JSON格式

(3)編寫HTML：student.select.html，頁頭提供ABCD四個級別，鼠標懸停在某個級別上，當即異步請求該級別有哪些學生

 

 

今日目標：            

(1)PPT上的小知識點拾遺

(2)AJAX階段項目 —— 重點

 

 

 

1. JS中如何處理JSON字符串

  把JSON格式的字符串解析爲JS對象：

       var str = '{"ename":"Tom", "age":20}';

       var obj = JSON.parse(str);           //方法1

       var obj = eval( '('+str+')' );           //方法2，不推薦使用

  把JS對象編碼爲JSON字符串：

       var obj = {ename:'Tom', age: 20};

       var str = JSON.stringify(obj);   

 

     -ify: 使變爲...，   sheepify    stoneify    frogify

=================================

  PHP中把數組編碼爲JSON字符串：

       $list = [{},{},{}];

       $str = json_encode( $list );

  PHP中JSON字符串解析爲PHP數組/對象：

       $str = '{"ename":"Tom", "age":20}';

       $obj = json_decode( $str );

 

 

2.面試題：跨域請求和JSONP

  Cross Domain Request：從一個資源請求另外一個資源，兩者所在的請求地址不一樣，域名不一樣、端口號不一樣、請求協議不一樣。

       http://www.tmooc.cn/list.html

       http://www.tedu.cn/student_select.php

 

  提示：localhost和127.0.0.1也算跨域！

  瀏覽器容許跨域請求的情形：

       IMG、LINK、SCRIPT、IFRAME ...

  瀏覽器禁止跨域請求的情形：

       XHR  —— 瀏覽器處於安全考慮，禁用了XHR的跨域請求（其實服務器給出了響應消息，但瀏覽器不讓使用）

 

面試題：咱們公司項目很大，頁面不少，出於性能考慮，把靜態資源(html等)放在http://static.tmooc.cn服務器上了，把動態資源(php)放在http://dynamic.tmooc.cn服務器上了，如何讓一個x.html異步請求x.php呢？

 

如何解決瀏覽器的XHR跨域請求限制 —— 八種方案：

  (1)

  (2)

  (3)

  (4)

  (5)

  (6)

  (7) 修改響應消息頭部，添加Access-Control-Allow-Origin頭部

  (8) 使用JSONP——很是巧妙

 

JSON: JavaScript Object Notation，是一種字符串數據格式(羊肉)。

JSONP：JSON with Padding，填充式JSON，與JSON徹底兩碼事，是一種使用JSON數據的方式(把羊肉紅燒)。意思是在JSON字符串左右添加函數名： doResponse( {"ename":"Tom", "age":20} );

JSONP是專用於解決XHR跨域限制一種手段。基本原理：使用動態建立的一個SCRIPT標籤代替XHR發起異步請求，要求服務器必須返回application/javascript，當即在客戶端執行——要執行的函數本體在客戶端瀏覽器中聲明。

  <script src="x.php" async></script>

 

 

面試題：jQuery中如何使用JSONP發起異步請求：

(1) $.getJSON()

  用途1：使用XHR發起異步請求(不能跨域)

       $.getJSON('x.php', doResponse)

  用途2：使用JSONP發起跨域異步請求

       $.getJSON('http://跨域地址/x.php?callback=?', doResponse)

 

(2) $.ajax()

  用途1：使用XHR發起異步請求(不能跨域)

       $.ajax({  })

  用途2：使用JSONP發起跨域異步請求

       $.ajax({ dataType: 'jsonp' })

 

 

3.AJAX階段項目 —— 京東購物車

  功能點描述

  (1)異步的用戶登陸

  (2)異步的顯示商品列表，實現分頁顯示

  (3)異步的添加到「個人購物車」

  (4)查看「個人購物車」

  (5)異步的修改「個人購物車」

 

  項目標準： 根據註釋，你們在前面寫，我在後面提示——項目代碼必須有本身的思路！

 

  實現步驟：   SQL => PHP => HTML/JS                

  (1)編寫SQL：jd.sql，數據庫名jd，

       建立表：jd_user(uid, uname, upwd)，插入2行記錄：

                            10    qiangdong     123456

                            20    naicha            456789

       建立表：jd_product(pid, pname, price, pic)，插入36行記錄；

       建立表：jd_cart( cid,  userId )，插入一行記錄:

                            101          10

       建立表：jd_cart_detail(did, cartId, productId, count)，插入以下的3行測試記錄：                    

                            1    101   15        3      

                            2    101   18        1

                            3    101   21        2

  (2)編寫PHP：data/header.php，包含頁頭必需的HTML片斷（第一階段項目中尋找）——不是完整的HTML！

       <?php header('Content-Type: text/html;charset=UTF-8'); ?>

       <div>....</div><div>....</div>

  (3)編寫PHP：data/footer.php，包含頁尾必需的HTML片斷（第一階段項目中尋找）——不是完整的HTML！

  (4)編寫HTML：productlist.html,待頁面加載完成，異步加載頁頭和頁尾。

       $('#header').load('data/header.php')

       注意：控制檯不能有404錯誤！

  (5)編寫PHP：user_login.php，接收客戶端提交的uname和upwd，執行數據庫驗證，返回 {"code":1, "uname":"qiangdong", "uid":10} 或 {"code":2, "msg":"用戶名或密碼錯誤" }

       $str = "{\"code\":1, \"uname\":\"$uname\"}";  echo $str;

       $arr = ['code'=>1, 'uname'=>$uname];   echo json_encode($arr);

-------------------文華的進度線---------------------

  (6)修改HTML：productlist.html，默認顯示出登陸對話框，異步登陸驗證，失敗則提示錯誤消息，成功則清除掉對話框，顯示「歡迎回來：xxxx」

  (7)編寫PHP：product_select.php，向客戶端輸出全部的產品信息，以JSON格式：[{},{},{},....]

  (8)修改HTML: productlist.html，頁面加載完後，異步請求全部的產品

  (9)編寫PHP：cart_product_add.php，接收客戶端提交uid、pid，添加入購物車詳情表，若已有該商品，則購買數量+1  —— 須要執行多條SQL語句，有挑戰性！

 

 

 

4.JS和CSS加載外部資源的路徑問題

  JS是運行於HTML網頁中，JS中請求的資源的路徑使用相對於HTML文件的路徑；

  CSS是獨立被瀏覽器解釋，CSS中使用外部資源(如圖片)路徑使用相對於CSS文件的路徑；