ajax

原生Ajax实现步骤

1. 定义函数，通过函数异步获取信息

   function Ajax(){
       //...
   }

    

2. 声明空对象装入XMLHttpRequest对象

   var xmlHttpReq = null;

    

3. 给XMLHttpRequest对象赋值

   if(window.ActiveXObject){   //IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest对象的
       xmlHttpReg = new Active XObject("Microsoft.XMLHTTP");
   }
   else if(window.XMLHttpRequest){  //XMLHttpRequest是window的子对象
       xmlHttpReq = new XMLHttpRequest();    //实例化一个XMLHttpRequest对象
   }

    

4. open()方法初始化XMLHttpRequest对象

   xmlHttpReq.open("GET","test.php",true);    //调用open()方法并采用异步方式

    

5. 注册一个XMLHttpRequest对象将调用的回调事件处理器当它的readyState值改变时调用

   xmlHttpReq.onreadystatechange = RequestCallBack; //设置回调函数

    

6. 使用send()方法发送该请求

xmlHttpReq.send(null);  //因为使用get方法提交，所以使用null作为参数调用

请求状态改变时，XMLHttpRequest对象调用onreadychange属性注册的事件处理器，在事件响应之前，事件处理器应该首先检查readyState的值和HTTP状态。

function RequestCallBack(){
    if(xmlHttpReq.readyState==4){
        if(xmlHttpReq.status==200){
            //将xmlHttpReq.responseText的值赋给id为resText的元素
            document.getElementById("resText").innerHTML = xmlHTTP Req.responseText;
        }
    }
}

 

jQuery中的Ajax

jQuery对Ajax进行了封装，第一层是$.ajax()方法，第二层是load(),$.get()和$.post()方法，第三层是$.getJSON()方法。

load()方法

• 载入HTML文档

  load(url [,data] [,callback])
  /*
   *load()方法能载入远程HTML代码并插入DOM中
   *url:请求HTML页面的URL地址
   *data(可选):发送至服务器的key/value数据
   *callback(可选):请求完成时的回调函数
   */
  
  $(function(){
      $("#send").click(function(){
          $("#resText").load("test.html");
      });
  })

• 筛选载入的HTML文档

  //加载页面中指定元素
  $("#resText").load("test.html" .para);

• 传递方式

  //无参数传递，GET方式
  $("#resText").load("test.php",function(){
      //..
  });
  
  //有参数传递，POST方式
  $("#resText").load("test.php",{name:"rain",age:"22"},function(){
      //..
  });

• 回调参数

  $("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){
      //responseText: 请求返回的内容
      //textStatu: 请求状态：success/error/notmodified/timeout 4种
      //XMLHttpRequest: XMLHttpRequest对象
  });

  注：在load()方法中，无论Ajax请求是否成功，只要当请求完成后，回调函数就会被触发。load通常从服务器获取静态的数据文件。

---

$.get()方法和$.post()方法

$.get()和$.post()方法是jQuery中的全局函数

• $.get()方法

  $.get(url [,data] [,callback] [,type])
  //type: 服务器端返回内容的格式
  

  //HTML片段
  $(function(){
      $("#send").click(function(){
          $.get("get1.php",{        //确定请求页面的URL
              username:$("#username").val(),  //获取值作为data参数传递给后台
              content:$("#content").val()
          },function(data,textStatus){  //get 方法的回调函数只有两个参数（返回内容，请求状态）
              $("resText").html(data); //将返回的数据添加到页面上
          });
      });
  })

  //XML文档
  $(function(){
      $("#send").click(function(){
          $.get("get1.php",{        //确定请求页面的URL
              username:$("#username").val(),  //获取值作为data参数传递给后台
              content:$("#content").val()
          },function(data,textStatus){  //get 方法的回调函数只有两个参数（返回内容，请求状态）
              var username = $(data).find("comment").attr("username");
              var content = $(data).find("comment content").text();
              var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
              $("#resText").html(txtHtml);    //将返回的数据添加到页面上
          });
      });
  })
  
  //由于要求服务器端返回的数据格式是XML文档，因此需要在服务器端设置Content-Type类型
  header("Content-Type:text/xml; charset=uft-8");  //php

  //JSON文件
  $(function(){
      $("#send").click(function(){
          $.get("get1.php",{        //确定请求页面的URL
              username:$("#username").val(),  //获取值作为data参数传递给后台
              content:$("#content").val()
          },function(data,textStatus){  //get 方法的回调函数只有两个参数（返回内容，请求状态）
              var username = $(data).find("comment").attr("username");
              var content = $(data).find("comment content").text();
              var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
              $("#resText").html(txtHtml);    //将返回的数据添加到页面上
          },"json");
      });
  })

  不需要程序共享数据时用HTML，重要数据用JSON，远程应用程序未知用XML

  GET请求的数据会被浏览器缓存起来，会带来严重的安全性问题

             

• $.post()方法

  $(function(){
      $("#send").click(function(){
          $.post("post.php",{
              username:$("#username").val(),
              content:$("#content").val()
          },function(data,textStatus){
              $("#resText").append(data);    //将返回数据添加到页面上
          });
      });
  })

   

---

$.getScript()方法和$.getJson()方法

• $.getScript()

  //动态加载js文件
  $(function(){
      $("#send").click(function(){
         $.getScript("test.js"); 
      });
  })

   

• $.getJson()

  //动态加载json文件
  $(function(){
      $("#send").click(function(){
         $.getJSON("test.json"); 
      });
  })

  //动态加载json文件
  $(function(){
      $("#send").click(function(){
         $.getJSON("test.js",function(data){
              $("#resText").empty();
              var html = '';
              $.each(data,function(commentIndex,comment){
                  html += '<div class="comment"><h6>'+commen['uername']+'</h6><p class="para">'+comment['content']+'</p></div>';
              });
              $('#resText').html(html);
         }); 
      });
  })

   

---

$.ajax()方法

$(function(){
    $("#send").click(function(){
        $.ajax({
            type:"GET",
            url:"test.php",
            dataType:"json",
            success:function(data){
                
            }
        })
    })
})