ajax学习笔记（一）

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

准备工作

  • 要进行ajax练习，首先得配置自己的服务器，可以直接下个PHPstudy或者wamp
  • 本次练习读取服务器上的静态TXT文件，这里涉及到一个问题就是txt的字符集编码必须跟网页上的一致，不然读取出来的数据就会乱码，常见的字符集编码有utf-8、gb2312
  • 把软件根目录里面的www文件夹的内容清空放上两个文件index.html和data.txt,我们要做的就是在index.html里面用ajax读取data.txt里面的数据
  • 在浏览器地址栏中输入localhost就能访问到index.html了

编写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 @ 2016-05-05 11:48  天南有只飞鸟  阅读(545)  评论(0)  编辑  收藏  举报