ajax学习笔记（一）_H5之家 - 中国HTML5教程资源分享第一站

ajax学习笔记（一）

ajax一词的实际含义为“不发生页面跳转、异步载入内容并改写页面内容的技术”，说白了就是让js去读取服务器上的数据，举个常见的例子，一般网站登录的时候不用刷新就可以判断你输入的密码是否正确，这里就用了ajax技术，ajax不仅仅会使用XML数据，很多时候也可以对json或者纯文本进行操作。

准备工作编写ajax

创建XMLHttpRequest对象var xhr=new XMLHTTPRequest;

js动态向服务器发送请求，需要使用XMLHTTPRequest对象，在IE中通过ActiveX插件实现，可能会遇到3中不同版本的XHR对象，具体兼容看程序

连接到服务器xhr.open(方法，文件名，异步传输);

常用两种方法get、post
get：通过URL传送数据，常用于向服务器读取信息，容量小，有缓存
post:通过http content传送数据，常用于向服务器上传信息，容量大，无缓存
浏览器缓存机制：只要URL不变，浏览器就会读取缓存的内容，无法做到实时更新
解决方法：动态改变URL，本例中采取的方法：
Ajax('data.txt?t='+new Data().getTime(),fnSucc,fnFail)

发送请求xhr.send();

接收返回值

首先通过xhr.readyState判断是否完成了对服务器响应的接受
然后通过xhr.status判断响应的状态
如果通讯正常结束，就可以通过xhr.responseText读取通讯的内容，但是格式为字符串，可以使用eval()转换格式

调用代码

我们要做的就是在index.html里面用封装好的Ajax函数读取data.txt里面的数据

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax练习</title> <script src="ajax.js"></script> <script> window.onload=function(){ var oBtn=document.getElementById('btn'); oBtn.onclick=function(){ Ajax('data.txt?t='+new Date().getTime(),function(str){ alert('读取成功，内容为: '+str); },function(str){ alert('读取失败，原因为: '+str); }); }; } </script> </head> <body> <input id="btn" type="button" value="读取数据"> </body> </html> 封装的Ajax函数代码 /************************************** * Ajax(url,fnSucc,fnFail） * url:请求的文件地址 * fnSucc:成功时执行的函数，传入读取到的文件的内容 * fnFail:可选，失败时返回的函数，返回出错的状态码 **************************************/ function Ajax(url,fnSucc,fnFail){ //创建ajax对象 //ie6 if(!window.XMLHttpRequest){ XMLHttpRequest=function(){ var objs=['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP']; for( var i=0;i<objs.length;i++){ var obj=objs[i]; try{ return new ActiveXObject(obj); }catch(ignore){ //跳过 } } throw new Error('Cannot create XMLHttpRequest object.'); } } var oAjax=new XMLHttpRequest; //链接服务器 //open(方法，文件名，异步传输) oAjax.open('GET',url,true); //发送请求 oAjax.send(); //接收返回 oAjax.onreadystatechange=function(){ //oAjax.readerState浏览器和服务器进行到哪一步了 if(oAjax.readyState==4)//读取完成 { if(oAjax.status==200)//成功 { fnSucc(oAjax.responseText); }else{ if(fnFail){ fnFail(oAjax.status); } } } } }

posted @