最近学习了Ajax

上个礼拜把简历写完了，就等李老师的二审了。然后我学习了下Ajax。主要是看了web cast上的一个讲座。然后做了一下那个讲师布置的一个项目。也就是用Ajax技术把RSS文本从网页上取下来然后创建一个DOM对象承载，然后用CSS辅助显示该对象。琢磨了好久的RSS。咨询了下小四，他说大致是这么个意思，RSS在网页上有个标志，点击该标志就可以链接到该网页的XML格式页面。我仿照讲座中的代码自我感觉完成了讲师布置的项目，实际上显示的页面还是有点丑的不可思议的。还是用代码来说话吧。

 

<script type ="text/javascript" language ="javascript">

//debugger

var xRequest;

//根据不同的浏览器创建XMLHttpRequest
function getXMLHTTPRequest(){

if(window.XMLHttpRequest){
xRequest = new XMLHttpRequest();
}
else if(window.ActiveXObject){
xRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
}

 

由于现在的浏览器有两种，所以在创建XMLHttpRequest的时候需要判断下，使用的是那种浏览器。在IE中，异步调用的是XMLHTTP组件中的XMLHttpRequest对象。在Firefox中则直接使用的是XMLHttpRequest组件。所以在IE浏览器中创建异步调用对象的代码为：var xmlhttp = new ActiveXObject("Microsofe.XMLHTTP");在Firefox浏览器中创建的代码如下：var xmlhttp = new xmlHttpRequest();。

//开始调用
function startHTTP(){
//创建对象
getXMLHTTPRequest();
//获取XML文件的数据
xRequest.open("GET","Ackarlix的专栏.xml",true);
//不带任何参数
xRequest.send(null);

//状态变化与事件挂钩

xRequest.onreadystatechange = StateDO;
}

function StateDO(){
//判断是否是完成状态
if(xRequest.readyState == 4){
//判断是否执行成功
if(xRequest.status == 200){
//更新页面上的某元素
document.getElementById("mytext").innerHTML = xRequest.responseText;
}
}
}

</script>

 

关于xRequest.open("GET","Ackarlix的专栏.xml",true);

HttpMethod表示HTTP的请求方法，共有5种：GET、POST、HEAD、PUT、DELETE，其中GET和POST是最常用的，当请求方法为GET时，send(params)中的params为null。第三个参数表示的是是否使用异步获取，true表示异步，false表示同步。第二个参数表示的是数据的地址，若是本地文件，则指定具体路径；若是其他网站，则指定网站的完全URL地址。

 

关于xRequest.onreadystatechange = StateDO;

var READY_STATE_UNINTIALIZED = 0;

var READY_STATE_LOADING = 1;

var READY_STATE_LOADED = 2;

var READY_STATE_INTERACTIVE = 3;

var READY_STATE_COMPLETE = 4;

 

感觉这个项目就是这样完成的吧，但是用CSS去辅助显示该页面我还是没有做到，导致页面显示的只是XML转换成HTML后的结果。下面讲讲对Ajax与iframe的区别，其实刚一开始接触Ajax就觉得它跟iframe有异曲同工之妙，但是这两个东西到底差别在哪里，一直想不清楚。直到看了google map后才有那么一点点感觉了。就拿Google map 来说事吧，我的鼠标可以拖动地图，我不知道Google是如何实现的，就我所理解的来说，应该是鼠标点击了哪里然后就用Ajax将该点的信息传给服务器从而实现对页面的局部刷新。但是iframe就不行了，就我所用过iframe的经验来说，iframe每次只能反应给你一个页面，并且是你已经设计好的一个页面，这样的话用iframe就无法完成这个地图了，我该设计多少个方方面面的地图来给主页面显示啊！也许我的想法是错误的，那么请读者帮我指出错误，先谢谢了！