Ajax用法详解

前言

学习Ajax，今天在这里记录一下

---

一、Ajax是什么？

Ajax 是与服务器交换数据并更新部分网页的艺术，它不重新加载整个页面。 ajax 是异步的 javascript和 xml(数据传输格式)，是异步的 javascript 和 数据传输

什么是同步异步：
同步 阻塞，当前程序运行，必须等前一个程序运行完毕以后，才能运行。
异步 非阻塞，当前程序运行，和前面程序的运行没有任何关系。

说到这里介绍一下前后端数据传输的两种格式的特点：

xml数据传输格式（大型的门户网站  新浪、网易、凤凰网）
                优点：
                    1、种类丰富
                    2、传输量非常大
                缺点：
                    1、解析麻烦
                    2、不太适合轻量级数据

json数据传输格式(字符串) 95%移动端应用。
                优点：
                    1、轻量级数据
                    2、解析比较轻松
                缺点：
                    1、数据种类比较少
                    2、传输数据量比较小

二、使用步骤

1.创建一个异步对象。 注意：XMLHttpRequest IE8以下不兼容，IE8以下声明ajax的方法是ActiveXObject("Microsoft.XMLHTTP")

var xmlhttp = null;
if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
} else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

在IE浏览器中, 如果通过Ajax发送GET请求, 那么IE浏览器认为 同一个URL只有一个结果

2.设置请求方式和请求地址
需要先处理要传给服务器的数据对象

//判断是否有要传给服务器的数据
if (data) {
	data = querystring(data);
}
//将数据对象变为指定格式字符串
//?act=xxx&user=xxx&pass=xxx
function querystring(obj) {
    var str = "";
    for (var attr in obj) {
        str += attr + "=" + obj[attr] + "&";
    }
    //最后会多一个&符号，所以需要截取
    return str.substring(0, str.length - 1);
}
if (method == "get" && data) {
	url += "?" + data;
}

method：请求的类型；GET 或 POST

GET请求和POST请求的异同
相同点: 都是将数据提交到远程服务器
不同点:
1.提交数据存储的位置不同： GET请求会将数据放到URL后面， POST请求会将数据放到请求头中
2.提交数据大小限制不同： GET请求对数据有大小限制， POST请求对数据没有大小限制

GET/POST请求应用场景
GET请求用于提交非敏感数据和小数据
POST请求用于提交敏感数据和大数据

url：文件在服务器上的位置
async：true（异步）或 false（同步）

xmlhttp.open(method, url, async);

3.发送请求

注意：get请求和post请求有一点点的不同：
get请求：

xmlhttp.send();

post请求：

//必须在send方法之前，去设置请求的格式
xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//data为要提交给服务器的数据
xmlhttp.send(data);

4.监听状态的变化
这里需要补充两个知识点，

ajax状态码：
0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成，且响应已就绪

http 状态码
200~299：都代表本次请求成功(具体的状态码及其代表的意思可以自己去百度哦)
304：客户端已经执行了GET，但文件未变化

在ajax中有一个onreadystatechange时间用来监听ajax状态码改变的改变

//监听ajax状态码改变行为
xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) {
            //判断本次下载的状态吗是多少？
            if (xmlhttp.status >= 200 && xmlhttp.status <= 299 || xmlhttp.status == 304) {
                if (sucess) {
                    //如果成功并存在失败回调函数sucess将响应数据传给回调函数sucess
                    sucess(xmlhttp.responseText);
                }
            } else {
                if (error) {
                //如果失败并存在失败回调函数error，将响应数据传给回调函数error
                    error("error" + xmlhttp.status);
                }
            }
        }
    }

三、封装Ajax

/*不一样的元素
   method
   url
   data
   sucess
   error
   */
function ajax({ method = "get", url, data, sucess, error }) {
    //1.创建ajax对象
    var xmlhttp = null;
    try {
        xmlhttp = new XMLHttpRequest();
    } catch (error) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
	//判断是否有要提交给服务器的数据
    if (data) {
        data = querystring(data);
    }
    //判断请求类型，如果有将数据对象变为指定格式字符串
    if (method == "get" && data) {
        url += "?" + data;
    }

    xmlhttp.open(method, url, true);
    
    //判断请求类型
    if (method.toLowerCase() == "get") {
        xmlhttp.send();
    } else {
        //必须在请求前设置请求格式
        xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        xmlhttp.send(data);
    }
	//监听ajax状态码改变行为
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) {
            //判断本次下载的状态吗是多少？
            if (xmlhttp.status >= 200 && xmlhttp.status <= 299 || xmlhttp.status == 304) {
                if (sucess) {
                    //如果成功并存在失败回调函数sucess将响应数据传给回调函数sucess
                    sucess(xmlhttp.responseText);
                }
            } else {
                if (error) {
                	//如果失败并存在失败回调函数error，将响应数据传给回调函数error
                    error("error" + xmlhttp.status);
                }
            }
        }
    }
}
//将数据对象变为指定格式字符串
//?act=xxx&user=xxx&pass=xxx
function querystring(obj) {
    var str = "";
    for (var attr in obj) {
        str += attr + "=" + obj[attr] + "&";
    }
    //最后会多一个&符号，所以需要截取
    return str.substring(0, str.length - 1);
}

总结

Ajax的基本知识及使用方法到这里就结束了。后边的路还很长，加油！共勉。