详细解析Ajax的使用之向服务器发送GET请求
前面一篇博客我们讲到了如何使用form表单像服务器发送请求,但是请求方式是同步的,效率太低,现在我们讲一下如何使用Ajax的技术向服务器发送异步请求。
HTML代码:
<h1>ajax的get请求</h1><buttonid="btn">获取数据</button><p>姓名:<spanid="user"></span></p><p>年龄:<spanid="age"></span></p>
JavaScript代码:
varoBtn=document.getElementById("btn"); varoUser=document.getElementById("user"); varoAge=document.getElementById("age"); // 1.初始化请求对象varxhr; if (window.XMLHttpRequest) { xhr=newXMLHttpRequest(); console.log(xhr.readyState); } else { xhr=newActiveXObject("Microsoft.XMLHTTP"); } // 2.发送请求 // 2-1.设置请求的方式 地址等xhr.open("GET", "data.json", true); console.log(xhr.readyState); // 2-2.发送请求xhr.send(); console.log(xhr.readyState); xhr.onreadystatechange=function () { oBtn.onclick=function () { console.log(xhr.readyState); if (xhr.readyState==4&&xhr.status==200) { varobj=JSON.parse(xhr.responseText); // console.log(obj);// console.log(JSON.stringify(obj));oUser.innerText=obj.name; oAge.innerText=obj.age; } } } // onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。// readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。// 0: 请求未初始化// 1: 服务器连接已建立// 2: 请求已接收// 3: 请求处理中// 4: 请求已完成,且响应已就绪
JSON数据:
{ "name":"张三", "age":20 }
注意: get请求对数据的大小有限制,其次是发送的数据会拼接在URL后面,所以安全性低。