<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax</title> </head> <body> //异步JS和XML,在不加载页面的情况下刷新页面部分内容,不用添加任何其他依赖。 <div id="data1"><h3>使用Ajax修改内容</h3></div> <button type="button" onclick="changeContent()">修改内容</button><br> <button type="button" onclick="myFunction()">回调函数修改内容</button> </body> <script> var xhr; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xhr = new XMLHttpRequest(); } else { // code for IE6, IE5 xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //请求接口赋值 function changeContent() { xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { document.getElementById("data1").innerHTML = xhr.responseText; } } xhr.open("get", "http://www.91cht.com/woxiang/control/bapi?operFlag=getNews&page=1&rows=5", true); xhr.send(); } //回调函数返回数据 function myFunction() { loadXMLDoc("http://www.91cht.com/woxiang/control/bapi?operFlag=getNews&page=1&rows=5", function () { if (xhr.readyState == 4 && xhr.status == 200) { document.getElementById("data1").innerHTML = xhr.responseText; } }); } function loadXMLDoc(url, cfunc) { xhr.onreadystatechange = cfunc; xhr.open("GET", url, true); xhr.send(); } </script> </html>