初窥ajax（一） ——封装ajax

写在前面

    AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。    在这篇文章，我会带你去揭开他神秘的面纱，深入的去了解他。

创建ajax

第一步：创建xhr对象

var xhr = null;//兼容处理if(window.XMLHttpRequest)//ie7+及主流浏览器    xhr = new XMLHttpRequest();else//ie7-    xhr = new ActiveXObject("Microsoft.XMLHTTP");

第二步：准备发送前的一些配置参数

xhr.open(data.type,data.url,true);//data.type指发送的类型，主要是post和get//data.url指发送的url信息

第三步：执行发送的动作

if(data.type == 'get'){    xhr.send(null);}else if(data.type == 'post'){    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    xhr.send(data.data);}

第四步：指定回调函数

xhr.onreadystatechange = function(){    if(xhr.readyState == 4 ){        if(xhr.status == 200)//执行成功            data.success(xhr.responseText);        else            data.failure();    }}

怎么样，自己封装一个ajax函数是不是很简单。这里有一点需要注意。

xhr.readyState状态码

0: XMLHttpRequest对象创建完成 ===== 下达订单1：表示发送请求的动作准备好了，但是还没有开始发送 === 包裹整装待发2：表示已经发送完成 === 包裹已经出库3: 服务器已经返回了数据 === 包裹已经签收4：服务器返回的数据已经可以使用 === 使用    在程序运行过程中，其实xhr.onreadystatechange被执行了4次，但是只有在xhr.readyState == 4时，才指定了回调函数。    什么是回调函数？    简单来说就是我指定了函数名并且往里面传了参数，但是函数内部没有写任何代码。    然后你使用我传的参数实现你想要的功能。

调用ajax（get请求）

login.addEventListener('click',function(){    var param = {            url:'check.php?username='+username.value+"&password="+password.value,            type:'get',            dataType:'json',            success:function(data){                info.innerHTML = data;            },            failure:function(){                console.log("error!");            }        };        ajax(param);});

调用ajax（post请求）

login.addEventListener('click',function(){    var param = {        url:'check.php',        data:"username="+username.value+"&password="+password.value,        type:'post',        dataType:'json',        success:function(data){            info.innerHTML = data;        },        failure:function(){            console.log("error!");        }    };    ajax(param);});

这里的后台逻辑我简单用了下php处理

后台php

<?php    //get请求    $username = $_GET['username'];    $password = $_GET['password'];    //post请求    $username = $_POST['username'];    $password = $_POST['password'];    // echo $username;    if($username == 'admin' && $password == '123'){        echo 'success!';    }else        echo 'error!';    //目的是动态获取数据    //例子：提交数据时进行验证 登录 ?>