编写高质量代码Web前端开发修炼之道Word格式.docx
《编写高质量代码Web前端开发修炼之道Word格式.docx》由会员分享，可在线阅读，更多相关《编写高质量代码Web前端开发修炼之道Word格式.docx（22页珍藏版）》请在冰豆网上搜索。
用户注册<
/title>
metahttp-equiv="
content-type"
content="
text/html;
charset=utf-8"
/>
scripttype="
text/javascript"
>
//创建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（"
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）;
/script>
/head>
body>
<
formaction="
?
method="
用户名字:
inputtype="
text"
onkeyup="
checkName（）;
name="
username1"
id="
button"
onclick="
value="
验证用户名"
inputstyle="
border-width:
0;
color:
red"
type="
myres"
br/>
用户密码:
password"
br>
电子邮件:
email"
submit"
用户注册"
/form>
username2"
>
/body>
/html>
registerpro.php
php
//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
header（"
Content-Type:
text/xml;
//告诉浏览器不要缓存数据
Cache-Control:
no-cache"
//接收数据
$username=$_GET['
username'
];
if（$username=="
shunping"
）{
echo"
用户名不可以用"
//注意，这里数据是返回给请求的页面.
}else{
用户名可以用"
◆ajax的post方式请求
在前面案例我们修改一下：
关键代码
varurl="
/ajax/registerProcess.php"
//这个是要发送的数据
vardata="
+$（'
//还有一句话，这句话必须.
myXmlHttpRequest.setRequestHeader（"
Content-Type"
"
application/x-www-form-urlencoded"
myXmlHttpRequest.send（data）;
registerPro.php关键码：
$username=$_POST['
☞使用get方式发出请求，如果提交的用户名不变化，浏览器将不会真的发请求，而是缓存取数据.,url
解决方法
1.url后带一个总是变化的参数,比如当前时间
2.在服务器回送结果时，禁用缓存.
//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
◆ajax如何处理返回的数据格式是xml的情况
//$（'
//看看如果取出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;
）.value=mes_val;
regisgerProcess.php
//接收数据（这里要和请求方式对于_POST还是_GET）
$username=$_POST['
//这里我们看看如何处理格式是xml
$info="
$info.="
res>
mes>
用户名不可以用,对不起<
/mes>
/res>
用户名可以用,恭喜<
echo$info;
◆ajax如何处理json数据格式
1json的格式如下：
{属性名:
属性值,属性名:
属性值,....}"
因为json数据是原生态数据，因此这种数据格式很稳定，而且描述能力强,我们建议大家使用json格式
2json数据格式的扩展
如果服务器返回的json是多组数据，则格式应当如下:
$info="
[{"
属性名"
:
属性值"
...},{"
...},....]"
在xmlhttprequest对象接收到json数据后，应当这样处理
//转成对象数组
varreses=eval（"
（"
+xmlHttpRequest.responseText+"
）"
//通过reses可以取得你希望的任何一个值
reses[?
].属性名
3更加复杂的json数据格式
scriptlanguage="
JavaScript"
varpeople={
"
programmers"
[
{"
firstName"
Brett"
"
brett@newI"
},
Jason"
jason@"
],
writer"
[
{"
宋江"
age"
50"
},
吴用"
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引擎
functiongetCities（）{
myXmlHttpRequest=getXmlHttpObject（）;
if（myXmlHttpRequest）{
varurl="
/ajax/showCitiesPro.php"
//post
vardata="
province="
sheng'
myXmlHttpRequest.open（"
//异步方式
myXmlHttpRequest.setRequestHeader（"
//指定回调函数
myXmlHttpRequest.onreadystatechange=chuli;
//发送
myXmlHttpRequest.send（data）;
if（myXmlHttpRequest.status==200）{
//取出服务器回送的数据
varcities=myXmlHttpRequest.responseXML.getElementsByTagName（"
city"
$（'
city'
）.length=0;
varmyOption=document.createElement（"
option"
myOption.innerText="
--城市--"
//添加到
$（'
）.appendChild（myOption）;
//遍历并取出城市
for（vari=0;
i<
cities.length;
i++）{
varcity_name=cities[i].childNodes[0].nodeValue;
//创建新的元素option
varmyOption=document.createElement（"
myOption.value=city_name;
myOption.innerText=city_name;
}
}
selectid="
sheng"
onchan
升级会员 