编写高质量代码Web前端开发修炼之道.docx
《编写高质量代码Web前端开发修炼之道.docx》由会员分享，可在线阅读，更多相关《编写高质量代码Web前端开发修炼之道.docx（22页珍藏版）》请在冰豆网上搜索。
编写高质量代码Web前端开发修炼之道
ajax是什么？
1ajax（asynchronousejavascriptandxml）异步的javascript和xml
2是7种技术的综合,它包含了七个技术（javascriptxmlxstlxhtmldomxmlhttprequest,css）,ajax是一个粘合剂,
3ajax是一个与服务端语言无关的技术.即可以使用在（php/javaee/.net网站/asp）
4ajax可以给客户端返回三种格式数据（文本格式，xml,json格式）
5无刷新数据交换技术有以下:
flash,javaapplet,框架,iframe,ajax）
◆ajax的运行原理分析
看一个需求:
◆ajax在什么地方用的多
1动态加载数据，按需取得数据。
【树形菜单、联动菜单.../省市联动】
2改善用户体验。
【输入内容前提示、带进度条文件上传...】
3电子商务应用。
【购物车、邮件订阅...】
4访问第三方服务。
【访问搜索服务、rss阅读器】
5.数据的布局刷新
◆经典的案例
使用ajax与服务器通信的的步骤
1创建一个XMLHttpRequest对象
2创建url,data,通过xmlHttpRequest.send（）
3服务器端接收ajax的请求,做相应处理（操作数据库），然后返回结果（echo语句）
4客户端通过xmlHttpRequest的属性reponseText,responseXML取的数据，然后就完成局部刷新当前页面任务
1.使用ajax完成用户名的验证
register.php
用户注册
//创建ajax引擎
functiongetXmlHttpObject（）{
varxmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest对象方法不一样
if（window.ActiveXObject）{
xmlHttpRequest=newActiveXObject（"Microsoft.XMLHTTP"）;
}else{
xmlHttpRequest=newXMLHttpRequest（）;
}
returnxmlHttpRequest;
}
varmyXmlHttpRequest="";
//验证用户名是否存在
functioncheckName（）{
myXmlHttpRequest=getXmlHttpObject（）;
//怎么判断创建ok
if（myXmlHttpRequest）{
//通过myXmlHttpRequest对象发送请求到服务器的某个页面
//第一个参数表示请求的方式,"get"/"post"
//第二个参数指定url,对哪个页面发出ajax请求（本质仍然是http请求）
//第三个参数表示true表示使用异步机制,如果false表示不使用异步
varurl="/ajax/registerProcess.php?
mytime="+newDate（）+"&username="+$（"username"）.value;
//打开请求.
myXmlHttpRequest.open（"get",url,true）;
//指定回调函数.chuli是函数名
myXmlHttpRequest.onreadystatechange=chuli;
//真的发送请求,如果是get请求则填入null即可
//如果是post请求，则填入实际的数据
myXmlHttpRequest.send（null）;
}
}
//回调函数
functionchuli（）{
//window.alert（"处理函数被调回"+myXmlHttpRequest.readyState）;
//我要取出从registerPro.php页面返回的数据
if（myXmlHttpRequest.readyState==4）{
//取出值,根据返回信息的格式定.text
//window.alert（"服务器返回"+myXmlHttpRequest.responseText）;
$（'myres'）.value=myXmlHttpRequest.responseText;
}
}
//这里我们写一个函数
function$（id）{
returndocument.getElementById（id）;
}
?
?
"method="post">
用户名字:
0;color:
red"type="text"id="myres">
用户密码:
电子邮件:
?
?
"method="post">
用户名字:
用户密码:
电子邮件:
registerpro.php
php
//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
header（"Content-Type:
text/xml;charset=utf-8"）;
//告诉浏览器不要缓存数据
header（"Cache-Control:
no-cache"）;
//接收数据
$username=$_GET['username'];
if（$username=="shunping"）{
echo"用户名不可以用";//注意，这里数据是返回给请求的页面.
}else{
echo"用户名可以用";
}
?
>
◆ajax的post方式请求
在前面案例我们修改一下：
关键代码
register.php
varurl="/ajax/registerProcess.php";
//这个是要发送的数据
vardata="username="+$（'username'）.value;
//打开请求.
myXmlHttpRequest.open（"post",url,true）;
//还有一句话，这句话必须.
myXmlHttpRequest.setRequestHeader（"Content-Type","application/x-www-form-urlencoded"）;
//指定回调函数.chuli是函数名
myXmlHttpRequest.onreadystatechange=chuli;
//真的发送请求,如果是get请求则填入null即可
//如果是post请求，则填入实际的数据
myXmlHttpRequest.send（data）;
registerPro.php关键码：
$username=$_POST['username'];
☞使用get方式发出请求，如果提交的用户名不变化，浏览器将不会真的发请求，而是缓存取数据.,url
解决方法
1.url后带一个总是变化的参数,比如当前时间
varurl="/ajax/registerProcess.php?
mytime="+newDate（）+"&username="+$（"username"）.value;
2.在服务器回送结果时，禁用缓存.
//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
header（"Content-Type:
text/xml;charset=utf-8"）;
//告诉浏览器不要缓存数据
header（"Cache-Control:
no-cache"）;
◆ajax如何处理返回的数据格式是xml的情况
register.php
用户注册
//创建ajax引擎
functiongetXmlHttpObject（）{
varxmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest对象方法不一样
if（window.ActiveXObject）{
xmlHttpRequest=newActiveXObject（"Microsoft.XMLHTTP"）;
}else{
xmlHttpRequest=newXMLHttpRequest（）;
}
returnxmlHttpRequest;
}
varmyXmlHttpRequest="";
//验证用户名是否存在
functioncheckName（）{
myXmlHttpRequest=getXmlHttpObject（）;
//怎么判断创建ok
if（myXmlHttpRequest）{
//通过myXmlHttpRequest对象发送请求到服务器的某个页面
//第一个参数表示请求的方式,"get"/"post"
//第二个参数指定url,对哪个页面发出ajax请求（本质仍然是http请求）
//第三个参数表示true表示使用异步机制,如果false表示不使用异步
varurl="/ajax/registerProcess.php";
//这个是要发送的数据
vardata="username="+$（'username'）.value;
//打开请求.
myXmlHttpRequest.open（"post",url,true）;
//还有一句话，这句话必须.
myXmlHttpRequest.setRequestHeader（"Content-Type","application/x-www-form-urlencoded"）;
//指定回调函数.chuli是函数名
myXmlHttpRequest.onreadystatechange=chuli;
//真的发送请求,如果是get请求则填入null即可
//如果是post请求，则填入实际的数据
myXmlHttpRequest.send（data）;
}
}
//回调函数
functionchuli（）{
//window.alert（"处理函数被调回"+myXmlHttpRequest.readyState）;
//我要取出从registerPro.php页面返回的数据
if（myXmlHttpRequest.readyState==4）{
//取出值,根据返回信息的格式定.text
//window.alert（"服务器返回"+myXmlHttpRequest.responseText）;
//$（'myres'）.value=myXmlHttpRequest.responseText;
//看看如果取出xml格式数据
//window.alert（myXmlHttpRequest.responseXML）;
//获取mes节点
varmes=myXmlHttpRequest.responseXML.getElementsByTagName（"mes"）;
//取出mes节点值
//window.alert（mes.length）;
//mes[0]->表示取出第一个mes节点
//mes[0].childNodes[0]->表示第一个mes节点的第一个子节点
varmes_val=mes[0].childNodes[0].nodeValue;
$（'myres'）.value=mes_val;
}
}
//这里我们写一个函数
function$（id）{
returndocument.getElementById（id）;
}
?
?
"method="post">
用户名字:
0;color:
red"type="text"id="myres">
用户密码:
电子邮件:
?
?
"method="post">
用户名字:
用户密码:
电子邮件:
regisgerProcess.php
php
//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
header（"Content-Type:
text/xml;charset=utf-8"）;
//告诉浏览器不要缓存数据
header（"Cache-Control:
no-cache"）;
//接收数据（这里要和请求方式对于_POST还是_GET）
$username=$_POST['username'];
//这里我们看看如何处理格式是xml
$info="";
if（$username=="shunping"）{
$info.="用户名不可以用,对不起";//注意，这里数据是返回给请求的页面.
}else{
$info.="用户名可以用,恭喜";
}
echo$info;
?
>
◆ajax如何处理json数据格式
1json的格式如下：
"{属性名:
属性值,属性名:
属性值,....}"
因为json数据是原生态数据，因此这种数据格式很稳定，而且描述能力强,我们建议大家使用json格式
2json数据格式的扩展
如果服务器返回的json是多组数据，则格式应当如下:
$info="[{"属性名":
"属性值",...},{"属性名":
"属性值",...},....]";
在xmlhttprequest对象接收到json数据后，应当这样处理
//转成对象数组
varreses=eval（"（"+xmlHttpRequest.responseText+"）"）;
//通过reses可以取得你希望的任何一个值
reses[?
].属性名
3更加复杂的json数据格式
varpeople={
"programmers":
[
{"firstName":
"Brett","email":
"brett@newI"},
{"firstName":
"Jason","email":
"jason@"}
],
"writer":
[
{"writer":
"宋江","age":
"50"},
{"writer":
"吴用","age":
"30"}
],
"sex":
"男"
};
window.alert（people.programmers[0].firstName）;
window.alert（people.programmers[1].email）;
window.alert（people.writer[1].writer）;
window.alert（people.sex）;
◆小结:
当一个ajax请求到服务器，服务器可以根据需求返回三种格式的数据,那么我们应当选择哪一个?
1.如果你的项目经理没有特殊的要求，建议使用json
2.若应用程序不需要与其他应用程序共享数据的时候,使用HTML片段来返回数据时最简单的
3.如果数据需要重用,JSON文件是个不错的选择,其在性能和文件大小方面有优势
4.当远程应用程序未知时,XML文档是首选,因为XML是web服务领域的“世界语”
◆ajax的省市联动案例（如何动态的从服务器取得数据）
showCities.php页面
//创建ajax引擎
functiongetXmlHttpObject（）{
varxmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest对象方法不一样
if（window.ActiveXObject）{
xmlHttpRequest=newActiveXObject（"Microsoft.XMLHTTP"）;
}else{
xmlHttpRequest=newXMLHttpRequest（）;
}
returnxmlHttpRequest;
}
varmyXmlHttpRequest="";
functiongetCities（）{
myXmlHttpRequest=getXmlHttpObject（）;
if（myXmlHttpRequest）{
varurl="/ajax/showCitiesPro.php";//post
vardata="province="+$（'sheng'）.value;
myXmlHttpRequest.open（"post",url,true）;//异步方式
myXmlHttpRequest.setRequestHeader（"Content-Type","application/x-www-form-urlencoded"）;
//指定回调函数
myXmlHttpRequest.onreadystatechange=chuli;
//发送
myXmlHttpRequest.send（data）;
}
}
functionchuli（）{
if（myXmlHttpRequest.readyState==4）{
if（myXmlHttpRequest.status==200）{
//取出服务器回送的数据
varcities=myXmlHttpRequest.responseXML.getElementsByTagName（"city"）;
$（'city'）.length=0;
varmyOption=document.createElement（"option"）;
myOption.innerText="--城市--";
//添加到
$（'city'）.appendChild（myOption）;
//遍历并取出城市
for（vari=0;ivarcity_name=cities[i].childNodes[0].nodeValue;
//创建新的元素option
varmyOption=document.createElement（"option"）;
myOption.value=city_name;
myOption.innerText=city_name;
//添加到
$（'city'）.appendChild（myOption）;
}
}
}
}
//这里我们写一个函数
function$（id）{
returndocument.getElementById（id）;
}
升级会员 