定义:
Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)在2005年被Jesse JamesGarrett提出的新术语,用来描述一种使用现有技术集合的'新方法,包括:HTML或 XL,CSS,JavaScript, DOM,XML,XSLT,以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。
2.AJAX 是开发者的梦想,因为您能够:
- 不刷新页面更新网页
- 在页面加载后从服务器请求数据
- 在页面加载后从服务器接收数据
- 在后台向服务器发送数据
3.AJAX原理
客户端发送请求,请求交给XMLHttpRequest,XMLHttpRequest 把请求提交给服务,服务器进行业务处理,服务器响应数据交给XMLHttpRequest对象,XMLHttpRequest对象接收数据,由javascript把数据写到页面上。
4.原生AJAX
Ajax工作流程:
Ajax通过XmIHttpRequest对象来向服务器发出异步请求,从服务器获得数据,然后用Javascript来操作DOM而更新页面。
方法 | 描述 |
open[method,ur,osync) | 规定请求的类型、URL 以及是否异步处理请求。method:请求的类型;GET或 POST url:文件在服务器上的位置 async: true(异步)或false (同步) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
点击按钮,显示对应的内容
<hr>
<input type="button" value="发送" id="btn">
<div class="one">
</div>
<script>
document.querySelector("#btn").onclick = function () {
// 第一步:创建一个XMLHttpRequet对象
var xmlhttp = new XMLHttpRequest();
console.log(xmlhttp)
// 第二步:告诉浏览器请求的方式是什么,以及请求发送到哪里
xmlhttp.open("get", "data/student.xml", true);
// 第三步:设置相应服务器端数据处理
xmlhttp.onload = function () {
// 做数据处理
// 用于处理xml文件的数据
console.log(xmlhttp.responseText)
var students = xmlhttp.responseXML.getElementsByTagName("student");
var table = "<table border='1'><tr><th>学号</th><th>姓名</th><th>年龄</th></tr>"
// 遍历students
for (var i = 0; i < students.length; i++) {
var stuid = students[i].getElementsByTagName("stuID")[0].innerHTML;
var stuname = students[i].getElementsByTagName("stuName")[0].innerHTML;
var stuage = students[i].getElementsByTagName("stuAge")[0].innerHTML;
// 将遍历的数据添加到表格中
table += " <tr><td>" + stuid + "</td><td>" + stuname + "</td><td>" + stuage + "</td></tr>"
}
table += "</table>"
// 把table添加到html中的div里
document.querySelector(".one").innerHTML = table;
}
// 第四步:发送请求
xmlhttp.send();
}
</script>
</body>
</html>