AJAX新手入门

今天来总结分享一下AJAX的相关知识以及基本原理，在学习AJAX之前，我们首先来了解两个概念，异步和线程。

异步

生活中，同步就是同时进行，异步就是依次执行。但是在程序中，这两个概念刚好相反，同步就是依次执行，JavaScript代码大部分是同步执行，比较代表性的就是alert()；如果有多条alert()语句，那么就是一条执行完，执行下一条，依次执行；异步在程序中指同时执行，JavaScript中的事件，还有计时器都属于异步执行。

线程

如果说一个功能是程序，执行一个功能的整个过程是进程，那么，执行一个功能的过程中的每一个分支就是线程。JavaScript一大特点就是单线程的语言，同一个时间只能做一个事件，那么有了异步，JavaScript就可以使用异步模拟了多线程的操作，来提高效率。

下面正式进入今天的分享主题：

什么是AJAX？

AJAX，全称Asynchronous JavaScript and XML，指异步的JavaScript和XML。AJAX是前后端交互的重要手段，目前IE5以上均兼容

AJAX的特点

可以异步加载数据，可以在不中断浏览器其他任务的情况下加载数据，无需重新加载整个网页的情况下，能够更新部分网页。

AJAX的使用环境

需要在服务器环境下运行。其实，ajax本身是不需要的，但在前后端交互过程中，后端是需要服务器是，所以ajax也需要在服务器环境下运行。

AJAX的使用

1、创建请求对象（载体对象）

var xhr = new XMLHttpRequest();

2、设置请求参数

xhr.open("method",url,是否异步);

method：GET和POST

POST和GET的区别：
1.POST主要用来发送数据，GET主要用来接受数据；
2.PSOT发送数据的安全性较好，而GET较差；
3.POST发送数据不限制大小，而GET大小受限2~100k。

url：要请求的接口地址
是否异步：接收一个布尔值，是否开启异步请求，不写的话，默认为true

1.为true时，服务器请求是异步进行的，也就是脚本执行send() 方法后不等待服务器的执行结果，而是继续执行脚本代码；
2. 为false时，服务器请求是同步进行的，也就是脚本执行send() 方法后等待服务器的执行结果的返回，若在等待过程中超时，则不再等待，继续执行后面的脚本代码。

3、通过onreadystatechange，监听响应状态

onreadystatechange事件 ：存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState状态：ajax的执行阶段
0 －（未初始化）还没有调用send()方法
1 －（载入）已调用send()方法，正在发送请求
2 －（载入完成）send()方法执行完成，已经接收到全部响应内容
3 －（交互）正在解析响应内容
4 －（完成）响应内容解析完成，可以在客户端调用了
HTTP 状态码 ajax.status
1xx：请求收到，继续处理
2xx：操作成功收到，分析、接受
3xx：完成此请求必须进一步处理
4xx：请求包含一个错误语法或不能完成
5xx：服务器执行一个完全有效请求失败
比如： 200——成功； 404——没有找到文件
responseText属性、responseXML属性：获取来自服务器的响应数据

4、发送：send(string)

只有post使用send()发送，get是通过url地址发送数据。

AJAX使用的封装——GET

    function ajaxGet(url,cb,data){
        // 0.处理默认值,保证data绝对是一个对象
        data = data || {};
        // 1.解析并拼接数据
        var str = "";
        for(var i in data){
            str += i + "=" + data[i] + "&";
        }
        // 2.将拼接好的数据,再拼接到url上，并拼接时间戳，处理缓存问题
        var d = new Date();
        url += "?" + str + "__dd=" + d.getTime();
        // 3.开启ajax的过程
        var xhr = new XMLHttpRequest();
        xhr.open("get",url,true);
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4 && xhr.status==200){
                cb(xhr.responseText);
            }
        }
        xhr.send();
    }

AJAX使用的封装——POST

function ajaxPost(url,cb,data){
        data = data || {};
        var str = "";
        for(var i in data){
            str += `${i}=${data[i]}&`;
        }
        str = str.slice(0,str.length-1);
        var ajax = new XMLHttpRequest();
        ajax.open("post",url,true);
        ajax.onreadystatechange = function(){
            if(ajax.readyState == 4 && ajax.status == 200){
                cb(ajax.responseText);
            }
        }
        //向请求添加 HTTP 头
        ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        ajax.send(str);
    }

文中若有疑问，欢迎留言交流~~