原生JS操作AJAX

1，get方式的AJAX

function sendAjaxReq()
{
    //1,创建ajax引擎 XMLHttpRequest对象
    var req = new XMLHttpRequest() || new ActiveXObject("Msxm12.XMLHTTP");
    //2,打开一个请求，此时未发送请求，定义好发送请求的方式以及是否需要携带数据 是否同步异步
    req.open("get", "testAjax?phone=iphone&apple=pen");
    //3,准备好处理服务器返回的数据
    req.onreadystatechange = function()
    {
        if(req.readyState == 4)
        {
            //返回json数据的解析格式
            var str = req.responseText;
            eval("var obj=" + str);
            alert(obj.name);
            //返回xml的解析格式
            var data = req.reponseXML.getElementsByTagName("bigName")[0].first(child.data);
        }
    }
    //4,发送请求,如果是在火狐下，使用get方式发送ajax请求，send的时候括号写上null
    req.send(null);
}

2，post方式AJAX

//使用post传参，需要携带一个请求头模拟表单提交
function sendAjax()
{
    var request = new XMLHttpRequest() || new ActiveXObject("Msxm12.XMLHTTP"); 
    request.open("post", "testAjax?phone=1", true)
    request.onreadystatechange = function()
    {
        if(request.readyState == 4)
        {
            if(request.status == 200)
            {
                var str = request.responseText;
                alert(str); 
            }
            else if(request.status == 404)
            {
                alert("找不到资源");
            }
        }
    }
    request.setRequestHeader("content-type", "application/x-www-form-urlencoded")
    request.send("phone=");
}

 

3，封装了get和post的AJAX

function sendAjaxReq(method,url,param,fun200,fun404,fun500)
 {
     var req;
      if(window.XMLHttpRequest)
      {
          req = new XMLHttpRequest();    
      }
          else if(window.ActiveXObject)
      {
         req = new ActiveXObject("Msxml2.XMLHTTP");
      }
      req.open(method,url);
      req.onreadystatechange = function()
      {
          if(req.readyState == 4)
          {
              if(req.status == 200)
              {
                  if(fun200)
                  {
                     fun200(req.responseText);
                  }
              }
              else if(req.status == 404)
              {
                  if(fun404)
                  {
                      fun404();
                  }
              }
              else if(req.status == 500)
              {
                  if(fun500)
                  {
                      fun500();
                  }
              }
          }
      }
      if(method.toUpperCase() == "GET")
      {
          req.send(null);
      }
      else if(method.toUpperCase() == "POST")
      {
          req.setRequestHeader("context-type", "application/x-www-form-urlencoded");
          req.send(param);
      }
  }

function testAjax()
{
    sendAjaxReq("get","ajaxServlet?uname=1&password=2",null,function(data)
    {
        eval("var obj="+data);
        alert(obj.data);
    });
}