1.AJAX(asynchronous javascript and xml)简介
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。
AJAX is not a programming language. It is just a technique for creating better and more interactive web applications.
图1 使用ajax响应搜索输入
2.AJAX使用
2.1 发送请求
XMLHttpRequest 是 AJAX 的基础。
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求:
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
具体知识以及使用可参考w3school官网
2.2 接收请求
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
3.应用实例
通过ajax请求json数据，并展示。
图2 案例网页
网页元素代码:
<body>
<div id="container">
<div id="father">
<a id="name">XXX</a><a>是一位</a><a id="age">XX</a><a>岁的天才！</a>
<br />
<button id="btn" onclick="loadRequest()">变化</button>
</div>
</div>
</body>
js代码:
<script>
function loadRequest() {
var xhr;
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
document.getElementById("name").innerHTML = data.name;
document.getElementById("age").innerHTML = data.age;
}
}
xhr.open("GET", "./data.xml", true);
xhr.send();
}
</script>
通过实例化XMLHttpRequest对象，将存储数据的.xml文件中的字符串通过JSON.parse()方法转化为对象，再将对象中的响应数值传输给网页页面元素上。
图3 数据对象
页面刷新：
图4 ajxa响应
网友评论