书城7 - 原生 Ajax 发送异步请求

原生Ajax - Asynchronous Jsp and Xml

发送异步请求

  • 创建 XMLHttpRequest 对象

    • var xmlHttpRequest ;
      
      function createXMLHttpRequest(){
          if(window.XMLHttpRequest){
              //符合DOM2标准的浏览器 ,xmlHttpRequest的创建方式
              xmlHttpRequest = new XMLHttpRequest() ;
          }else if(window.ActiveXObject){//IE浏览器
              try{
                  xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
              }catch (e) {
                  xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP")
              }
          }
      }
      
  • 调用 XMLHttpRequest 对象的 open + send 方法发送请求

    • function ckUname(uname){
          createXMLHttpRequest();
          var url = "user.do?operate=ckUname&uname="+uname ;
          xmlHttpRequest.open("GET",url,true);
          //设置回调函数
          xmlHttpRequest.onreadystatechange = ckUnameCB ;
          //发送请求
          xmlHttpRequest.send();
      }
      
  • ckUnameCB 回调函数,通过状态码以及服务器响应内容,在页面上给出相应信息

    • function ckUnameCB(){
          if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
              //xmlHttpRequest.responseText 表示 服务器端响应给我的文本内容
              //alert(xmlHttpRequest.responseText);
              var responseText = xmlHttpRequest.responseText ;
              // {'uname':'1'}
              //alert(responseText);
              if(responseText=="{'uname':'1'}"){
                  alert("用户名已经被注册!");
              }else{
                  alert("用户名可以注册!");
              }
          }
      }
      
    • 只对 .readyState==4 进行操作,同时,状态码 .status==200 表示解析成功

    • 0 未初始化,没有调用 send() 方法

    • 1 载入中,已调用 send() 方法,正在发送请求

    • 2 载入完成,send() 方法执行完成,已经接受到所有响应内容

    • 3 交互,正在解析内容、

    • 4 完成,响应内容解析完成,可以在客户端调用

posted @   LaViez  阅读(23)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
点击右上角即可分享
微信分享提示