首页 > 代码库 > 服务器8
服务器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="http://www.mamicode.com/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文件的路径；
服务器8