Javacript Ajax 理解运用

来源：互联网发布：保险网络大学认证教育编辑：程序博客网时间：2024/05/30 23:01

避免转眼忘记，简单的记录一下今天自己学习的Ajax，便于理解运用记忆

AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

首先得有一个服务器软件，我自己用的AppServ，这个可以在网上随便下载，用你喜欢的。安装好之后，在这个软件文件夹里会有个www的文件夹，里面用来存放自己的项目代码，在这个目录里面的项目代码可以用浏览器访问：http://localhost ,这是访问本机的，和127.0.0.1 用意大概一样的，

这里写图片描述

访问：http://localhost ，会显示www文件夹里面的项目代码，下面这个是我的，这个里面的内容是可以自定义。

这里写图片描述

先写个已经封装好的Ajax的js函数文件和html文件，再慢慢解析理解。

function ajax(url, fnSucc, fnFaild){    //1.创建Ajax对象    if(window.XMLHttpRequest){        var oAjax=new XMLHttpRequest();    }    else{        var oAjax=new ActiveXObject("Microsoft.XMLHTTP");    }    //2.连接服务器    //open(方法, 文件名, 异步传输)    oAjax.open('GET', url, true);    //3.发送请求    oAjax.send();    //4.接收返回    oAjax.onreadystatechange=function ()    {            if(oAjax.readyState==4){            //读取完成              if(oAjax.status==200){              //成功                            fnSucc(oAjax.responseText);            }            else{                if(fnFaild){                    fnFaild(oAjax.status);                }            }        }    };}

<body><input id="btn1" type="button" value="读取" /></body><script src="ajax.js"></script><script>    var oBtn=document.getElementById('btn1');    oBtn.onclick=function (){        ajax('a.text?t='+new Date().getTime(), function (str){            alert(str);        });    };</script>

当我点击页面上的id名为botn1的按钮，会获得当前相对目录找到一个名字a.txt的文档，就是www目录下，然后alert出里这个txt文档的数据。

首先先来理解：

function ajax(url, fnSucc, fnFaild){};

url , 指的是你需要获得哪个文件；
fnSucc , 指的是接收返回成功所要执行的代码；
fnFaild，指的是接收返回失败所要执行的代码；

1. 创建Ajax对象

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

new XMLHttpRequest() 方法，就可以创建一个Ajax对象。
同时这里也做了一个if判断，做了一个兼容处理，在浏览器里输出oAjax的类型，会得到一个[object XMLHttpRequest]的对象，但在万恶的IE6里，会报错。
ActiveXObject(“Microsoft.XMLHTTP”)，这个插件会兼容IE6, 不会报错，但是这个只支持IE，不支持其它浏览器，所以在这里做个if判断。
在这里有一点要说明一下：

var a=10;alert(a);           //得到10alert(window.a)     //同样得到10----------//如果不声明，直接alert 变量aalert(a);           //直接报错alert(window.a)     //undefined 未定义

JS有这样个特性，用没有定义的变量会报错；用没有定义的属性，会告诉你undefined。所以上面的代码中，XMLHttpRequest如果定义了就没问题，执行下面的代码，但在IE6里面没有定义，会导致报错，所以在前面添加window，使其变成属性，得到结果undefined, 等同false，执行else下面的代码。

2.连接服务器

//open(方法, 文件名, 异步传输)oAjax.open('GET', url, true);

提交方法，有两种：
一个是 get 方式，会把得到的数据放入网址；一般为“名字=值&名字=值…..“这样的方式出现在网址后缀，容量小，安全性非常差，有缓存，用于获取数据，比如浏览帖子。
一个是 post 方式，会通过http Content ，可以在Network里面访问到提交的数据，这样的方式容量大，安全性稍微高一些，无缓存，用于上传数据，比如用户注册。

url 文件名，用绝对路径，或者相对路径直接输出文件名，比如 a.txt。

异步传输，指的就是同步传输多个文件，true 表示。
同步传输，指的就是一个一个传输文件，false表示。

3.发送请求

oAjax.send();       //直接调用这个方法即可

4.接收返回

oAjax.onreadystatechange=function ()    {            if(oAjax.readyState==4){            //读取完成              if(oAjax.status==200){              //成功                            fnSucc(oAjax.responseText);            }            else{                if(fnFaild){                    fnFaild(oAjax.status);                }            }        }    };}

oAjax.onreadystatechange()方法，指从服务器接收返回信息，这个时间长短由网速决定，当接收到返回信息就会调用这个方法，等同window.onload。

oAjax.readyState事件 , 指的是浏览器和服务器进行到哪一步了。
readyState属性：请求状态

0 （未初始化）还没有调用open()方法；
1 （载入）已经调用send()方法；
2 （载入完成）send()方法完成，已经收到全部响应内容
3 （解析）正在解析响应内容
4 （完成）响应内容解析完成，可以在客户端调用了

比如，在open() 方法前面，调用alert(oAjax.readyState)会得到数字0。
所以，做出if判断，当if(oAjax.readyState==4)，所有内容读取完成，执行下面代码，但完成不代表成功，无论是文件出错或是文件不存在，都会返回4。
oAjax.status==200 ，判断是否读取成功，200代表内容读取成功，若是文件不存在会有404报错。
oAjax.responseText，指的就是读取的数据内容。

ps：假若从服务器读a.txt文档，还需要改变字符编码集，统一为UTF-8，否在在浏览器里面显出会出现乱码情况。
还有一个关于Ajax的缓存机制，拿上面的例子来说，点击浏览器按钮读取a.txt，读取内容为 “哈哈哈”，然后在改变a.txt文档内容为 “我改变了”，再去刷新浏览器，点击按钮读取a.txt，会发现读取内容还是“哈哈哈”，等待很久之后才会改变，这就是缓存问题。
如何解决：在 a.text后面加上?t=’+new Date().getTime()

oBtn.onclick=function (){        ajax('a.text?t='+new Date().getTime(), function (str){            alert(str);        });    };

理解：在一般网页会看见一些后缀，比如：
https://www.baidu.com/s?cl=2&tn=baidutop10&fr
更改？后面的值并不会改变网页内容。
new Date().getTime() 返回到70年到现在的毫秒数，每一次点击按钮都会有不一样的数字，都会更改当前URL后面的数字，跟着文件的变化跟着变化，不会受到缓存的干扰。

1 0