Ajax的工作原理
ajax 的全称是Asynchronous(异步的意思) JavaScript and XML,是一种创建交互式网页应用的网页开发技术
ajax技术的流行得益于google的大力推广,正是由于google产品对ajax技术的广泛应用,使得ajax流行起来了。
Ajax其核心有JavaScript、XMLHTTPRequest、DOM对象组成,通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据.
这其中最关键的一步就是从服务器获得请求数据,要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解
XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是js可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。
1 (初始化) 对象已建立,尚未调用send方法
2 (发送数据) send方法已调用,但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,
4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据responseText服务器的响应,返回数据的文本。responseXML服务器的响应,返回数据的兼容DOM的XML文档对象 ,这个对象可以解析为一个DOM对象。responseBody 服务器返回的主题(非文本格式)responseStream服务器返回的数据流status服务器的HTTP状态码(如:404 = "文件末找到" 、200 ="成功" ,等等)statusText服务器返回的状态文本信息 ,HTTP状态码的相应文本(OK或Not Found(未找到)等等)
ajax的优点
1、最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好。
2、使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
ajax的缺点
1、ajax干掉了浏览器的back按钮,对浏览器后退机制的破坏。
2、安全问题,ajax技术就如同对企业数据建立了一个直接通道,暴露出请求的接口的数据.
3、对搜索引擎支持的不有好.
4、破坏了程序的异常机制,如果程序抛出异常,对调试带来不方便
以JSONPlaceHolder为数据服务,编写案例,以进一步阐述Ajax及XMLHttpRequest对象的用法,尽可能涉及更多的应用场景。
获取用户列表案例
这个应用场景是获取用户列表,我们将通过XMLHttpRequest对象向JSONPlaceHolder发送GET请求,并在页面上显示获取到的用户信息。具体代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ajax案例</title>
</head>
<body>
<button οnclick="getdata()">GetUsers</button>
<ul id="user-list"></ul>
</body>
</html>
<script>
function getdata() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var users = JSON.parse(xhr.responseText);
var list = document.getElementById("user-list");
list.innerHTML = "";
for (var i = 0; i < users.length; i++) {
var li = document.createElement("li");
li.textContent = users[i].name;
list.appendChild(li);
}
}
};
xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
xhr.send();
}
</script>
在这个案例中,我们定义了一个名为getdata的函数,当点击按钮时就会调用该函数。函数内部创建了一个XMLHttpRequest对象,并设置了onreadystatechange事件处理函数。当readyState属性变为4(即请求成功完成)且status属性为200时,表示已经接收到响应数据,我们解析JSON格式的响应内容,然后遍历所有用户信息,并将它们添加到页面上的ul元素中。