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