Ajax异步对象XMLHttpRequest属性和方法

异步对象XMLHttpRequest属性和方法

1.创建异步对象，使用js的语法
var xhr = new XMLHttpRequest();

2.XMLHttpRequest方法
① open(请求方式,服务器端的访问地址,异步还是同步)
例如: xhr.open("get","http://localhost:8080/toShow" ,true);
② send(): 使用异步对象发送请求

3.XMLHttpRequest属性
readyState属性:请求的状态 , 例如: xhr.readyState==4
0:表示创建异步对象时，new XMLHttpRequest();
1:表示初始异步对象的请求参数 , 执行open()方法
2:使用send()方法发送请求。
3:使用异步对象从服务器接收了数据
4:异步对象接收了数据，并在异步对象内部处理完成后。

status属性:网络的状态，和Http的状态码对应, 例如: xhr.status==200
200:请求成功
404:服务器资源没有找到
500:服务器内部代码有错误

responseText属性:表示服务器端返回的数据 , 例如: var data = xhr.responseText;

Ajax完整原生代码案例

    <script type="text/javascript">
        function search() {
            //1.创建异步对象
            var xhr = new XMLHttpRequest();
            //2.绑定事件
            xhr.onreadystatechange=function () {
                if (xhr.readyState==4 && xhr.status==200){
                    //获取数据
                    let data = xhr.responseText;
                    //更新id为son的dom
                    document.getElementById("son").value= data;
                }
            }

            //3.初始化参数,获取id为parent的值
            var pid= document.getElementById("parent").value;
            xhr.open("get","http://localhost:8080/getParentById/"+pid,true)
        
            //4.发起请求
            xhr.send();
        }
    </script>