”呼叫后台，我要数据，快给我数据“霸道的ajax说

对前端工程师来说，ajax这么个大招一定得点满啊，对开发绝对是超有用的。

能够无刷新的部分更新页面的数据，这么逆天的技能属性可是能实现出很多很酷炫的交互效果的。

然而虽然是很厉害，但其实ajax实现的原理并不会很复杂的，基本上利用ajax实现出一个效果主要都是要经过这两个步骤：

1 通过HTTP请求，获取数据或者提交数据。

2 取得响应数据，对响应数据操作。

对数据的操作一般都是通过dom来完成，这里不再多赘述，我们来看一下ajax是如何请求到数据或着发送数据的吧。

function ajax(method, url, data, success) {
    var xhr = null;
    try {
        xhr = new XMLHttpRequest();//new一个xhr对象，这个对象像信使一样存在着
    } catch (e) {
        xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);//为了兼容IE6
    }
    //如果是get请求，而且data存在，则是要通过get请求发送数据，通过get请求发送数据，数据会被链接到请求地址之后
    if (method == ‘get‘ && data) {
        url += ‘?‘ + data;
    }
    //初始化请求，method表示请求方式，url是请求地址，true表示异步
    xhr.open(method,url,true);
    if (method == ‘get‘) {
        xhr.send();//发送请求
    } else {
        xhr.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘);//post方式，需要设置请求头
        xhr.send(data);//发送提交数据
    }

    xhr.onreadystatechange = function() {

        if ( xhr.readyState == 4 ) {//4是请求最后的阶段，
            //http状态码，2开头便是还请求成功
            if ( xhr.status == 200 ) {
                success && success(xhr.responseText);//在这里判断一下，如果success存在，则执行它，将响应数据作为参数传入回调函数
            } else {
                alert(‘出错了,Err：‘ + xhr.status);
            }
        }

    }
}

这就是一个还算挺完整的从数据请求到获取的过程了，我们如何使用取得到的数据呢？

一段小代码说明一下：

ajax("get","***.php",null,function(data)
        {
            var data=JSON.parse(data);//通过xhr.responseText取得的数据是字符串格式的，需要解析成json对象

            for(var i=0;i<data.length;i++){
            ...
            }

            ...

        });

get和post：

1.get请求需注意缓存问题,post请求不需担心这个问题

2.post请求必须设置Content-Type值为application/x-form-www-urlencoded

3 Get请求的目的是给予服务器一些参数,以便从服务器获取列表.例如:list.aspx?page=1,表示获取第一页的数据

Post请求的目的是向服务器发送一些参数,例如form中的内容.