`
sisi1984117
  • 浏览: 155631 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

【转】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

分享到:
评论

相关推荐

    js ajax XMLHttpRequest的使用

    在JavaScript中,你可以通过`new XMLHttpRequest()`来创建: ```javascript var xhr = new XMLHttpRequest(); ``` 一旦实例化了XMLHttpRequest对象,你需要设置请求的类型(GET或POST)、URL以及是否异步执行。这...

    Js拦截全局ajax请求

    在JavaScript开发中,有时我们需要对全局的Ajax请求进行拦截,以便进行统一的处理,比如添加统一的错误处理、数据格式化、性能监控等。这种需求通常可以通过“Ajax Hook”技术来实现。Ajax Hook允许我们捕获并修改...

    JavaScript下通过的XMLHttpRequest发送请求的代码

    在JavaScript中,XMLHttpRequest(XHR)对象是用于异步与服务器进行数据交换的关键工具,它使得网页可以在不刷新整个页面的情况下与服务器进行通信,这就是常说的Ajax(Asynchronous JavaScript and XML)技术的基础...

    用js创建XMLHttpRequest对象池

    在JavaScript中,XMLHttpRequest(XHR)对象是用于在不刷新整个页面的情况下与服务器进行异步数据交换的关键工具。这种技术通常被称为Ajax(Asynchronous JavaScript and XML),尽管现在它不仅仅局限于XML,还包括...

    XMLHTTPRequest属性与方法

    **XMLHTTPRequest** 是一套重要的 API,它允许在浏览器端利用 JavaScript、VbScript 或 Jscript 等脚本语言通过 HTTP 协议发送请求和接收 XML 及其他类型的数据。这一技术的核心优势在于能够实现网页局部内容的更新...

    Ajax简单实例 XMLHttpRequest

    在JavaScript中,我们可以通过以下方式创建一个XMLHttpRequest实例: ```javascript var xhr = new XMLHttpRequest(); ``` 接下来,我们需要设置HTTP请求的方法、URL和是否异步执行。通常,我们使用`open()`方法来...

    详解XMLHttpRequest(一)同步请求和异步请求

    XMLHttpRequest(XHR)是JavaScript中用于与服务器进行异步数据交换的核心组件,使得网页可以在不刷新整个页面的情况下更新部分数据。在本文中,我们将深入探讨XMLHttpRequest的同步请求和异步请求。 首先,让我们...

    xhr:使用 XMLHttpRequest 向服务器发出请求

    锚点/XHR xhr 模块实现了对使用 XMLHttpRequest 发出 HTTP 请求的支持。安装成分 $ component install anchorjs/xhr沃洛 $ volo add anchorjs/xhr用法xhr.request()返回一个Request实例。 如果需要使用 POST 请求...

    WEB开发 之 AJAX - 向服务器发送请求.docx

    通过使用XMLHttpRequest对象的open()和send()方法,我们可以向服务器发送请求。 二、GET请求和POST请求 在AJAX中,我们可以使用GET请求和POST请求两种方式向服务器发送请求。GET请求适用于大部分情况下,但是当...

    window.XMLHttpRequest详解(AJAX工作原理)1

    `window.XMLHttpRequest`对象是AJAX的基础,它使得网页能够与服务器进行后台HTTP请求和响应交换,而不会影响到用户正在浏览的当前页面。这意味着,当一个`XMLHttpRequest`对象发起请求后,可以立即将控制权交还给...

    javascript对XMLHttpRequest异步请求的面向对象封装

    在JavaScript中,XMLHttpRequest(XHR)是用于在不重新加载整个网页的情况下与服务器交换数据并更新部分网页的关键技术。在给定的代码中,我们看到了一个面向对象的封装,它创建了一个名为`CallBackObject`的类,...

    XMLHttpRequest

    异步请求的基本原理是客户端通过JavaScript向服务器发送一个HTTP请求,并等待服务器返回结果。在此过程中,用户可以继续进行其他操作,不会阻塞用户界面。当服务器处理完请求并返回数据时,客户端会收到回调通知,并...

    XmlHttpRequest对象直接访问与通过Soap协议访问WebSevice详解示例

    XMLHttpRequest对象是JavaScript中用于实现异步HTTP请求的关键工具,它允许前端与服务器进行通信而无需刷新整个网页。在Web开发中,它被广泛应用于AJAX(Asynchronous JavaScript and XML)技术,实现实时更新页面...

    基于AJAX(XMLHTTPRequest)的服务器推送框架.zip

    【标题】"基于AJAX(XMLHTTPRequest)的服务器推送框架.zip" 涉及的主要知识点是AJAX(异步JavaScript和XML)技术以及XMLHttpRequest对象在实现服务器推送中的应用。AJAX是一种网页开发技术,它允许网页在不刷新整个...

    XMLHTTPREQUEST

    通过这个对象,开发者能够轻松地从服务器请求数据并处理响应结果,从而实现网页的部分更新而无需重新加载整个页面。 #### 创建XMLHTTPRequest对象 创建`XMLHTTPRequest`对象的过程取决于浏览器的支持情况。不同的...

    window.XMLHttpRequest详解

    **XMLHttpRequest(XHR)是Web开发中的一个关键组件,它允许JavaScript在不刷新整个页面的情况下与服务器进行异步数据交换。这种技术被称为Ajax(Asynchronous JavaScript and XML),尽管它的数据格式并不局限于XML...

    JS取服务器时间

    要获取服务器时间,我们通常需要通过HTTP请求向服务器发送一个请求,然后服务器会返回包含其当前时间的响应。这通常涉及到AJAX(异步JavaScript和XML)技术,尽管现代Web开发更多地使用Fetch API或XMLHttpRequest...

Global site tag (gtag.js) - Google Analytics