Ajax起步

前端之家收集整理的这篇文章主要介绍了Ajax起步前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Ajax的关键在于XMLHttpRequest对象,理解这个对象的例子如下:@H_403_2@

<!DOCTYPE HTML>@H_403_2@

<html>@H_403_2@

<head>@H_403_2@

<title>Ajax</title>@H_403_2@

</head>@H_403_2@

<body>@H_403_2@

<div>@H_403_2@

<button>Apple</button>@H_403_2@

<button>Samsung</button>@H_403_2@

<button>IBM</button>@H_403_2@

</div>@H_403_2@

<div id="target">@H_403_2@

Press a button@H_403_2@

</div>@H_403_2@

<script>@H_403_2@

var buttons = document.getElementsByTagName("button");@H_403_2@

for(var i = 0; i < buttons.length; i++){@H_403_2@

buttons[i].onclick = handleButtonPress;@H_403_2@

}@H_403_2@

@H_403_2@function handleButtonPress(e){@H_403_2@

var httpRequest = new XMLHttpRequest();@H_403_2@

httpRequest.onreadystatechange = handleResponse;@H_403_2@

httpRequest.open("GET",e.target.innerHTML + ".html");@H_403_2@

httpRequest.send();@H_403_2@

}@H_403_2@

function handleResponse(e){@H_403_2@

if(e.target.readyState == XMLHttpRequest.DONE &&@H_403_2@

e.target.status == 200){@H_403_2@

document.getElementById("target").innerHTML@H_403_2@

= e.target.responseText;@H_403_2@

}@H_403_2@

}@H_403_2@

</script>@H_403_2@

</body>@H_403_2@

</html>@H_403_2@

猜你在找的Ajax相关文章