转载

原生js ajax 实例

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

什么是 XMLHttpRequest 对象？

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

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

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

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

更多详情请参考 w3school

// js 创建XMLHttpRequest 对象 function createXMLHttpRequest() {  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 回调函数 function ajax(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); }

// 回调函数 function callback_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即可
function check_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); }