创建ajax过程

最新推荐文章于 2022-11-19 20:29:01 发布

hlinghoney

最新推荐文章于 2022-11-19 20:29:01 发布

阅读量8.8k

点赞数 4

分类专栏： web前端开发文章标签： xmlhttprequest dom ajax

本文链接：https://blog.csdn.net/hlinghling/article/details/52624757

版权

web前端开发专栏收录该内容

35 篇文章 0 订阅

订阅专栏

AJAX=异步JavaScript+XML；
ajax是一种无需重新加载整个网页情况下能够更新部分网页的技术。

简单描述：

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

创建ajax详细过程：

step1. 创建XMLHttpRequest对象，也就是创建一个异步调用对象；
step2. 创建一个新的HTTP请求，并指定改HTTP请求的方法、URL以及验证信息；
step3. 设置响应HTTP状态变化的函数；
step4. 发送HTTP请求；
step5. 获取异步调用返回的数据；
step6. 使用javascript和DOM实现局部刷新；

重要代码实现：

<script>
  var xmlhttp;

  function createXMLHttpRequest(){
    xmlhttp=null;

    if (window.XMLHttpRequest){
      xmlhttp=new xmlHttpRequest(); //Netscape浏览器中的创建方式
    }else if(window.ActiveXObject){
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器的创建方式
    }

    //异步调用服务器段数据
    if(xmlhttp!=null){
      xmlhttp.open("GET/POST",url,true);  //创建HTTP请求
      xmlhttp.onreadystatechange=httpStateChange;//设置HTTP请求状态变化的函数
      xmlhttp.send(null);  //发送请求
    }else{
      alert("不支持XHR")
    }
  }

   //响应HTTP请求状态变化的函数
  function httpStateChange(){//判断异步调用是否完成
    if(xmlhttp.readyState==4){//readyState==4表示后台处理完成了
      if(xmlhttp.status==200||(xmlhttp.status==0){//状态码为0是本地响应成果，200表示处理的结果是ok的
      //判断异步调用是否成功,如果成功开始局部更新数据
        //code...
      }else{
        alert("出错状态码："+xmlhttp.status+"出错信息："+xmlhttp.statusText);
      }
    }
  }
</script>

ajax例子：

<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>AJAX实例</title>
    <script language="javascript" type="text/javascript">    

     var xmlHttpRequest;  //定义一个变量用于存放XMLHttpRequest对象
      //定义一个用于创建XMLHttpRequest对象的函数
      function createXMLHttpRequest(){
        if(window.ActiveXObject){//IE浏览器的创建方式
          xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }else if(window.XMLHttpRequest){ //Netscape浏览器中的创建方式
          xmlHttpRequest = new XMLHttpRequest();
        }
      }

      //响应HTTP请求状态变化的函数
      function httpStateChange(){//判断异步调用是否完成
        if(xmlHttpRequest.readyState == 4){
          //判断异步调用是否成功,如果成功开始局部更新数据
          if(xmlHttpRequest.status == 200||xmlHttpRequest.status == 0){//查找节点
            var node = document.getElementById("myDIv");//更新数据
            node.firstChild.nodeValue = xmlHttpRequest .responseText;
          } else{
          //如果异步调用未成功,弹出警告框,并显示出错信息
            alert("异步调用出错/n返回的HTTP状态码为:"+xmlHttpRequest.status + "/n返回的HTTP状态信息为:" + xmlHttpRequest.statusText);
          }
        }
      }
      //异步调用服务器段数据
      function getData(name,value){//创建XMLHttpRequest对象
        createXMLHttpRequest();
        if(xmlHttpRequest!=null){
          //创建HTTP请求
          xmlHttpRequest.open("get","ajax.text",true)
          //设置HTTP请求状态变化的函数
          xmlHttpRequest.onreadystatechange = httpStateChange;
          //发送请求
          xmlHttpRequest.send(null);
        }
      }

    </script>

  </head>
  <body>
  <div id="myDiv">原数据</div>

  <input type = "button" value = "更新数据" onclick = "getData()">

  </body>
</html>

hlinghoney

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
创建ajax过程

AJAX=异步JavaScript+XML； ajax是一种无需重新加载整个网页情况下能够更新部分网页的技术。简单描述： Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。创建ajax详细过程：step1. 创建XMLHttpRequest对象，也就是创建一个异步调用对象； step2.
复制链接

扫一扫