Ajax

Ajax最早产生与2005年，Ajax表示Asynchronous JavaScript andXML（异步JavaScript和XML），但是它不是像HTML、JavaScript或CSS这样的正式的技术，而是表示一些技术的混合交互的一个术语，它使我们可以获取和显示新的内容不必载入一个新的web页面，增强用户体验，更有桌面程序的感觉。 

Ajax请求步骤

• 创建 XMLHttpRequest 对象

var xhr = null;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();//标准
}else{
    xhr = new ActiveXObject("Microsoft");//IE6
}

• 准备发送

xhr.open(method,url,async);

/*
参数一：请求方式（get获取数据；post提交数据）
参数二：请求地址
参数三：同步或者异步标志位，默认是true表示异步，false表示同步
/*

/*
如果是get请求那么请求参数必须在url中传递
encodeURI()用来对中文参数进行编码，防止乱码
*/
var param = 'username='+uname+'&password='+pw;
xhr.open('get','03get.php?'+encodeURI(param),true);

/*
post请求参数通过send传递，不需要通过encodeURI()转码
必须设置请求头信息
*/
var param = 'username='+uname+'&password='+pw;
xhr.open('post','04post.php',false);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

• 执行发送动作

xhr.send(null);//get请求这里需要添加null参数

xhr.send(param);//post请求参数在这里传递，并且不需要转码

• 指定回调函数

// 该函数调用的条件就是readyState状态发生变化（不包括从0变为1）
xhr.onreadystatechange = function(){
    /*
    readyState:
    2 浏览器已经收到了服务器响应的数据
    3 正在解析数据
    4 数据已经解析完成，可以使用了
    */

    if(xhr.readyState == 4){    
    // 4表示服务器返回的数据已经可以使用了，但是这个数据不一定是正常的
        if(xhr.status == 200){    
        // 200表示服务器返回的数据是正常的，不是200的话表示数据是错误的 200表示响应成功 404    
           没有找到请求的资源 500服务器端错误
            alert(xhr.responseText);
        }
    }
}

响应数据格式

• xml
• json
• responseXML
• responseText

原理

单线程+事件队列机制

例子

• 定时函数

setTimeout()

setInterval()

• 事件函数

btn.οnclick=function(){}

• Ajax回调函数

xhr.onreadystatechange = function()