怎样用原生js封装ajax函数

步骤：

JS原生ajaxajax：一种请求数据的方式，不需要刷新整个页面；
ajax的技术核心是 XMLHttpRequest 对象；
ajax 请求过程：创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据；

1.第一步：创建对象，考虑兼容性。

方法步骤：

function getXHR(){
    //1：创建ajax对象
    var oAjax;
    if(window.XMLHttpRequest){
    //IE7+, Firefox, Chrome, Opera, Safari
    oAjax=new XMLHttpRequest();
    else{
    //  这是兼容IE
    oAjax=new ActiveXObject("Microsoft.XMLHTTP")
                }               
        return oAjax;
                }

2.第二步：验证ajax对象是否创建成功。

方法步骤：

$('username').onkeyup=function(){}   //  //onkeyup onblur

3.第三步：发送请求

方法步骤：

var xhr=getXHR();
// 发送请求(准备资料，真正的发送)
open(get,url,true)
//第一个参数：数据传输方式 get  post                    
// 第二个参数：处理文件,要数据：直接写路径就好；提交数据：在地址那里写数据（get方式）
//第三个参数：同步或者异步方式，默认是异步true

4.第四部：发送请求。

方法步骤：

xhr.send(null);
//send() 如果是get方式，写null或者为空
//如果是post，参数那就直接写要传输的内容

5.请求状态监控

      onreadystatechange事件
      readyState属性：请求状态
     0    （未初始化）还没有调用open()方法
     1    （载入）已调用send()方法，正在发送请求
     2    （载入完成）send()方法完成，已收到全部响应内容
     3    （解析）正在解析响应内容
     4    （完成）响应内容解析完成，可以在客户端调用了
           status属性：请求结果
           responseText

方法步骤：

xhr.onreadystatechange=function(){
    if(xhr.readyState==4){
       if(xhr.status==200){
        }                           
    }
}

js的ajax的GET请求实例：

<script type="text/javascript">
            /* 创建 XMLHttpRequest 对象 */
            var xmlHttp;
            function GetXmlHttpObject() {　　
                if(window.XMLHttpRequest) {　
         // code for IE7+, Firefox, Chrome, Opera, Safari  　　　　
         xmlhttp=new XMLHttpRequest(); 
 　　}
    else {
    // code for IE6, IE5  　     
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");　
            }　　
        return xmlhttp;
                }
    // ajax方法-
  function getLabelsGet(){  　　
        xmlHttp = GetXmlHttpObject();　　
        if(xmlHttp == null) {　　　　
            alert('您的浏览器不支持AJAX！ ');  
            return;　　
                    }　　
    var id = document.getElementById('id').value;　　
    var url = "?id=" + id + "&t/" + Math.random();
        xmlHttp.open("GET", url, true);　　
//发送事件后，收到信息了调用函数 
        xmlHttp.send();
                }
        function getOkGet() {　　
    if(xmlHttp.readyState == 1 || xmlHttp.readyState == 2 | xmlHttp.readyState == 3) {　
    　　　 // 本地提示：加载中  
            }　　
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {　　　　
         var d = xmlHttp.responseText;　　　
         　 // 处理返回结果  
                } 
                }
        </script>

js的ajax的POST请求实例：

<script type="text/javascript">
            /* 创建 XMLHttpRequest 对象 */
            var xmlHttp;
            function GetXmlHttpObject() {
                if(window.XMLHttpRequest) { 
                // code for IE7+, Firefox, Chrome, Opera, Safari 
            xmlhttp = new XMLHttpRequest();
                } else { 
                // code for IE6, IE5 
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                return xmlhttp;
            }
            // ajax方法- 
            function getLabelsPost() {
                xmlHttp = GetXmlHttpObject();
                if(xmlHttp == null) {
                    alert('您的浏览器不支持AJAX！');
                    return;
                }
                var url = "http://www.lifefrom.com/t/" + Math.random();
                xmlhttp.open("POST", url, true);
                xmlhttp.setRequestHeader("Content-type", 

"application/x-www-form-urlencoded");
                xmlhttp.send();
                xmlHttp.onreadystatechange = getLabelsOK; 
//发送事件后，收到信息了调用函数 
            }
            function getOkPost() {
                if(xmlHttp.readyState == 1 || xmlHttp.readyState == 2 || xmlHttp.readyState == 3)                   {
                    // 本地提示：加载中/处理中
                }
                if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            var d = xmlHttp.responseText; 
            // 返回值  // 处理返回值
                }
            }
        </script>