异步对象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>