• 传统的web站使用一个网页表单，向服务器GET或者POST数据。用户需要等待服务器的响应，并且需要加载页面

• 而Ajax技术会利用ajax对象通过使用HTTP协议，向服务器进行请求，并得到来自服务器的响应，但是不加载页面。用户可以停在同一页面，用户不会注意到脚本在后台请求过页面或者向服务器发送过数据

一、JavaScript下的Ajax

复习：在JS中利用没有定义的变量时会弹出错误，而利用没有定义的属性时则会提示undifined

1、创建Ajax对象

// 创建xhr对象
if( typeof XMLHttpRequest != 'undefined' ){
    var oXhr =  new XMLHttpRequest();
}else if(typeof ActiveXObject != 'undefined'){
    //低版本的浏览器
    var oXhr =  new ActiveXObject('Microsoft.XMLHTTP');
}else{
    throw new Error('不支持ajax')
}

2、准备请求方法和请求地址

GET方法请求：

/*
 * 第一个方法：open(参数1，参数2，参数3)
 * 参数1：要发送请求的类型
 * 参数2：请求的url
 * 参数3：是否异步发送请求的布尔值
 */

oXhr.open('get','handle.php?name=jack',true); //调用open方法并不会正真发送请求，而只是启动一个请求以备发送

POST方法请求：

var postStr = "username=jack&password=123";
oXhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

setRequestHeader()方法的一个常用用途是使用POST请求时，将Content-Type的头部信息设置为表单提交的内容类型

3、发送请求

oXhr.send();
//post
oXhr.send(postStr);

4、处理响应

接收状态值（readyState）：

• 0 （未初始化）还没有调用open（）方法；
• 1 （载入）已调用send（）方法，正在发送请求；
• 2 （载入完成）send（）方法完成，已收到全部相应内容；
• 3 （解析）正在解析相应内容；
• 4 （完成）相应内容解析完成，可以在客户端调用了；

# http状态码（status）：最常见的为200，表示读取成功；
# onreadystatechange: 表示返回状态；
# responseText: 读取的文件内容

oXhr.onreadystatechange = function(){
    console.log(oXhr.readyState);
    if( oXhr.readyState == 4 ){
        if( oXhr.status == 200 ){
            console.log('success:'+oXhr.responseText);
        }else{
            console.log('fail:'+oXhr.responseText);
        }
    }else{
        console.log('依旧在取经的路上');
    }
}

demo.php

var xhr = function(){
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    }else{
        return new ActiveObject('Micrsorf.XMLHttp');
    }
}();
console.log(xhr.readyState);

xhr.onreadystatechange = function(){
    switch(xhr.readyState){
        case 0 : 
            console.log(0,'未初始化....');
            break;
        case 1 : 
            console.log(1,'请求参数已准备，尚未发送请求...');
            break;
        case 2 : 
            console.log(2,'已经发送请求,尚未接收响应');
            break;
        case 3 : 
            console.log(3,'正在接受部分响应.....');
            break;
        case 4 : 
            console.log(4,'响应全部接受完毕');
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                document.write(xhr.responseText);
            }else{
                document.write('error:' + xhr.status);
            }
            break;
    }
}
xhr.open('get','handle.php?name=jack');
xhr.send(null);

Json数据返回处理

if( isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' ){

    header('content-type:application/json;charset=utf8');
    $arr = [
        ['keyword'=>'php'],
        ['keyword'=>'mysql'],
        ['keyword'=>'linux'],
        ['keyword'=>'apache']
    ];
    exit(json_encode(['status'=>1,'data'=>$arr]));
}else{
    var_dump($_SERVER['HTTP_X_REQUESTED_WITH']);
}