原生JS中Ajax的使用方法

一、Ajax对象（3个方法5个属性）

1、创建Ajax对象

如果想使用Ajax必须有一个前提：首先要创建一个Ajax对象，但是由于Ajax属于客户端语言，所以其在不同浏览器下创建的方式也是不同的：

基于IE内核的浏览器（低于IE8以下版本的IE浏览器）

var Ajax对象 = new ActiveXObject('Microsoft.XMLHTTP');

基于W3C内核的浏览器（火狐、谷歌、Opera、高版本（IE8以上版本）的IE浏览器）

var Ajax对象 = new XMLHtttpRequest();

2、解决兼容性问题

在IE内核的浏览器下可以通过window.navigator.userAgent.indexOf('MSIE') > 0来识别是否为IE浏览器，但是在新版本中此功能会导致无法创建Ajax对象。

使用jQuery源代码中的封装方式解决兼容性问题：

//封装一个函数，用于解决ajax对象兼容性问题
function createXhr() {
    try {
        //在W3C浏览器下创建Ajax对象
        return new XMLHttpRequest();
    } catch(e) {
        
    }
    try {
        //在IE浏览器下创建Ajax对象
        return new ActiveXObject('Microsoft.XMLHTTP');
    } catch(e) {
        
    }
    alert('您的浏览器不支持Ajax对象，丢了吧！');
}

3、Ajax对象下常用的方法

方法名称	方法说明
open(method,url)	初始化Ajax对象（主要功能是告诉Ajax对象，向哪个页面以哪种方式发送http请求）参数说明： method：要发送的http请求类型，get或post请求 url：要请求的url地址
setRequestHeader(header,value)	设置请求头信息参数说明： header：请求头 value：请求头信息
send(content)	发送Ajax请求（主要功能是执行Ajax，让Ajax开始运转）参数说明： content：数据传输时发送的数据，content就是请求空白行的数据。如果是get请求就是null，如果是post请求，就是其传递的值

4、Ajax对象下常用的属性

属性名称	属性说明
onreadystatechange	当Ajax状态码改变时所触发的回调函数
readyState	Ajax状态码 0：表示对象已建立，但未初始化 var xhr = createXhr(); 1：表示对象已初始化，但未发送 xhr.open(‘get’,’demo01’); 2：已调用send方法进行请求 xhr.send(null); 3：正在接收数据（接收到一部分） 4：接收完成
status	Ajax响应状态码，200（正常返回），404（未找到页面），302（缓存）
statusText	响应状态文本
reponseText	如果服务器端返回文本数据，则使用responseText进行接收
responseXML	如果服务器端返回XML数据，则使用responseXML进行接收

二、Ajax中的get请求五步走

创建Ajax对象
设置回调函数（onreadystatechange）
初始化Ajax对象
发送Ajax对象
判断与执行

通过http请求向服务器发送数据并返回结果

//定义页面载入事件
window.onload = function() {
    document.getElementById('btn').onclick = function() {
        //获取文本框中的数据
        var username = document.getElementById('username').value;
        //1、创建Ajax对象
        var xhr = createXhr();
        //2、设置回调函数
        xhr.onreadystatechange = function() {
            //5、判断与执行
            if(xhr.readyState==4 && xhr.status==200) {
                alert(xhr.responseText);
            }
        }
        //3、初始化Ajax对象
        var url = 'test.php?username='+username;
        xhr.open('get',url);
        //4、发送Ajax请求
        xhr.send(null);
    }
}

三、Ajax中的post请求六步走

创建Ajax对象
设置回调函数
初始化Ajax对象
设置请求头信息
发送Ajax请求
判断与执行

通过Ajax中的post请求获取服务端数据

//页面载入事件
window.onload = function() {
    document.getElementById('btn').onclick = function() {
        //获取表单数据
        var username = document.getElementById('username').value;

        //1、创建Ajax对象
        var xhr = createXhr();
        //2、设置回调函数
        xhr.onreadystatechange = function() {
            //6、判断与执行
            if(xhr.readyState==4 && xhr.status==200) {
                alert(xhr.responseText);
            }
        }
        //3、初始化Ajax对象
        xhr.open('post','demo01.php');
        //4、设置请求头信息
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        //5、发送Ajax对象
        var content = 'username='+username;
        xhr.send(content);
    }
}