创建最原始的XMLHttprequest对象

 一般我们都是使用框架来进行AJAX技术的实现,在早期还没有这些js框架的时候是如何实现ajax的技术的呢?

 

创建XHR对象的代码如下:

 

  
  
  
  
  1. var xmlhttp; 
  2. function XHRsubmit(){ 
  3.     var userName = document.getElementById("username").value; 
  4.     //创建XMLHttprequest对象,每个浏览器的这个对象都是不相同的,所以这个是最复杂的一步 
  5.     //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码 
  6.     if(window.XMLHttpRequest){ 
  7.     //针对FireFox,Mozillar,Opera,Safari,IE7,IE8,IE9 
  8.         xmlhttp = new XMLHttpRequest(); 
  9.         //针对某些特定版本的mozillar浏览器的BUG进行修正 
  10.         if(xmlhttp.overrideMimeType){ 
  11.             xmlhttp.overrideMimeType("text/xml"); 
  12.             //alert(xmlhttp); 
  13.         } 
  14.     }else if(window.ActiveXObject){ 
  15.         //针对IE6,IE5.5,IE5通过ActiveXObject创建 
  16.         var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; 
  17.         for(var i =0; i<activexName.length; i++){ 
  18.             try{ 
  19.                 //取出一个控件名进行创建,如果创建成功就终止循环 
  20.                 //如果创建失败,会抛出异常,然后继续循环,继续尝试创建 
  21.                 xmlhttp = new ActiveXObject(activexName[i]);  
  22.                 break; 
  23.             }catch(e){ 
  24.              
  25.             } 
  26.         } 
  27.         //queryXMLHttpRequest对象创建成功 
  28.          
  29.     } 
  30.         if(xmlhttp){ 
  31.             alert("XMLHttpRequest对象创建成功"); 
  32.         }else{ 
  33.             alert("XMLHttpRequest对象创建失败"); 
  34.             return ; 
  35.         } 
  36.         //注册回调函数 
  37.         //注册回调函数时,只需要函数名不要加括号 
  38.          
  39.         xmlhttp.onreadystatechange = callback2
  40.         //GET方式请求 
  41.         //xmlhttp.open("GET","TestAction!test2.action",true); 
  42.         //POST方式请求需要自己设置http的请求头 
  43.         xmlhttp.open("POST","TestAction!test2.action",true); 
  44.         xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
  45.         //4.发送数据,开始和服务端交互 
  46.         //同步下,send这句话会等服务端数据回来后才执行完 
  47.         //异步下,sned这句话会立即执行 
  48.         xmlhttp.send("name="+$("#username").val()); 
  49.         //xmlhttp.send(null); 
  50.     //回调函数 
  51.     function callback2(){ 
  52.     //alert(xmlhttp.readyState); 
  53.         //5接收响应数据 
  54.         //判断对象的状态是否交互完成 
  55.         if(xmlhttp.readyState == 4){ 
  56.             //判断http的交互是否成功 
  57.             if(xmlhttp.status == 200){ 
  58.                 //获取服务器端返回的数据 
  59.                 //获取服务器端输出的纯文本数据 
  60.                 var responseText = xmlhttp.responseText; 
  61.                 //将数据显示在页面上 
  62.                 //通过dom的方式找到div标签对应的元素节点 
  63.                 var divNode = document.getElementById("result"); 
  64.                 //设置元素节点中的html内容 
  65.                 divNode.innerHTML = responseText
  66.             }else{ 
  67.                 alert("出错了"); 
  68.             } 
  69.         }else{ 
  70.             //alert("出错了1"); 
  71.         } 
  72.     } 

 

 

  
  
  
  
  1. <input id="username" name="username" value="请输入..."></input> 
  2.  
  3. <input type="button" onclick="XHRsubmit()" value="使用XHR的post方法提交"/> 

 

本文出自 “蔚蓝海洋” 博客,谢绝转载!

你可能感兴趣的:(XHR对象创建)