《Head Rush Ajax》读书笔记

《HeadRush Ajax》

流程：

1.构建request：

functioncreateRequest() //构造request

{

varrequest = null;

try {

request = new XMLHttpRequest(); // 非IE浏览器

}catch(trymicrosoft)

{

try {

request = new ActiveXObject("Msxm12.XMLHTTP");

} catch (othermicrosoft)

{

try{

request = new ActiveXObject("Microsoft.XMLHTTP");

} catch(failesd)

{request=null;}

}

}

if(request==null)

{alert("can not create request");}

else{

return request;

}

}

2.send request：

//利用POST获得数据方法，send的是文本数据，用头文件向server表明

//三参true表示异步请求，false表示同步

varurl = "chat.php";

request1.open("POST",url,true);

request1.onreadystatechange = updatePage; // updatePage为函数，此处注意无括号

request1.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

request1.send("username="+username+"&title="+title+"&mess="+mess);

//利用GET获得数据

varurl = "chat.php？username="+username+"&title="+title+"&mess="+mess;

request1.open("GET",url,true);

request1.onreadystatechange =updatePage; //此语句必须在send前执行

request1.send(null);

3.处理回应，更新页面

if(request1.readyState== 4) // readyState为4表明浏览器从server获得response

{

if(request1.status == 200) //判断是否为正确response

{

var chattext = request1.responseText; // response为text形式得到反馈信息

var chatXML = request1.responseXML;//response为XML形式得到反馈

var isValid =chatXML.getElementsByTagName("isValid")[0];//得到返回的XML信息中第一个标志为isValid的node;

var Div = document.getElementById("charTextForm");

Div.innerHTML=chattext; // 我去，这个就可以 了解释标签 当换成xml时，不需用此命令。可以直接用DOM对XML和HTML树进行操作

}

}

else

alert("request's status is wrong:"+request1.status);

}

}

4.PHP端代码

<?php

header("Content-Type:text/xml"); //告诉浏览器，response为XML

echo"<?xml version=\"1.0\" encoding=\"utf-8\"?>"; echo"<totals><chatText>$response</chatText><chatsize>$file_size</chatsize><isLogin>$isLogin</isLogin><isValid>$isValid</isValid></totals>";

?>

5.注意问题

a.注意request被覆盖问题。 即前面的request在被完执行的过程中再次sendrequest的话，会覆盖之前的request。此时可以通过构建另一个request来解决。

b.一些浏览器利用cache，并不发送相同的request。此时可以通过在url上添加一个随机参数来发送请求。如(url="chat.php?para="+newDate().getTime() ; )