码迷,mamicode.com
首页 > Web开发 > 详细

简单了解AJAX

时间:2018-03-23 15:25:50      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:简单   获取信息   请求方式   版本   style   地址   htm   function   rip   

// 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>");
      });
    }

简单了解AJAX

标签:简单   获取信息   请求方式   版本   style   地址   htm   function   rip   

原文地址:https://www.cnblogs.com/acmyun/p/8630147.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!