首页 > 代码库 > 服务器 7
服务器 7
复习：
AJAX：向服务器发起异步HTTP请求，接收处理返回的响应消息，目标是实现页面在无刷新无提交情况下页面内容的局部更新。
使用AJAX发起两种请求消息：
GET：//1 //2 //3 //4
POST : //1 //2 //3 //3.5 //4
使用AJAX接收五种响应消息：
(1)text/plain
服务器端：
header(‘Content-Type: text/plain‘);
echo ‘succ‘;
客户端：
if(xhr.responseText===‘succ‘){ ... }
(2)text/html
服务器端：
header(‘Content-Type: text/html‘);
echo "<tr><td>$data</td></tr>";
客户端：
tbody.innerHTML = xhr.responseText
(3)application/javascript
服务器端：
header(‘Content-Type: application/javascript‘);
echo "alert($data); f1(); f2($data)";
客户端：
eval( xhr.responseText )
(4)application/xml
服务器端：
header(‘Content-Type: application/xml‘);
echo "<bookList><book>$b</book></bookList>";
客户端：
var document = xhr.responseXML
(5)application/json
服务器端：
header(‘Content-Type: application/json‘);
//echo "[ {"bname":"","price":35.5},{} ]";
$list = ...;
echo json_encode($list);
客户端：
var obj = JSON.parse( xhr.responseText )
练习： 实现学生查询系统
(1)编写SQL：qinghua.sql，表qh_class( cid, cname, count )，插入三个班级(10/20/30)；qh_student(sid, sname, score, classId)，插入八九行记录
(2)编写PHP：class_select.php，向客户端输出所有的班级信息，以JSON格式: [{},{},{}]
(3)编写HTML：qinghua.html，页面加载完成(window.onload)后，异步请求，获取所有的班级信息，填充在一个select中
<select> 10:15
<option value="http://www.mamicode.com/10">软件0801班</option>
</select>
(4)编写PHP：student_select.php，接收客户端提交的cid，返回指定班级中的学生数据，以JSON格式： [{},{},{}]
(5)修改HTML：qinghua.html，为select做事件绑定，监听选项改变，异步请求选定班级中的学生，显示在table中
<table>
<thead></thead>
<tbody></tbody>
</table>
今日目标：
(1)使用jQuery的AJAX封装函数——六个
1.使用jQuery的AJAX封装函数之一——load()
使用方法：
$(‘选择器‘).load(URL, [请求数据], [成功后的回调函数])
$(‘ul‘).load(‘search_suggest.php‘);
含义说明：
向指定的URL发起异步请求；若有请求数据，就是POST请求，否则就是GET请求；获取服务器端返回HTML片段响应，设置为当前选定元素的innerHTML。
使用限制：
(1)服务器返回的必需是HTML片段；
(2)服务器端返回的数据会替换已有数据！
案例演示： 异步加载多个页面完全一样的页头/页尾
(1)编写header.php，只含有页头中的DIV片段
(2)编写footer.php，只含有页尾中的DIV片段
(3)编写jdindex.php，内容：
<body>
<div id="header"></div>
<div id="main">XXXXXX</div>
<div id="footer"></div>
</body>
待页面加载完后，异步请求页头，放在#header中
待页面加载完后，异步请求页尾，放在#footer中
2.使用jQuery的AJAX封装函数之二——$.get()
使用方法：
$.get(URL, [请求数据], 响应成功后的回调函数)
$.get(‘delete.php‘, ‘sid=8‘, function(txt){ if(txt===‘succ‘){} })
$.get(‘delete.php‘, {sid:8}, function(txt, msg, xhr){ if(txt===‘succ‘){} })
含义作用：
向指定的URL发起异步的GET请求，把请求数据追加在URL的后面；服务器给出了成功的响应会自动调用第三个参数——doResponse。
提示：$.get会根据服务器端返回的响应消息内容类型自动决定如何处理，如applicatoin/json，会自动调用JSON.parse(xhr.responseText)进行解析！
案例演示：实现异步的学生记录的删除
案例演示：异步级联下拉列表 $.get()
(1)编写SQL：qinghua.sql，产品类别表 qh_type( tid, tname )，插入三行数据（10-相机、20-洗衣机、30-手机），生产厂家表qh_producer( pid, pname, typeId )，插入若干记录；产品型号表 qh_model( mid, mname, producerId )
(2)编写PHP：type_select.php，向客户端返回所有的产品类型，以JSON格式
(3)编写PHP：producer_select.php，根据客户端提交的typeId，向客户端返回该类型所有的厂家，以JSON格式
(4)编写PHP：model_select.php，根据客户端提交的producerId，向客户端返回该厂家生产的所有型号，以JSON格式
(5)编写HTML，product.html，
当页面加载完成后，异步请求所有的“产品类型”；
当产品类型选项发生改变后，异步请求对应的“生产厂家”;
当生产厂家选项发生改变后，异步请求该厂家的“产品型号”
3.使用jQuery的AJAX封装函数之三——$.post()
使用方法：
$.post(URL, 请求数据, 响应成功后的回调函数)
含义作用：
向指定的URL发起异步的POST请求，把请求数据放置在请求主体——无需手写3.5步；服务器给出了成功的响应会自动调用第三个参数——doResponse。
提示：$.post会根据服务器端返回的响应消息内容类型自动决定如何处理，如applicatoin/json，会自动调用JSON.parse(xhr.responseText)进行解析！
案例演示：实现异步的用户注册
(1)编写SQL：qinghua.sql，用户信息表 qh_user(uid, uname,upwd)
(2)编写PHP：user_add.php，接收客户端提交的uname和upwd，返回succ或err
(3)编写HTML：user_add.html，没有表单，只有两个输入域+BUTTON按钮，点击后异步提交给服务器 $.post(url, {uname:xx, upwd:xx}, fn)
4.使用jQuery的AJAX封装函数之四——$.getScript()——了解
使用方法：
$.getScript(URL, [请求数据], [响应成功后的回调函数])
$.getScript(‘x.php‘)
含义作用：
向指定的URL发起异步的GET请求，把请求数据放置在url后面；服务器给出了成功的响应会自动执行eval( xhr.responseText )。
使用限制：
要求服务器必须返回application/javascript！即使不是，也会强制调用eval(xhr.responseText)进行执行！而$.get()可以实现同样的功能，却可以根据服务器端的响应头来决定是否调用eval()
5.使用jQuery的AJAX封装函数之五——$.getJSON()——了解
使用方法：
$.getJSON(URL, [请求数据], 响应成功后的回调函数)
$.getJSON(‘x.php‘, function(obj){})
含义作用：
向指定的URL发起异步的GET请求，把请求数据放置在url后面；服务器给出了成功的响应会自动执行JSON.parse( xhr.responseText )。
使用限制：
要求服务器必须返回application/json！即使不是，也会强制调用JSON.parse(xhr.responseText)进行执行！而$.get()可以实现同样的功能，却可以根据服务器端的响应头来决定是否调用JSON.parse()
上述五个函数的通病：只能处理成功的响应消息！如果服务器端返回了错误的响应消息（如404）上述五个函数不会有任何的提示——没有相关的回调函数！
|
面试题：如何使用jQuery的AJAX相关函数，监听失败的响应消息？？——使用万能AJAX封装函数:$.ajax |
6.使用jQuery的AJAX封装函数之六——$.ajax()——重点
使用方法：
$.ajax( {
type: ‘GET‘, //POST/PUT/DELETE...
url: ‘x.php‘,
data: ‘k=v&k=v‘, //{k:v, k:v}
beforeSend: fn, //在请求发送前的回调
success: fn, //响应成功后的回调
error: fn, //响应失败后的回调
complete: fn //响应完成后(不论成败)的回调
} )
成功的调用： beforeSend() => success() => complete()
失败的调用： beforeSend() => error() => complete()
|
对应于原生AJAX： //1 var xhr = new XMLHttpRequest(); //2 xhr.onreadystatechange = function(){ if(xhr.readyState===4){ if(xhr.status===200){ success(); }else { error(); } complete() } } //3 xhr.open() beforeSend(); //4 xhr.send() |
课后练习：仿beijing.huimaiche.com中的车辆展示
(1)编写SQL，创建huimaiche.sql，保存车辆数据（cid,cname,price,count,type(lt8/lt15/lt30/suv)）
(2)编写PHP，创建car_list.php，根据客户端提交的车辆类别，返回该类别下所有汽车，以JSON格式
(3)编写HTML，创建car_list.html，用户鼠标悬停在不同的车辆类别上，异步请求该类别下所有的汽车
(4)编写PHP，创建car_select.php，根据客户端提交的cid，向客户端输出该车辆的所有信息，以JSON格式
(5)修改car_list.html，当用户点击某个车辆的图片时，在下方显示出该车辆的全部信息
服务器 7