zoukankan      html  css  js  c++  java
  • 使用原生JS实现Ajax请求

    原生JS实现Ajax请求

    第一步: 获得XMLHttpRequest对象

    var ajax = new XMLHttpRequest();

    第二步: 设置状态监听函数

    ajax.onreadystatechange = function(){

    console.log(ajax.readyState);

    console.log(ajax.status);

    第五步:在监听函数中,判断readyState=4 && status=200表示请求成功

    if(ajax.readyState==4 && ajax.status==200){

    第六步: 使用responseText、responseXML接受响应数据,并使用原生JS操作DOM进行显示

      console.log(ajax.responseText);

      console.log(ajax.responseXML);  // 返回不是XML,显示null

      console.log(JSON.parse(ajax.responseText));

      console.log(eval("("+ajax.responseText+")"));

    }

    }

    第三步: open一个链接

    ajax.open("GET","h51701.json",false);  //true异步请求,false同步

    第四步: send发送一个请求。 可以发送对象和字符串,不需要传递数据发送null

    ajax.send(null);

    var ajax = new XMLHttpRequest();
    
    ajax.onreadystatechange = function(){
    
        console.log(ajax.readyState);
        console.log(ajax.status);
    
    if(ajax.readyState==4 && ajax.status==200){
      console.log(ajax.responseText);
      console.log(ajax.responseXML);// 返回不是XML,显示null
      console.log(JSON.parse(ajax.responseText));
      console.log(eval("("+ajax.responseText+")"));
        }
    }
    
    ajax.open("GET","h51701.json",false);//true异步请求,false同步
    
    ajax.send(null);
  • 相关阅读:
    SVN为什么比Git更好
    vim的高亮查找操作
    Mac利用PD虚拟机安装Centos7
    学习MapReduce的计算原理
    hadoop-HA高可用集群部署
    HDFS命令操作和高可用
    初识hadoop及伪集群部署
    初步学习nginx
    小记--------maxwell启动失败解决
    小记--------spark资源调度机制源码分析-----Schedule
  • 原文地址:https://www.cnblogs.com/suitongyu/p/7862523.html
Copyright © 2011-2022 走看看