Ajax

Ajax是AsynchronousJavaScript+XML的缩写，意思是异步实现JS网络请求。通过这一技术可以不用刷新页面就可以从服务器取得数据。

Ajax技术的核心是XMLHttpRequest对象，使用XHR对象发送异步请求过程如下：

一、使用原生js实现

1、创建XHR对象, 由于浏览器兼容问题，可以使用以下方法创建XHR对象：

  function createXHR(){
    if(typeof XMLHttpRequest!="undefined"){
      return new XMLHttpRequest();
    }else if(typeof ActiveXObject!="undefined"){
      try{
        return new ActiveXObject("MSXML2.XMLHttp");
      }catch(e){
        try{
          return new ActiveXObject("Microsoft.XMLHttp");
        }catch(e){
          throw new Error("浏览器不支持XHR")；
         }
      }
    }
  }
  var xhr=createXHR();//创建XHR对象
2、发送请求
 xhr.open("get","example.php?requestdata="+document.getElementById("keyword").value);
    // 参数一表示要发送的请求类型：可以是GET或POST
    // 参数二请求的URL
    // 参数三表示是否为异步发送请求的布尔值：true表示发送异步请求，否则同步请求！
 xhr.send();
    //如果请求类型为get，则参数可以为空，如果请求类型为post则要传入发送的数据。
3、监听readystatechange事件，获取请求响应
 xhr.onreadystatechange=function(){
   if(xhr.readyState===4){//服务器已经响应请求，客户端收到响应数据
     if(request.status==200){
        //请求成功，可通过xhr.responseText获取数据
        }else{
            //请求失败
            alert("Request was unsuccessful:"+xhr.status);
            }
    }else{
      //发生错误
    }
 }
 

        二、使用jQuery实现

1、jQuery封装了ajax()函数，发送异步请求时调用该函数并设置相应的参数

   

$ajax({
  type:"GET";
  url:"http://……example.php?requestdata="+,
  dataType:"json",
  data:{//需要向服务器发送的数据
      数据，
      数据，
      .
      .
      .
    }
  success:function(data){
            if(data.success){
              //请求成功
              //通过 data.msg获取请求数据
            }else{
              //请求失败
              //通过data.msg获取失败数据
                 }
          }，
  error:function(jqXHR){
          //发生错误
          }
});

2、jQuery load()方法从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);
URL（必须）：希望加载的URL。
data（可选）：与请求一同发送的查询字符串键值对集合。
callback（可选）：load()方法完成后所执行的函数名称。

3、$.get()方法通过HTTP GET请求从服务器上请求数据。

        $.get(url,callback);
        url(必须)：规定希望请求的URL。
        callback（可选）：请求成功后所执行的函数名。

     

        $("#search").on("click",function(){
            $.get("service.php",{name:$("#keyword").val()},function(data){
                $("#searchResult").text(data);
            });
        });

4、$.post()方法通过HTTP POST请求从服务器上请求数据。

        $.get(url,data，callback);
        url(必须)：规定希望请求的URL。
        data（可选）：连同请求发送的数据。
        callback（可选）：请求成功后所执行的函数名。

        $.post("service.php",
               {
                name:"Mike",
                number:"105",
                job:"doctor"
                },
                function(data,status){
                    alert("数据："+data+"\n状态："+status);
                });