1. 程式人生 > >簡單了解AJAX

簡單了解AJAX

active else window product set function img pro pen

// 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