【转】js通过xmlHttpRequest向服务器请求

使用js通过xmlHttpRequest向服务器请求，再根据返回的结果进行更新面页，

可以做到无刷新，也就是AJAX技术了。

项目中用到这一点，所以也就写下来，以供自己以后查询和使用。

1、要例用xmlHttpRequest向服务器请求，首要的就是要创建一个

     xmlHttpRequest对象，但这个对象会根据浏览器的不同而不同，

　　所以创建的时候也有区别。代码如下

view plaincopy to clipboardprint?
var xmlHttp = false;  
          
        /*@cc_on @*/ 
        /*@if (@_jscript_version >= 5) 
            try 
            { 
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 
            }  
            catch (e)  
            { 
                try  
                { 
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
                }  
                catch (e2)  
                { 
                    xmlHttp = false; 
                }   
            } 
        @end @*/ 
        if (!xmlHttp && typeof XMLHttpRequest != 'undefined')   
        {  
          xmlHttp = new XMLHttpRequest();  
        }  
var xmlHttp = false;
       
        /*@cc_on @*/
        /*@if (@_jscript_version >= 5)
            try
            {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e)
            {
                try
                {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e2)
                {
                    xmlHttp = false;
                } 
            }
        @end @*/
        if (!xmlHttp && typeof XMLHttpRequest != 'undefined')
        {
          xmlHttp = new XMLHttpRequest();
        } 

　　有一点得说明，这个代码最好以静态的方式执行，也就是一开始就让页面运行这些代码以产生xmlHttpRequest

　　因为它可能会创建不成功，如果创建不成功的话，直接就不再执行了，以免浪费不必要的资源

2、创建了xmlHttpRequest对象后，就要使用它了

     方法如下

function callServer()
        {       
            xmlHttp.open("get","www.baidu.com",true);

　　　　//这是一个委托事件，也就是xmlHttpRequest请求后的结果给那个方法调用

            xmlHttp.onreadystatechange = updatePage;
             
            xmlHttp.send(null);
        }

3、请求后就要处理结果了，这个处理结果的方法就是那个委托的方法

       function updatePage()
        {
              if (xmlHttp.readyState == 4)
              {

 　　　　　　　var response = xmlHttp.responseText;  //这个就是请求后得到的Html源码，再根据源码处理自己要做的事

              }

        }

4、这里我写的不尽详细，因为我也是完成任务就行的了，下次能再次用起来就OK的那种。。。。

　　如果要看详细的话，请参看　http://www.ccvita.com/6.html 　这一篇文章

2010.4.29补充：

     1、创建xmlHttpRequest还是用比较简单的方法比较好，如下

var req;

      

       function init()

       {

           if(window.XMLHttpRequest)

           {

              req = new XMLHttpRequest();

           }

           else if (window.ActiveXObject)

           {

              req = new ActiveXObject("Microsoft.XMLHTTP");

           }

       }

 

 

    2、 通过xmlHttpRequest请求的时候分两种，一种是POST一种是GET。这两种在传参数方面也有不同。

 

          Get的话就用简单的后面带参数的方式传过去，但POST就有点不一样了。它传参的方式是这样：

 

       

      req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  

      var c = "ID?89&Name=Love"  //就是这种形式

      req.send(c);

         

          并且要记信，req.setRequestHeader必须放在OPEN之后，也就是请求之后，否则另外一个页面是无法获取

          到参数的。至于其中的原理好像跟浏览器有关，这点没进行深入了解

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/liushengmz/archive/2010/03/29/5426732.aspx