首页 > 程序开发 > web前端 > JavaScript > 正文
Ajax核心——XMLHttpRequest基础
2013-10-11       个评论      
收藏    我要投稿
  XMLHttpRequest对象负责将用户信息以异步方式发送到服务器,并接受服务器返回的相应信息和数据。也就是可以在页面已经加载后从后从服务器请求、接收数据,这样使得用户的体验度更好,而同时提升了客户端与服务器的交互速度,AJax得以实现。故    XMLHttpRequest是Ajax技术体系中最为核心的技术,缺少了它,Ajax的其余技术就无法成为一个有机的整体。
    
创建XMLHttpReques
 
      在使用XMLHttpRequest对象发送请求和处理响应之前,首先必须使用JavaScript创建XMLHttpRequestRequest对象。
代码:
 
<span style="font-family:FangSong_GB2312; font-size:18px"><script language="javascript" type = "text/javascript">  
  var xmlHttp;  
  //使用新版本的IE创建XMLHttprequestRequest对象  
 try{  
     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");  
     }catch(_e){  
   //使用旧版本的IE创建XMLHttpRequest对象  
    try{  
       xmlHttp = new AcriveXObject("Microsoft.XMLHTTP");  
       }catch(_E){ }  
      }  
     
   //使用其他浏览器创建XMLHttpRequest对象  
    if (!xmlHttp && typeof XMLHttpRequest !='undefined')  
    try{  
       xmlHttp = new  XMLHttpRequest();  
     }catch(e){  
        xmlHttp = false;  
        }  
       }  
</script>  
</span>  

 

 
 
属性和方法
    XMLHttpRequest对象提供了一系列属性和方法,来向服务器端发起异步HTTP请求,监听服务器状态,并在服务器完成数据响应处理之后接收服务器端返回的信息数据。
         
 
XML五步使用法
 
1、建立XMLHttpRequest对象
2、注册回调函数
3、使用Open方法设置和服务器端交互的基本信息
4、设置发送的数据,开始和服务器端交互
5、在回调函数中判断交互是否结束,响应是否正确,并根据需要获取服务器端返回的数据,更新页面内容。
 
实例代码:
 
<span style="font-family:FangSong_GB2312; font-size:18px">      <script type="text/javascript">   
        var xmlhttp;   
        function submit()    
        {   
            if(window.XMLHttpRequest)   
            {   
            //IE7 above,firefox,chrome^^   
                xmlhttp=new XMLHttpRequest();   
                //为了兼容部分Mozillar浏览器,当来自服务器响应开头不是xml,导致的无法响应问题   
                if(xmlhttp.overrideMimeType)   
                {   
                    xmlhttp.overrideMimeType('text/xml');   
                }   
            }   
            else if(window.ActiveXObject)   
            {   
                //IE5\IE6   
                xmlhttp=new activeXObject("Microsoft.XMLHTTP");   
            }   
            if(xmlhttp==null||xmlhttp==undefined)   
            {   
                alert("con't create XMLHttpRequest Object");   
            }   
            var userName = document.getElementById('testText').value;   
            //注册回调函数 (错误的写法callback())  
            xmlhttp.onreadystatechange = callback;   
               
            //Get方式交互,设置服务器端交互的响应的参数  
            //发送信息   
            xmlhttp.open('GET','AjaxServer.aspx?name='+userName,true);   
           //设置向服务器端发送的数据,启动和服务器端的交互  
           xmlhttp.send(null);   
            
            //Post方式交互          
                             xmlhttp.open('POST', 'AjaxServer', true);   
                           xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');   
                           
             //设置向服务器端发送的数据,启动和服务器端交互   
               xmlhttp.send('name='+userName);  
      
        }  
  
        //定义callback 函数   
        function callback()    
        {   
            //判断交互是否完成,是否正确返回 ,还有判断服务器端是否正确返回了数据  
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)    
            {   
                //获取服务器返回信息   
                var message = xmlhttp.responseText;   
                //得到提示信息div   
                var testDiv=document.getElementById('test');   
                testDiv.innerHTML=message;   
            }   
        }   
    </script>   
</span>  

 

 
点击复制链接 与好友分享!回本站首页
相关TAG标签 核心 基础
上一篇:javascript排序 查找算法大全
下一篇:JS seelct box 选中无法显示的问题
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做实用的IT技术学习网站