编写高质量代码Web前端开发修炼之道Word格式.docx

编写高质量代码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