AJAX之原生ajax

版权声明：来自 https://blog.csdn.net/Leesoar521yt/article/details/82347482

AJAX(Asynchronous JavaScript And XML)即异步javascript和xml，并不是一门语言，而是一种用于创建快速动态网页的技术。无需重新加载整个网页的情况下，即可更新部分网页。

原生ajax的四步操作：
* 创建核心对象
* 使用核心对象打开服务器之间的连接
* 发送请求
* 注册监听，监听浏览器的响应
核心对象类： XMLHTTPRequest
open(请求方式，请求的地址，是否需要异步)
send(请求体)
onreadystatechange：监听事件，它会在核心对象的状态发生改变的时候自动被调用
readyState：当前核心对象的状态，取值范围为1~4，4表示服务器相应结束
status：服务器响应的状态码，只有当服务器响应结束之后才会有，200表示请求成功
responseText：获取服务器响应的响应体
现在来看看原生ajax怎么写吧：

1.get方法

<script type="text/javascript">
    window.onload = function(){
        //获取按钮标签对象
        var btn = document.getElementById("btn");
        //绑定事件
        btn.onclick = function(){
            //请求数据
            //1.创建请求核心对象
            var xhr = null; //处理兼容问题

            //异常处理：try-catch
            try{
                xhr = new XMLHttpRequest();
            }catch(e){
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2.与服务器建立连接
            //get的特点：将数据拼接到url中
            //请求方式，请求的服务器地址，是否需要异步
            //注意：如果数据中有中文，则向服务器发送之前需要进行编码【字符类型 的数据转化为字节类型的数据】
            xhr.open("get", "http://localhost/ajaxGet.php?usr=" + encodeURI("示例") + "&age=20&pwd=abc123", true);

            //3.发送连接请求
            xhr.send();

            //4.监听，监听服务器的响应
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        alert("数据请求成功！");
                        alert(xhr.responseText);
                    }else{
                        alert("数据请求失败！");
                    }
                }
            }
        }
    }
</script>

2.post方法

<script type="text/javascript">
    window.onload = function(){
        //获取按钮标签对象
        var btn = document.getElementById("btn");
        //给按钮绑定事件
        btn.onclick = function(){
            //请求数据
            //1.创建请求核心对象
            //处理兼容问题
            var = xhr = null; //处理兼容问题

            //异常处理
            try{
                xhr = new XMLHttpRequest();
            }catch(e){
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }

            //2.与服务器建立连接
            //请求方式，请求的服务器地址，是否需要异步
            //注意：如果数据中有中文，则向服务器发送之前需要进行编码【字符类型的数据转换为字节类型的数据】
            xhr.open("post", "http://localhost/ajaxpost.php", true);
            //3.发送连接请求
            //设置数据的编码格式，固定写法【请求头】
            xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
            //设置需要发送的数据【请求体】
            var str = "user=leesoar&age=20&pwd=123";
            xhr.send(str);
            //4.监听，监听服务器的响应
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        alert("数据请求成功！");
                        alert(xhr.responseText);
                    }else{
                        alert("数据请求失败！");
                    }
                }
            }
        }
    }
</script>