1.ajax
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
2.创建 XMLHttpRequest 对象
eg:
var xhr = null;
if (window.XMLHttpRequest) {
//所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)
//均内建 XMLHttpRequest 对象。
xhr = new XMLHttpRequest();
} else {
//老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
3.向服务器发送请求
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。 然而,在以下情况中,请使用 POST 请求: a)无法使用缓存文件(更新服务器上的文件或数据库) b)向服务器发送大量数据(POST 没有数据量限制) c)发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
4.服务器响应
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
5.onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
6.处理服务器返回的数据
案例一-----------------------------------------------------------
(后台文件为json格式)
eg:
样式:
<style>
.con {
width: 600px;
margin: 100px auto;
padding: 20px;
border: 1px solid #eee;
}
.con table {
border-bottom: 1px solid #eee;
font-size: 16px;
font-weight: 800;
line-height: 2em;
text-align: center;
width: 100%;
}
.con table thead{
text-align: center;
}
.con table td{
border:1px solid #eee ;
padding: 5px 10px;
}
.con table td:nth-of-type(1){
text-align: right;
}
.con table td:nth-of-type(2){
text-align: left;
}
</style>
结构:
<div class="con">
<table id="information">
<thead><tr><th colspan="3">北京空气状况</th></tr></thead>
</table>
</div>
ajax:
//执行函数
showInfo();
//封装函数
function showInfo() {
var information = document.getElementById("information");
var info_tbody = document.createElement("tbody");
information.appendChild(info_tbody);
info_tbody.innerHTML = "";
var xhr = null;
//兼容处理,创建XMLHttpRequest对象,下图有转化后的内容截图
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open("get","tq.json");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
//将返回的数据转化成json格式
var data =JSON.parse(xhr.responseText);
for(var i in data.data){
if(i=="yesterday"){
var trye = document.createElement("tr");
var tdye = document.createElement("td");
tdye.innerHTML=i;
trye.appendChild(tdye);
var tdye1 = document.createElement("td");
var stri="";
for(var s in data.data.yesterday){
stri+=data.data.yesterday[s]
}
tdye1.innerHTML =stri;
trye.appendChild(tdye1);
info_tbody.appendChild(trye);
}else if(i=="forecast"){
var trf = document.createElement("tr");
var tdf = document.createElement("td");
tdf.innerHTML=i;
trf.appendChild(tdf);
var tdf1 = document.createElement("td");
for(var j in data.data.forecast){
var pt = document.createElement("p");
var str="";
for(var m in data.data.forecast[j]){
str+=data.data.forecast[j][m]
}
pt.innerHTML = str;
tdf1.appendChild(pt);
}
trf.appendChild(tdf1);
info_tbody.appendChild(trf);
}else{
var trtag = document.createElement("tr");
trtag.innerHTML="<td>"+i+"</td><td>"+data.data[i]+"</td>";
info_tbody.appendChild(trtag);
}
}
}
};
xhr.send();
}
案例二----------------------------------------------------------- (后台文件为xml格式) 其他内容一样只是数据处理稍有差别 showInfo(); function showInfo() { var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } xhr.open('get', 'tq.xml'); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { var data = xhr.responseXML; // var tbody =document.createElement("tbody"); //读取XML数据 var resp = data.getElementsByTagName("resp")[0];//不同的地方 var city = resp.getElementsByTagName("city")[0]; var dttag = document.createElement("dt"); dttag.innerHTML = city.textContent;//获得元素的文本属性 ....... } }; xhr.send(); }