Ajax学习

来源：互联网发布：机器人聊天的软件编辑：程序博客网时间：2024/06/10 16:49

一、什么叫做Ajax
ajax : Asynchronous JavaScript and XML 异步JavaScript和XML

用javascript异步形式去操作xml

主要用于数据交互

二、Ajax的基本原理
1、创建Ajax对象

        var xhr = null;        if (window.XMLHttpRequest) {            xhr = new XMLHttpRequest();        } else {            xhr = new ActiveXObject('Microsoft.XMLHTTP');        }

2、设置请求方式以及是否异步
首先需要了解异步和同步的概念：异步:非阻塞前面的代码不会影响后面代码的执行（例如setInterval函数）
同步:阻塞前面的代码会影响后面代码的执行

xhr.open('get','1.txt',true);

这里的true指的是异步加载

3、

xhr.send();

在post方式下需要使用send方法传送数据

4、当发送完请求后需要等待服务器返回内容，这里有几个关键的参数：

            readyState : ajax工作状态            responseText : ajax请求返回的内容就被存放到这个属性下面            on readystate change : 当readyState改变的时候触发            status : 服务器状态，http状态码

由于Ajax一般是异步加载，那么我们必须要判断请求内容何时加载完成，readyState代表Ajax工作状态，当其值为4的时候代表加载完成并且已经解码完毕，但是这并不代表我们可以是用返回值了，因为返回值可能是不存在的或者是错误的（比如open的时候url不小心写错了，导致找不到文件），只有当status等于200的时候才是正常的状态。

        xhr.onreadystatechange = function() {            if ( xhr.readyState == 4 ) {                if ( xhr.status == 200 ) {                    alert( xhr.responseText );                } else {                    alert('出错了,Err：' + xhr.status);                }            }        }

三、Ajax函数的封装

function ajax(method, url, data, success) {    var xhr = null;    try {        xhr = new XMLHttpRequest();    } catch (e) {        xhr = new ActiveXObject('Microsoft.XMLHTTP');    }    if (method == 'get' && data) {        url += '?' + data;    }    xhr.open(method,url,true);    if (method == 'get') {        xhr.send();    } else {        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');        xhr.send(data);    }    xhr.onreadystatechange = function() {        if ( xhr.readyState == 4 ) {            if ( xhr.status == 200 ) {                success && success(xhr.responseText);            } else {                alert('出错了,Err：' + xhr.status);            }        }    }}

四、需要注意的一些地方
1、由于服务器返回的数据是字符串格式，需要采用适当的手段将其转换为我们需要的格式

stringify : 可以把一个对象转成对应字符串parse : 可以把字符串转成对应对象

注意：json必须是严格模式parse方法才有效

2、get方式下的缓存问题

解决方法：可以在url后面跟一个时间戳new Date().getTime()

0 0