编写高质量代码Web前端开发修炼之道.docx
- 文档编号:9729985
- 上传时间:2023-02-06
- 格式:DOCX
- 页数:22
- 大小:97.03KB
编写高质量代码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;i varcity_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); }
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 编写 质量 代码 Web 前端 开发 修炼