原生Ajax

Ajax介绍

AsynchronousJavascriptAndXML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步JavaScript和XML（标准通用标记语言的子集）。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

Ajax使用步骤

1.创建对象并判断兼容

  var xhr =null;//创建对象
        if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();//IE8及以上
        }else{
        xhr = new ActiveXObject("Microsoft.XMLHTTP");//IE低版本兼容
        }

2.利用.open初始化请求,设置和后台的交互行为 （注意：GET和POST方式的不同）

//GET方式
xhr.open("GET","https://www.baidu.com?usefengyv&pwd=1234",true);
//POST方式
xhr.open("POST","https://www.baidu.com",true);
xhr.setRequestHeader('Content-Type'," application/x-www-form-urlencoded");//设置 http 头信息

3.发送请求

 //发送请求
        xhr.send();//GET方式
        xhr.send('usefengyv&pwd=1234');//POST方式

使用GET方法时，请求参数和对应的值附加在URL后面，POST方法将请求参数封装在HTTP请求数据中，以名称/值的形式出现 ，可以传输大量数据，这样POST方式对传送的数据大小没有限制， 而且也不会显示在URL中。
4.指定回调函数进行监听请求结果

法一：

  xhr.onload = ()=>{
                if(xhr.readyState===4){
                    //判断请求是否已完成，且响应已就绪
                    if(200 <= xhr.status && xhr.status<300 || xhr.status===304){//判断HTTP状态码
                        console.log('请求成功');
                        console.log(xhr.responseText);//拿到后台返回的数据
                    }
                }
            };

法二：

xhr.onreadystatechange = ()=>{//监听状态码发生变化的过程
            if(xhr.readyState===4){
                //判断请求是否已完成，且响应已就绪
                if(200 <= xhr.status && xhr.status<300 || xhr.status===304){//判断HTTP状态码
                    console.log('请求成功');
                    console.log(xhr.responseText);//拿到后台返回的数据
                }
            }
        };

xhr.readyState -----> xhr的自身状态

• 0: 请求未初始化

• 1: 服务器连接已建立

• 2: 请求已接收

• 3: 请求处理中

• 4: 请求已完成，且响应已就绪

xhr.status -----> 服务器的状态码（http状态码）