zoukankan      html  css  js  c++  java
  • js基础之ajax

    必须搞懂的几个问题:

    1.如何创建ajax对象?

    2.如何连接服务器?

    3.如何发送请求?

    4.监控请求状态的事件是什么?分几个阶段?如何获取返回值?

    答:onreadystatechange事件:一、readyState属性(请求状态:0——>未初始化;1——>载入,已经调用send()方法;2——>载入完成,已收到相应内容;3——>正在解析内容;4——>完成);二、status属性(请求结果);三、responseText属性(取得结果)

    一、读取服务器端文件

    function ajax(url, fnSucc, fnFaild){
      //1.创建Ajax对象
      var oAjax=null;

      if(window.XMLHttpRequest){
        oAjax=new XMLHttpRequest();
      }else{
        oAjax=new ActiveXObject("Microsoft.XMLHTTP");
      }
      //2.连接服务器
      oAjax.open('GET', url, true);
      //3.发送请求
      oAjax.send();
      //4.接收服务器的返回
      oAjax.onreadystatechange=function (){
        if(oAjax.readyState==4) //完成
        {
          if(oAjax.status==200) //成功
          {
            fnSucc(oAjax.responseText);
          }else{
            if(fnFaild)
            fnFaild(oAjax.status);
          }
        }
      };
    }
    window.onload=function(){
    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function(){
      ajax('abc.txt?t='+Math.random(),function(str){
      //alert(str);//'[1,2,3]'
      //alert(eval(str)[0]);//1,eval可以解析任何js代码,比如把'[1,2,3]'解析成数组
      var arr=eval(str);
      alert(arr[0].rank);//把json文件解析成数组
      });
    }
    }

    二、分页

    var oUl = document.getElementById('ul1');
    var oBtn=document.getElementById('btn1');
    var aBtn=document.getElementsByClassName('a');
    var i=0;

    for(i=0;i<aBtn.length;i++){
      aBtn[i].index=i;//设置索引
      aBtn[i].onclick=function(){
        ajax('p'+(this.index+1)+'.txt',function(str){
          var aData=eval(str);

          oUl.innerHTML='';//循环前清空ul内的内容,否则会累加显示
          for(i=0;i<aData.length;i++){
            var oLi=document.createElement('li');
            oLi.innerHTML='<b>'+aData[i].name+'</b><i>'+aData[i].rank+'</i>';
            oUl.appendChild(oLi);
          }
        });
      }
    }

    三、编写自己的ajax库

    function ajax(url, fnSucc, fnFaild){
      //1.创建Ajax对象
      var oAjax=null;

      if(window.XMLHttpRequest){
        oAjax=new XMLHttpRequest();
      }else{
        oAjax=new ActiveXObject("Microsoft.XMLHTTP");
      }
      //2.连接服务器
      oAjax.open('GET', url, true);
      //3.发送请求
      oAjax.send();
      //4.接收服务器的返回
      oAjax.onreadystatechange=function (){
        if(oAjax.readyState==4) //完成
        {
          if(oAjax.status==200) //成功
          {
            fnSucc(oAjax.responseText);
          }else{
            if(fnFaild)
            fnFaild(oAjax.status);
          }
        }
      };
    }


    作者:狂流
    出处:http://www.cnblogs.com/kuangliu/
    欢迎转载,分享快乐! 如果觉得这篇文章对你有用,请抖抖小手,推荐一下!

  • 相关阅读:
    ThinkPHP6.0.5 验证码 遇到的坑 (验证失败)
    css已知宽高和未知宽高的居中定位
    有关CLR的初学小整理(可能理解不深刻,望大牛指出)
    关于CRC循环冗余校验的总结(C#)
    lesson 4 再谈继承多态,抽象类和接口
    Lesson 3
    Lesson 2
    lesson 1
    08_Spring实现action调用service,service调用dao的过程
    07_配置文件中决定接口的实现类
  • 原文地址:https://www.cnblogs.com/kuangliu/p/3478850.html
Copyright © 2011-2022 走看看