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 5646 DZY Loves Partition
    bzoj 1001 狼抓兔子 平面图最小割
    poj 1815 Friendship 最小割 拆点 输出字典序
    spoj 1693 Coconuts 最小割 二者取其一式
    hdu 5643 King's Game 约瑟夫环变形
    约瑟夫环问题
    hdu 5642 King's Order
    CodeForces 631C Report
    1039: C语言程序设计教程(第三版)课后习题9.4
    1043: C语言程序设计教程(第三版)课后习题10.1
  • 原文地址:https://www.cnblogs.com/keanuyaoo/p/3362383.html
Copyright © 2011-2022 走看看