Ajax的多种实现方法

Ajax:异步的javaScript 和 xml
作用：
1、异步：客户端不必等待服务器的响应，在期间能做其他操作，提升用户体验
2、Ajax是一种无需重新加载整个网页的情况下，可以更新部分网页的技术

Jquery实现
方法一：

        $.ajax({
            url:"/ajaxServlet",//请求路径
            type:"post",//请求方式
            data:"username=coco&age=12",//请求参数	
            success:function(obj){ //请求成功 执行方法
            //obj 表示 接收 服务器回写的内容
        },error:function(){//请求失败 执行方法
        },
        dataType:"json" //服务器响应的数据格式
    })

方法二：

 //使用$.get()提交请求
 语法：
 		$.get(url, [data], [callback], [type])
实例：
        $.get("/ajaxServlet","username=coco",function (obj) {

        },"text")

      

方法三：

  //使用$.post()提交请求
 语法：
 		$.post(url, [data], [callback], [type])
实例：
        $.post("/ajaxServlet","username=coco",function (obj) {

        },"text")

注：
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default

js原生实现：

var Ajax={
  get: function(url, fn) {
    var xhr = new XMLHttpRequest();     // XMLHttpRequest对象用于在后台与服务器交换数据           
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
    
      // readyState == 4说明请求已完成
      if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { 
      
        // 从服务器获得数据 
        fn.call(this, xhr.responseText);  
      }
    };
    xhr.send();
  },
  // datat应为'a=a1&b=b1'这种字符串格式，在js里如果data为对象会自动将对象转成这种字符串格式
  post: function (url, data, fn) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    // 添加http头，发送信息至服务器时内容编码类型
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        fn.call(this, xhr.responseText);
      }
    };
    xhr.send(data);
  }
}