ajax学习笔记（一）

时间 2019-12-07

标签 ajax 学习笔记栏目 Ajax 繁體版

原文原文链接

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

准备工做

要进行ajax练习，首先得配置本身的服务器，能够直接下个PHPstudy或者wamp

本次练习读取服务器上的静态TXT文件，这里涉及到一个问题就是txt的字符集编码必须跟网页上的一致，否则读取出来的数据就会乱码，常见的字符集编码有utf-八、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对象，具体兼容看程序ajax

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

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

发送请求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);
                }
            }
        }
    }
}