欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

简单了解AJAX

程序员文章站 2022-03-12 15:38:28
// ajax的俩个版本: var xmlhttp; if(window.xmlHttpRequest){ xmlhttp = new xmlHttpRequest(); }else{ xmlhttp = new Activexobjext("Microsoft.xmlhttp"); } // 向服 ......

// ajax的俩个版本:

  var xmlhttp;

  if(window.xmlHttpRequest){
    xmlhttp = new xmlHttpRequest();
  }else{
    xmlhttp = new Activexobjext("Microsoft.xmlhttp");
  }

// 向服务器发送请求:
  xmlhttp.open(method,url,asyns);
  /*
    method: 请求类型(get和post)
    url: 文件在服务器上的位置
    async: 是否同步(true同步或false异步)
  */
  xmlhttp.send(string);
  /*
    string: 仅用于post请求
  */
// 实例:页面加载,获取信息
  HTML的内容:
    <body>
      <div id="box"></div>
    </body>

  JS的内容:
    $.ajax({
      type: "POST",        //请求方式
      url: "地址",           //就是JSON文件的请求路径
      dataType: "JSON",      //请求的文件类型:有text,xml.json,script.jsonp
      success:function(result){   //返回的参数是active里面所有get和set方法的参数
        addBox(result);
      }
    });
    function addBox(result){
      $.each(result,function(index,obj){
        $("#box").append("<div class='product'>"+   
        "<div><img class='img' src="+obj['url']+"/></div>"+  
        "<div class='p1 p'>"+obj['name']+"</div>"+     
        "<div class='p2 p'>"+obj['sex']+"</div>"+     
        "<div class='p3 p'>"+obj['email']+"</div>"+   
        "</div>");
      });
    }