一、AJAX简介
1、背景介绍：
2005年 Jesse James Garrett 发表了一篇文章，标题为：“Ajax：A new Approach to Web Applications”。他在这篇文章里介绍了一种技术，用 他的话说，就叫：Ajax，是 Asynchronous JavaScript AND XML 的简写。 这种技术能够向服务器请求额外的数据而无须卸载页面(即刷新)，会带来更 好的用户体验。一时间，席卷全球。
2、什么是AJAX：
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
（from：百度百科）
简而言之：AJAX为异步无刷新技术。能够请求后台发送和获取数据，而无需卸载页面（刷新页面）。
二、XMLHttpRequest
1、XMLHttpRequest对象
* XMLHttpRequest对象是AJAX的核心对象：
XHR提供了向服务器发送请求和解析服务器响应提供了流畅的接口。 能够以异步方式从服务器获取更多的信息，这就意味着，用户只要触发某一事件， 在不刷新网页的情况下，更新服务器最新的数据。 虽然 Ajax 中的 x 代表的是 XML，但 Ajax 通信和数据格式无关，也就是说这 种技术不一定使用 XML。
使用 XHR 对象
var xhr = new XMLHttpRequest()
在使用 XHR 对象时，先必须调用 open()方法，它接受三个参数：要发送的请求类型(get、post)、请求的 URL 和表示是否异步。open()方法并不会真正发送请求，而只是启动一个请求以备发送。
通过 send()方法进行发送请求，send()方法接受一个参数，作为请求主体发送的数据。如果不需要则，必须填 null。执行 send()方法之后，请求就会发送到服务器上。
* 响应数据属性和说明
当请求发送到服务器端，收到响应后，响应的数据会自动填充 XHR 对象的属 性。那么一共有四个属性：

属性名                  说明 
responseText       作为响应主体被返回的文本 
responseXML       如果响应主体内容类型是"text/xml"或"application/xml"， 
                             则返回包含响应数据的 XML DOM 文档 status 响应的 HTTP 状态 
statusText            HTTP 状态的说明 

    *  HTTP状态码

接受响应之后，第一步检查 status 属性，以确定响应已经成功返回。一般 情况 HTTP 状态代码为 200 作为成功的标志。除了成功的状态代码，还有一些别 的：

HTTP状态码  状态字符串                说明 
200                OK                             服务器成功返回了页面 
400                Bad Request              语法错误导致服务器不识别 
401                Unauthorized             请求需要用户认证 
404                Not found                    指定的 URL 在服务器上找不到 
500                Internal Server Error   服务器遇到意外错误，无法完成请求 
503                ServiceUnavailable     服务器过载或维护导致无法完成请求 

注意：我们判断 HTTP 状态值即可，不建议使用 HTTP 状态说明，因为在跨浏览器 的时候，可能会不太一致。
2、发送的请求的步骤：

1、得到XMLHttpRequest对象
    new XMLHttpRequest()
2、准备请求   open(请求类型GET/POST,请求的URL,是否异步)  
    xhr.open(请求类型GET/POST,请求的URL,是否异步);
3、发送请求   send([参数]) 
    xhr.send([参数])
注：如果是GET请求，请求的参数设置在url的后面，所以send(null)
    如果是POST请求，无参数设置为null，有参数则设置参数即可
4、判断响应状态，得到后台响应
    xhr.responseText;   

三、GET 与 POST
在提供服务器请求的过程中，有两种方式，分别是：GET 和 POST。在 Ajax 使用 的过程中，GET 的使用频率要比 POST 高。
1、GET请求
GET 请求是最常见的请求类型，最常用于向服务器查询某些信息。必要时， 可以将查询字符串参数追加到 URL 的末尾，以便提交给服务器。

xhr.open('get','diner/login?'+'name=Lee&age=100',true); 

通过 URL 后的问号给服务器传递键值对数据，服务器接收到返回响应数据。 特殊字符传参产生的问题可以使用 encodeURIComponent()进行编码处理，中 文字符的返回及传参，可以将页面保存和设置为 utf-8 格式即可，AJAX 返回的 数据为 UTF-8。
* 同步调用

/*
AJAX同步
*/
//获取XHR对象
var xhr=new XMLHttpRequest();
//准备请求
xhr.open("GET", "js/data.json", false);
//发送请求
xhr.send(null);
//判断状态，并得到后台响应responseText
if(xhr.status==200){
    console.log(xhr.responseText);
}else{
    alert("状态码："+xhr.status+"错误信息："+xhr.responseText);
}

    *  异步调用

同步调用固然简单，但使用异步调用才是我们真正常用的手段。
使用异步调的时候，检测readyState 属性,每当 readyState 属性改变时，
触发readystatechange 事件。
这个属性有五个值：
值           状态      说明
0           未初始化    尚未调用 open()方法
1           启动      已经调用 open()方法，但尚未调用 send()方法
2           发送      已经调用 send()方法，但尚未接受响应
3           接受      已经接受到部分响应数据
4           完成      已经接受到全部响应数据，而且可以使用

  //获取XMLHttpRequest对象
        var xhr =new XMLHttpRequest();
        //开启请求:请求类型，请求地址，同步异步
        xhr.open("GET", "js/data.json", true);
        //发送参数，post有参数则设置
        xhr.send(null);
        //判断状态，接受结果
        //需要判断readystate 因为异步模式不能保证已经执行完毕
        console.log(1);
         // 使用异步调用的时候，检测 readyState 属性,每当 readyState 
         //属性改变时，触 发 readystatechange事
        xhr.onreadystatechange=function(){
        if(xhr.readyState==4){          
            if(xhr.status==200){
                console.log(xhr.responseText);
            }else{
                console.log("状态码:"+xhr.status+"错误信息"+xhr.responseText+"readyState："+xhr.readyState);
            }
        }
        console.log(2);
        }

2、POST请求
POST 请求可以包含非常多的数据，我们在使用表单提交的时候，很多就是 使用的 POST 传输方式。

 xhr.open('post', 'diner/login', true); 

而发送 POST 请求的数据，不会跟在 URL 的尾巴上，而是通过 send()方法 向服务器提交数据。

xhr.send('name=Lee&age=100'); 

一般来说，向服务器发送 POST 请求由于解析机制的原因，需要进行特别的 处理。因为POST请求和Web表单提交是不同的，需要使用XHR来模仿表单提交。

 xhr.setRequestHeader('Content-Type','application/x-www-form-urle ncoded');

从性能上来讲 POST 请求比 GET 请求消耗更多一些，用相同数据比较，GET 最多比 POST 快两倍。
* 说明：

 post 请求，需要有服务器，暂时使用 tomcat 
     将 tomcat 压缩包在某个盘下解压 
     将存放了 json 文件的项目放入 webapps 文件夹下 
     在 bin 目录下，打开 startup.bat，启动服务

    *  同步

<script type="text/javascript">
    //同步模式下 post方式
    //获取XMLHttpRequest对象
    var request=new XMLHttpRequest();
    //开启请求
    request.open("POST", "js/data.json", false)
    //模拟表单提交
    request.setRequestHeader('Content-Type','application/x-www-form-urle ncoded'); 
    //准备请求
    request.send(null);
    //判断响应状态
    if(request.status==200){
        console.log(request.responseText)
    }else{
        console.log(request.status+"--"+request.responseText);
    }   
</script>

    *  异步

<script type="text/javascript">
    //获取对象
    var request=new XMLHttpRequest();
    //准备请求
    request.open("POST", "js/data.json", true);
    //模拟表单提交
    request.setRequestHeader('Content-Type','application/x-www-form-urle ncoded'); 
    //发送请求
    request.send(null);
    //判断状态和结果
    request.onreadystatechange=function(){
        if(request.readyState==4){
            if(request.status==200){
                console.log(request.responseText);
            }else{
                console.log(request.status+"--"+request.responseText);
            }
        };
    };
</script>

四、封装 Ajax

因为 Ajax 使用起来比较麻烦，主要就是参数问题，比如到底使用 GET 还是 POST；我们需要封装一个 Ajax 函数，来方便我们调用。

调用者：
    请求类型    GET/POST
    请求路径
    请求参数
    是否异步
    
封装Ajax
    1、得到XMLHttpRequest对象
        new XMLHttpRequest()
    2、打开请求   open(请求类型GET/POST,请求的URL,是否异步)  注：三个参数都是由调用者传递
        注：判断如果是POST请求，请求路径直接设置即可；如果是GET请求，需要拼接请求参数；
    3、发送请求   send([参数]) 
    xhr.send([参数])
        注：如果是GET请求，请求的参数设置在url的后面，所以send(null)
        如果是POST请求，无参数设置为null，有参数则设置参数即可
    4、判断响应状态，得到后台响应
        xhr.responseText;
        注：判断是否是异步请求，如果是同步则直接获取响应数据；
              如果是异步，则需要先判断数据是否完全响应（readyState==4），
              再获取响应数据

<script type="text/javascript">
/*
 * 格式化参数
 obj{
    type:
    url:
    async:
    data:{      
    }
    success:function(){     
    }
    error:function(){       
    }
}
 */
    var user={
        "type":"post",
        "url":"js/data.json",
        "async":"true",
        data:{              
        },
        success:function(result){
            console.log(result);
        },
        error:function(result){
            alert(result);
        }
    }   
    console.log(convertData(user));
    ajax(user);
    //AJAX封装
    function ajax(obj){
        // 1、得到XMLHttpRequest对象
        var xhr = new XMLHttpRequest();     
        // 2、准备请求   open(请求类型GET/POST,请求的URL,是否异步)  
        //判断同步还是异步
        console.log(obj.type);
        if(obj.type.toUpperCase()=="GET"){
            obj.url+=obj.url.indexOf("?")>-1?"&":"?"+convertData(obj.data);     //自定义数据格式化函数    
        }
        xhr.open(obj.type,obj.url,obj.async); 
        // 3、发送请求    send(参数) 
        //xhr.send("uname=zhangsan&upwd=123456"); // Post请求有参数，则设置
        if(obj.type.toUpperCase()=="GET"){
            xhr.send(null);
        }else{
            // 模拟表单提交
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.send(obj.data);         
        }
        // 4、判断响应状态，得到后台响应得到后台响应  xhr.responseText;
        // 如果是异步请求，需要先知道数据是否完全响应
        // 监听readyState的值的变化
        if(obj.async){
            xhr.onreadystatechange = function() {
                console.log(xhr.readyState);
                // 判断是否完全响应，即readyState的值等于4
                if (xhr.readyState == 4) {
                    getStatus();
                }
            }
        }else{
            getStatus();
        }
        //自定义返回函数
        function getStatus(){
            if (xhr.status == 200) {
                //console.log(xhr.responseText);
                obj.success(xhr.responseText);
            } else {
                obj.success("状态码：" + xhr.status + "-----错误信息：" + xhr.responseText);
                //alert("状态码：" + xhr.status + "-----错误信息：" + xhr.responseText);
            }
        }
    }
    //将json对象格式数据转换为字符串-->"key1=value1&key2=value2&.."
    function convertData(data){
        //定义存储数据数组
        var arr=[];
        for(var key in data){
            arr.push(key+"="+data[key]);
        }
        return arr.join("&")        
    }

</script>   

五、Jquery 的 ajax

data.json文件中内容：//js/data.json路径下
{
    "uname":"zhangsan",
    "upwd":"123456",
    "uage":18,
    "usex":true
}

1.$.ajax()

jquery 调用 ajax 方法：
            格式：$.ajax({});
            参数：
                type：请求方式 GET/POST
                url：请求地址 url
                async：是否异步，默认是 true 表示异步
                data：发送到服务器的数据
                dataType：预期服务器返回的数据类型
                contentType：设置请求头
                success：请求成功时调用此函数
                error：请求失败时调用此函数
$.ajax({
        type:"get",
        url:"js/data.json",
        data:{
            
        },
        dataType:"json", // 预期返回的数据的类型
        success:function(data){
            console.log(data);
        }
    });    

2.$.get()

GET请求
        1.请求 json 文件，忽略返回值
            $.get('../js/cuisine_area.json');
        2.请求 json 文件，传递参数，忽略返回值
            $.get('../js/cuisine_area.json',{name:"tom",age:100});
        3.请求 json 文件,拿到返回值,请求成功后可拿到返回值
            $.get('../js/cuisine_area.json',function(data){
                console.log(data)
            });
        4.请求 json 文件,传递参数,拿到返回值
            $.get('../js/cuisine_area.json',{name:"tom",age:100},function(data){
                console.log(data)
            });
   
$.get("js/data.json",{name:"jerry",age:"25"},function(data){
        console.log(data);
    });   

3.$.post()

post请求
        1.请求 json 文件，忽略返回值
            $.post('../js/cuisine_area.json');
        2.请求 json 文件，传递参数，忽略返回值
            $.post('../js/cuisine_area.json',{name:"tom",age:100});
        3.请求 json 文件,拿到返回值,请求成功后可拿到返回值
            $.post('../js/cuisine_area.json',function(data){
                console.log(data)
            });
        4.请求 json 文件,传递参数,拿到返回值
            $.post('../js/cuisine_area.json',{name:"tom",age:100},function(data){
                console.log(data)
            });
    $.post("js/data.json",{name:"tom"},function(data){
        alert(data);
    });   

4.$.getJSON()

表示请求返回的数据类型是 JSON 格式的 ajax 请求 

$.getJSON("js/data.json",{},function(data){
        alert(data);
        console.log(data.upwd+"--"+data.uname);
    });
    
    $.getJSON("js/data.json",function(data){
        console.log(data);
    });
    $.getJSON("js/data.json");

5.jsonp

远程跨域时，如果有两个域名，从其中一个域名去访问另一个域名时，使用
        普通的 ajax 方法是获取不到数据的，那么就可以使用 jsonp 方式发送请求。
        添加属性：
        // jsonp:’callback’
        dataType:’jsonp’
        
        注：访问的远程路径支持跨域
  $.ajax({
        type:"get",
        url:"http://iservice.itshsxt.com/restaurant/find",
        data:{
            cuisine:"Bar"
        },
        jsonp:"callback",
        dataType:"jsonp", // 跨域处理
        success:function(data){
            console.log(data);
        }
    });