zoukankan      html  css  js  c++  java
  • Ajaxa的原生使用方法

          Ajax整合了JavaScript、xml、CSS等现有技术而成,全称为Asynchronous JavaScript And XML,即异步的 JavaScript和xml。它使用了JavaScript通过XMLHttpRequest对象异步发送请求到服务器,然后根据结果,使用JavaScript和CSS局部更新相应网页的任务过程,其中XML用来封装请求和响应数据,CSS用来美化网页样式。
     
     
    Ajax的关键元素:
        JavaScript:Ajax技术的主要开发语言。
        DOM(文档对象模型):通过DOM属性或方法修改局部元素,实现页面局部刷新。
        CSS样式表:改变样式,美化页面效果,提升用户体验度。
        XMLHttpRequest对象(Ajax核心):以异步的方式在客户端与服务器之间传递数据。
     
     
    XMLHttpRequest对象的常用方法和属性
        常用方法:
          open(method,url,asyncl):用于创建一个新的Http请求,并制定此请求的
          方法、URL、是否异步提交及验证信息true或false。
          send(String):发送请求到服务器。
                注意:String仅用于post方法,get方法为空或null
          abort();取消 当前请求。
          setRequestHeader():单独指定请求某个Http头。
          getResponseHeader():从响应中获取指定的Http头。
            getAllResponseHeaders():获取响应的所有Http头。
     
        常用属性:
          readyState:返回请求的当前状态。(readyState常用值是:0表示未初始化,
                  1表示初始化,2表示发送数据,3表示数据传送中,4表示数据接收完毕)
          status:返回当前请求的Http状态码。(200表示正确返回,404表示找不到访问对象)
          responseText:以文本形式获取响应值。
          reponseXML:以XML形式获取响应值,并且解析成DOM对象返回。
          statusText:返回请求的响应行代码。
          onreadystatechange:设置回调函数。
     
     
    Ajax的使用步骤:
          1.创建XMLHttpRequest对象,通过window.XMLHttpRequest的返回值判断
              XMLHttpRequest对象的方式。
          2.设置回调函数,通过onreadystatechange属性设置回调函数,函数需要自定义。
          3.初始化XMLHttpRequest组件。通过open()方法创建一个设置发送方式和请求路径
              的Http请求。
          4.发送请求。
     
     
    发送get请求及处理文本方式响应:
          //1.创建XMLHttpRequest对象
          if(window.XMLHttpRequest){//返回时true时,说明是新版本IE或其他浏览器
            xmlHttpRequest=new XMLHttpRequest();
          }else{
            xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
          }
          //2.设置回掉函数
          xmlHttpRequest.onreadystatechange=callBack;
          //3.初始化XMLHttpRequest组件
          xmlHttpRequest.open("GET",url,true);
          //4.发送请求
          xmlHttpRequest.send(null);//GET方法为空或null
          //回调函数callBack
          function callBack(){
          if( xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
          var b=xmlHttpRequest.responseText;
          根据不同的返回类型处理向响应
            ..........
        }
      }
    发送post请求及处理文本方式响应:
          //加粗部分是与get请求的区别
          //1.创建XMLHttpRequest对象
          if(window.XMLHttpRequest){//返回时true时,说明是新版本IE或其他浏览器
          xmlHttpRequest=new XMLHttpRequest();
          }else{
          //付过是IE5,IE6低版本的浏览器
          xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
          }
          //2.设置回掉函数
          xmlHttpRequest.onreadystatechange=callBack;
          //3.初始化XMLHttpRequest组件
          xmlHttpRequest.open("POST",url,true);
          //请求头部信息的格式
          xmlHttpRequest.setRuquestHeader("Content-Type","application/x-www-form-urlencoded");
          //4.发送请求
          var userinfo="uname="+uname;//需要发送的数据信息
            xmlHttpRequest.send(userinfo);
     
     
    发送GET请求及处理XML方式响应:
                  在处理XML方式响应时,需要使用XMLHttpRequest对象的responseXML属性得到服务器端
              生成的XML文档,responseXML返回的并不是简单的字符串,是一个XmlDocument对象,因此要处理XML方式的响应,需要先了解如何使用XmlDocument          对象获取服务器端返回的数据信息。
     
    XmlDocument的常用属性与方法:
          属性:
            attributes:当前节点的属性集合。
            childNodes:当前节点的所有子节点。
            firstChild:节点的第一个子节点。
          方法:
            getElementsByTagName():用来获取指定节点名的节点对象集合,参数为节点名
                                               称字符串。
             selectSingleNode():用来获取符合条件的第一个节点对象。
             selectNode():用来获取符合条件的节点对象集合。
     
              回调函数中处理XML响应的方法:
              function callBack(){
                if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
                //获取服务器端返回的XML形式的文档对象
                //加黑部分是与文本响应方式的区别
                  var dom=xmlHttpRequest.responseXML;
                   if(dom){
                      //获取节点名为“username”的节点对象集合
                      var userNodes=dom.getElementsByName("username");
                      if(userNodes.length>0){
                      //获取该节点对象中的第一个子节点
                        var username=userNodes[0].firstChild.nodeValue;
                        document.getElementById("username").value=username;
    }
    }
    }
    }
    一般都是jQuery与Ajax一起使用,原生用起来麻烦。
  • 相关阅读:
    [HNOI2016]序列
    [Cqoi2015] 编号 【逆向思维,暴力枚举】
    [NOI2015] 软件包管理器【树链剖分+线段树区间覆盖】
    [Hdu-6053] TrickGCD[容斥,前缀和]
    [Hdu-5155] Harry And Magic Box[思维题+容斥,计数Dp]
    牛客NOIP暑期七天营-提高组6
    [SHOI2007] 书柜的尺寸 思维题+Dp+空间优化
    [UVA12235] Help Bubu 思维题+状态定义+Dp
    牛客NOIP暑期七天营-TG3 赛后题解
    牛客NOIP暑期七天营-TG1 赛后题解
  • 原文地址:https://www.cnblogs.com/fifiyong/p/ajax.html
Copyright © 2011-2022 走看看