原始Ajax与jQuery中的Ajax
原始Ajax与jQuery中的Ajax
首先通过实例，来看一下 jQuery 实现 Ajax 有多简单。下面是一个使用原始 Ajax 的示例：
<!doctype html><html><head>
<meta charset="utf-8"/>
<title>jQuery Ajax</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function() { var xhr = new AjaxXmlHttpRequest();
$("#btnAjaxOld").click(function(event) { var xhr = new AjaxXmlHttpRequest();
xhr.onreadystatechange = function() { if (xhr.readyState == 4) { document.getElementById("divResult").innerHTML = xhr.responseText;
}
} //由于涉及到同源策略，需要服务器端的支持
xhr.open("GET", "data/AjaxGetCityInfo.aspx?resultType=html", true);
xhr.send(null);
});
}); //跨浏览器获取 XmlHttpRequest 对象
function AjaxXmlHttpRequest() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) { // Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) { try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser nonsupport AJAX！"); return false;
}
}
} return xmlHttp;
} </script></head><body>
<button id="btnAjaxOld">original ajax call</button>
<div id="divResult"></div>
</body>
</html>上面的实例中，data/AjaxGetCityInfo.aspx?resultType=html地址会返回一段 HTML 代码。
使用原始 Ajax，我们需要做较多的事情，比如创建XmlHttpRequest对象，判断请求状态，编写回调函数等。
而用 jQuery 的Load方法，只需要一句话：
$("#divResult").load("data/AjaxGetCityInfo.aspx", { "resultType": "html" });现在只是用 jQuery 的 Ajax 函数, 我的页面变得简洁了:
<!doctype html><html lang="zh"><head>
<meta charset="utf-8"/>
<title>jQuery Ajax</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function() {
$("#btnAjaxJquery").click(function(event) {
$("#divResult").load("data/AjaxGetCityInfo.aspx", { "resultType": "html" });
});
})
</script></head><body>
<button id="btnAjaxJquery">use jQuery load method</button>
<div id="divResult"></div>
</body>
</html>
neue Datei
<!doctype html><html><head>
<meta charset="utf-8"/>
<title>jQuery Ajax</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function() { var xhr = new AjaxXmlHttpRequest();
$("#btnAjaxOld").click(function(event) { var xhr = new AjaxXmlHttpRequest();
xhr.onreadystatechange = function() { if (xhr.readyState == 4) { document.getElementById("divResult").innerHTML = xhr.responseText;
}
} //由于涉及到同源策略，需要服务器端的支持
xhr.open("GET", "data/AjaxGetCityInfo.aspx?resultType=html", true);
xhr.send(null);
});
}); //跨浏览器获取 XmlHttpRequest 对象
function AjaxXmlHttpRequest() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) { // Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) { try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser nonsupport AJAX！"); return false;
}
}
} return xmlHttp;
} </script></head><body>
<button id="btnAjaxOld">original ajax call</button>
<div id="divResult"></div>
</body>
</html>
Vorschau
Clear
- Kursempfehlungen
- Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit
Auch Studierende, die diesen Kurs gesehen haben, lernen
Lassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen
Kurze Einführung in die Web-Frontend-Entwicklung
Umfangreiche, praktische Tianlongbabu-Entwicklung eines Mini-Version-MVC-Frameworks, das die Enzyklopädie-Website mit peinlichen Dingen imitiert
Erste Schritte mit der praktischen PHP-Entwicklung: Schnelle PHP-Erstellung [Small Business Forum]
Anmeldebestätigung und klassisches Message Board
Wissenssammlung über Computernetzwerke
Schnellstart-Node.JS-Vollversion
Der Frontend-Kurs, der Sie am besten versteht: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Schreiben Sie Ihr eigenes PHP-MVC-Framework (40 Kapitel ausführlich/große Details/Muss gelesen werden, damit Neulinge vorankommen)