zoukankan      html  css  js  c++  java
  • [原]Ajax核心——XMLHttpRequest基础

         XMLHttpRequest对象负责将用户信息以异步方式发送到服务器,并接受服务器返回的相应信息和数据。也就是可以在页面已经加载后从后从服务器请求、接收数据,这样使得用户的体验度更好,而同时提升了客户端与服务器的交互速度,AJax得以实现。故    XMLHttpRequest是Ajax技术体系中最为核心的技术,缺少了它,Ajax的其余技术就无法成为一个有机的整体。

        

    创建XMLHttpReques

     

          在使用XMLHttpRequest对象发送请求和处理响应之前,首先必须使用JavaScript创建XMLHttpRequestRequest对象。

    代码:

    <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> 


    属性和方法

        XMLHttpRequest对象提供了一系列属性和方法,来向服务器端发起异步HTTP请求,监听服务器状态,并在服务器完成数据响应处理之后接收服务器端返回的信息数据。

            属性和方法连接:http://www.w3school.com.cn/xmldom/dom_http.asp


    XML五步使用法


    1、建立XMLHttpRequest对象

    2、注册回调函数

    3、使用Open方法设置和服务器端交互的基本信息

    4、设置发送的数据,开始和服务器端交互

    5、在回调函数中判断交互是否结束,响应是否正确,并根据需要获取服务器端返回的数据,更新页面内容。


    实例代码:

          <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)              {                  //IE5IE6                  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>  

    总结

               本篇博客简单总结了一下XMLHttpRequest对象的一些基本知识,积累理论,实践应用。通过学习XMLHttpRequest对象也体会出了BS的优势,发布简单方便,灵活,用户体验度好。

  • 相关阅读:
    hdu 1704 Rank(floyd传递闭包)
    codeforces 85D. Sum of Medians(线段树or分块)
    hdu 1706 The diameter of graph(folyd计数)
    hdu 4705 Y(树形DP)
    hdu 4123 Bob’s Race(树形DP+rmq)
    hdu 2196 Computer(树形DP)
    hdu 3534 Tree(树形DP)
    hdu 6017 Girls Love 233(dp)
    [HDU5903]Square Distance(DP)
    HDU5878~HDU5891 2016网络赛青岛
  • 原文地址:https://www.cnblogs.com/java20131201/p/3466226.html
Copyright © 2011-2022 走看看