原生js ajax 实例

最新推荐文章于 2024-09-10 09:48:41 发布

mrhaoxiaojun

最新推荐文章于 2024-09-10 09:48:41 发布

阅读量484

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

70 篇文章 0 订阅

订阅专栏

现在原生js ajax 现在已经很少用了，jQuery框架等更方便；本人因为喜欢原生js，不喜欢框架，所以才用原生js，各位根据自己情况使用

什么是 XMLHttpRequest 对象？

XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 对象是开发者的梦想，因为您能够：

在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象。

更多详情请参考 w3school

// js 创建XMLHttpRequest 对象functioncreateXMLHttpRequest()
{
  var XMLHttpReq;
  try 
  {
    XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");//IE高版本创建XMLHTTP  
  }
  catch(E)
  {
    try
    {
      XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE低版本创建XMLHTTP
    }
    catch(E)
    {
      try
      {
        XMLHttpReq = new XMLHttpRequest();//兼容非IE浏览器，直接创建XMLHTTP对象
      }
      catch(E)
      {
        alert("你的浏览器不支持XMLHTTP对象，请升级到IE6以上版本！");
        XMLHttpReq = false;
      }	
    }
  }
  return XMLHttpReq;
}

// url 地址// type 同步或者异步  true|false（true，即为异步方式，不用等待请求完成，即可执行ajax后面方法。若要将其设置为false，则所有的请求均为同步请求，在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成 才可以执行。一般用true）// parameter 参数格式为 a=1&b=2&c=3// callback 回调函数functionajax(url,method,type,parameter,callback)
{
   // 获取XMLHttpRequest对象 
  XMLHttpReq = createXMLHttpRequest();
  XMLHttpReq.open(method,url,type);
  // post 传参需要添加上这个 否则 post 失败if(method == 'post')
  {
    XMLHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  }

// 调用回调函数 
    XMLHttpReq.onreadystatechange = callback;

  // 发送参数 
    XMLHttpReq.send(parameter);
}

// 回调函数functioncallback_check_video()  
{
   // 0：请求未初始化（还没有调用 open()）。// 1：请求已经建立，但是还没有发送（还没有调用 send()）。// 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。// 3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。// 4：响应已完成；您可以获取并使用服务器的响应了。// readyState 状态为4 响应已完成if (XMLHttpReq.readyState==4)  
  {  
    // 200表示访问成功if (XMLHttpReq.status==200)  
    {  
      // 获取相应文本var res = XMLHttpReq.responseText;
      // 以下为处理相应数据逻辑根据自己业务逻辑做相应处理// 把json串 转换为对象var objRes = JSON.parse(res)；
      if(objRes.status != 0)
      {
        alert(objRes.msg)
        return false;
      }
      alert(objRes.msg)；
      window.location.reload();
    }  
    XMLHttpReq = null;
  }  
}

// 调用实例 此处为post // 如果为get方式，则把参数拼接到url中,method为get,parameter为null即可functioncheck_video(obj)
{
  var url = "";
  var method = "post";
  var type = true;

  // js 获取html标签自定义属性var check_type = obj.getAttribute('checkvideo');
  // 参数var parameter = "checkvideo="+check_type+"&videoid="+obj.getAttribute('videoid');
  ajax(url,method,type,parameter,callback_check_video);
}

现在原生js ajax 现在已经很少用了，jQuery框架等更方便；本人因为喜欢原生js，不喜欢框架，所以才用原生js，各位根据自己情况使用

什么是 XMLHttpRequest 对象？

XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 对象是 开发者的梦想 ，因为您能够：

在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象。

更多详情请参考 w3school

// js 创建XMLHttpRequest 对象functioncreateXMLHttpRequest()
{
  var XMLHttpReq;
  try 
  {
    XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");//IE高版本创建XMLHTTP  
  }
  catch(E)
  {
    try
    {
      XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE低版本创建XMLHTTP
    }
    catch(E)
    {
      try
      {
        XMLHttpReq = new XMLHttpRequest();//兼容非IE浏览器，直接创建XMLHTTP对象
      }
      catch(E)
      {
        alert("你的浏览器不支持XMLHTTP对象，请升级到IE6以上版本！");
        XMLHttpReq = false;
      }	
    }
  }
  return XMLHttpReq;
}

// url 地址// type 同步或者异步  true|false（true，即为异步方式，不用等待请求完成，即可执行ajax后面方法。若要将其设置为false，则所有的请求均为同步请求，在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成 才可以执行。一般用true）// parameter 参数格式为 a=1&b=2&c=3// callback 回调函数functionajax(url,method,type,parameter,callback)
{
   // 获取XMLHttpRequest对象 
  XMLHttpReq = createXMLHttpRequest();
  XMLHttpReq.open(method,url,type);
  // post 传参需要添加上这个 否则 post 失败if(method == 'post')
  {
    XMLHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  }

// 调用回调函数 
    XMLHttpReq.onreadystatechange = callback;

  // 发送参数 
    XMLHttpReq.send(parameter);
}

// 回调函数functioncallback_check_video()  
{
   // 0：请求未初始化（还没有调用 open()）。// 1：请求已经建立，但是还没有发送（还没有调用 send()）。// 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。// 3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。// 4：响应已完成；您可以获取并使用服务器的响应了。// readyState 状态为4 响应已完成if (XMLHttpReq.readyState==4)  
  {  
    // 200表示访问成功if (XMLHttpReq.status==200)  
    {  
      // 获取相应文本var res = XMLHttpReq.responseText;
      // 以下为处理相应数据逻辑根据自己业务逻辑做相应处理// 把json串 转换为对象var objRes = JSON.parse(res)；
      if(objRes.status != 0)
      {
        alert(objRes.msg)
        return false;
      }
      alert(objRes.msg)；
      window.location.reload();
    }  
    XMLHttpReq = null;
  }  
}

// 调用实例 此处为post // 如果为get方式，则把参数拼接到url中,method为get,parameter为null即可functioncheck_video(obj)
{
  var url = "";
  var method = "post";
  var type = true;

  // js 获取html标签自定义属性var check_type = obj.getAttribute('checkvideo');
  // 参数var parameter = "checkvideo="+check_type+"&videoid="+obj.getAttribute('videoid');
  ajax(url,method,type,parameter,callback_check_video);
}