Heim >Web-Frontend >js-Tutorial >Was ist Ajax? Detaillierter Nutzungsprozess von Ajax (vollständige Beispiele enthalten)
Was ist Ajax? Detaillierter Nutzungsprozess von Ajax (vollständige Beispiele enthalten)
- 寻∝梦Original
- 2018-09-10 14:20:151235Durchsuche
In diesem Artikel wird hauptsächlich die Definition von Ajax sowie die spezifische Verwendung von Ajax vorgestellt. Lesen wir nun gemeinsam diesen Artikel
1.Was ist Ajax? ?
Die Technologie, die es dem Browser ermöglicht, mit dem Server zu kommunizieren, ohne die aktuelle Seite zu aktualisieren, heißt Ajax. Im eigentlichen Programmierprozess wird XMLHttpRequest häufig als Synonym für Ajax verwendet, und XMLHttpRequest ist eine Erweiterung von JavaScript.
2. Methoden und Eigenschaften:
2.3 Programmierung mit JavaScript-Sprache<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HelloWorld</title>
<script type="text/javascript">
window.onload = function(){
//1.为a节点添加点击事件
document.getElementsByTagName("a")[0].onclick = function(){
//3.创建XMLHttpRequest对象
var request = new XMLHttpRequest();
//4.准备请求参数url method
var url = this.href + "?time=" + new Date();
var method = "GET";
//5.调用 XMLHttpRequest 对象的 open 方法
request.open(method,url);
//6.调用 XMLHttpRequest 对象的 send 方法
request.send(null);
//7.为XMLHttpRequest对象添加onreadystatechange响应函数
request.onreadystatechange = function(){
//8.判断响应是否完成：XMLHttpReques对象的 readState 为 4
if(request.readyState == 4){
//9.再判断响应是否可用： XMLHttpReques对象的status 为 200
if(request.status == 200 || request.status == 304){
//10.打印相应结果：responseText
alert(request.responseText);
}
}
}
//2.取消默认行为，阻止点击页面跳转
return false;
}
}
</script>
</head>
<body>
<a href="hello.txt">Hello</a>
</body>
</html>Verwendung von XMLHttpRequest-Instanzen zur Kommunikation mit dem Server enthält 3 Schlüssel: 
Dieser Event-Handler wird vom Server ausgelöst, nicht vom Benutzer; >--|Während der Ajax-Ausführung benachrichtigt der Server den Client über den aktuellen Kommunikationsstatus. Dies wird durch die Aktualisierung des readyState des XMLHttpRequest-Objekts erreicht. Das Ändern der Eigenschaft „readyState“ ist eine Möglichkeit für den Server, auf der Clientverbindung zu arbeiten.
Jedes Mal, wenn sich das readyState-Attribut ändert, wird das readystatechange-Ereignis ausgelöst②open(method, url, asynch):
--|
XMLHttpRequest Die offene Methode des Objekts ermöglicht es dem Programmierer, mithilfe eines Ajax-Aufrufs eine Anfrage an den Server zu senden.--|Methode:
Anfragetyp, eine Zeichenfolge ähnlich „GET“ oder „POST“. Wenn Sie nur eine Datei vom Server abrufen möchten, ohne Daten zu senden, verwenden Sie GET (Daten können in der GET-Anfrage gesendet werden, indem die Abfragezeichenfolge an die URL angehängt wird, die Datengröße ist jedoch auf 2000 Zeichen begrenzt). Wenn Sie Daten an den Server senden müssen, verwenden Sie POST.
--|In einigen Fällen speichern einige Browser die Ergebnisse mehrerer XMLHttpRequest-Anfragen in derselben URL zwischen. Wenn die Antwort auf jede Anfrage unterschiedlich ist, führt dies zu schlechten Ergebnissen. Hier hängen Sie den Zeitstempel an das Ende der URL an, um die Einzigartigkeit der URL sicherzustellen und zu verhindern, dass der Browser das Ergebnis zwischenspeichert. --|url: Pfadzeichenfolge, die auf die Datei auf dem von Ihnen angeforderten Server verweist. Kann ein absoluter Pfad oder ein relativer Pfad sein.
--|asynch: Gibt an, ob die Anfrage asynchron übertragen werden soll. Der Standardwert ist true. Wenn Sie „true“ angeben, müssen Sie nicht auf eine Antwort vom Server warten, bevor Sie die folgenden Skripts lesen. Geben Sie „false“ an. Wenn die Skriptverarbeitung diesen Punkt durchläuft, wird sie angehalten und gewartet, bis die Ajax-Anfrage abgeschlossen ist, bevor sie fortfährt (weitere Informationen finden Sie in der Spalte „PHP Chinesisch-Website“ AJAX-Entwicklungshandbuch ). learn)
③send(data):--|Die open-Methode definiert einige Details der Ajax-Anfrage. Die Sendemethode kann Anweisungen für ausstehende Anfragen senden
--|data: die Zeichenfolge, die an den Server übergeben werden soll.
--|Wenn Sie GET request wählen, werden keine Daten an die Sendemethode gesendet: request.send(null);--|Beim Senden an die Sendemethode ()-Methode stellt Parameter bereit. Stellen Sie sicher, dass die in open() angegebene Methode POST ist. Wenn keine Daten als Teil des Anforderungstexts gesendet werden, verwenden Sie null.
④setRequestHeader(header,value):
--|Wenn der Browser eine Seite vom Server anfordert, sendet er zusammen mit der Anfrage eine Reihe von Header-Informationen. Bei diesen Header-Informationen handelt es sich um eine Reihe von Metadaten, die die Anfrage beschreiben.
Die Header-Informationen werden verwendet, um zu deklarieren, ob es sich bei einer Anfrage um GET oder POST handelt.
--|Bei Ajax-Anfragen kann das Senden von Header-Informationen durch setRequestHeader abgeschlossen werden
--|Parameter-Header: Der Name des Headers; Parameterwert: Der Wert des Headers .
--|Wenn Sie eine POST-Anfrage verwenden, um Daten an den Server zu senden, müssen Sie den
„Content-type“-Header auf „application/x-www-form-urlencoded“setzen . Es wird angezeigt, dass der Server die Daten sendet und dass die Daten bereits URL-codiert sind. --|Diese Methode
muss nach open() aufgerufen werden⑤readyState
--|readyState-Attribut stellt den Ajax-Anfragestrom dar Status . Sein Wert wird durch eine Zahl dargestellt.
----|0 bedeutet nicht initialisiert. Die offene Methode wurde noch nicht aufgerufen----|1 bedeutet Laden. Die offene Methode wurde aufgerufen, aber die Sendemethode wurde noch nicht aufgerufen
----|2 bedeutet, dass der Ladevorgang abgeschlossen ist. send wurde aufgerufen. Die Anfrage wurde gestartet
----|3 bedeutet, dass die Interaktion im Gange ist. Der Server sendet eine Antwort ----|4 bedeutet abgeschlossen. Antwort gesendet
--|每次 readyState 值的改变，都会触发 readystatechange 事件。如果把 onreadystatechange 事件处理函数赋给一个函数，那么每次 readyState 值的改变都会引发该函数的执行。
--|readyState 值的变化会因浏览器的不同而有所差异。但是，当请求结束的时候，每个浏览器都会把 readyState 的值统一设为 4
⑥status
--|服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息，并且属于超文本传输协议中的一部分。
--|常用状态码及其含义：
----|404 没找到页面(not found)
----|403 禁止访问(forbidden)
----|500 内部服务器出错(internal service error)
----|200 一切正常(ok)
----|304 没有被修改(not modified)
--|在 XMLHttpRequest 对象中，服务器发送的状态码都保存在 status 属性里。通过把这个值和 200 或 304 比较，可以确保服务器是否已发送了一个成功的响应
⑦responseText
--|XMLHttpRequest 的 responseText 属性包含了从服务器发送的数据。它是一个HTML,XML或普通文本，这取决于服务器发送的内容。
--|当 readyState 属性值变成 4 时, responseText 属性才可用，表明 Ajax 请求已经结束。
⑧responseXML
--|如果服务器返回的是 XML， 那么数据将储存在 responseXML 属性中。
--|只用服务器发送了带有正确首部信息的数据时， responseXML 属性才是可用的。 MIME 类型必须为 text/xml
3.Ajax的数据格式（HTML XML JSON）
3.1 HTML
（1）HTML 由一些普通文本组成。如果服务器通过 XMLHttpRequest 发送 HTML， 文本将存储在 responseText 属性中。
（2）不必从 responseText 属性中读取数据。它已经是希望的格式，可以直接将它插入到页面中。
（3）插入 HTML 代码最简单的方法是更新这个元素的 innerHTML 属性。
window.onload = function(){
var aNodes = document.getElementsByTagName("a");
for(var i = 0;i < aNodes.length;i++){
aNodes[i].onclick = function(){
var request = new XMLHttpRequest();
var method = "GET";
var url = this.href;
request.open(method,url);
request.send(null);
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200 || request.status == 304){
document.getElementById("details").innerHTML = request.responseText;
}
}
}
return false;
}
}3.2 XML
优点：
（1）XML 是一种通用的数据格式。
（2）不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记。
（3）利用 DOM 可以完全掌控文档。
缺点：
（1）如果文档来自于服务器，就必须得保证文档含有正确的首部信息。若文档类型不正确，那么 responseXML 的值将是空的。
（2）当浏览器接收到长的 XML 文件后， DOM 解析可能会很复杂
window.onload = function(){
var aNodes = document.getElementsByTagName("a");
for(var i = 0;i < aNodes.length;i++){
aNodes[i].onclick = function(){
var request = new XMLHttpRequest();
var method = "GET";
var url = this.href;
request.open(method,url);
request.send(null);
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200 || request.status == 304){
//1获取XML文件内容
var result = request.responseXML;
/*
* 解析XML文件：<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
* <a href="http://andybudd.com/">http://andybudd.com/</a>
*/
var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;
var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;
//创建节点，并且添加到p节点中
var aNode = document.createElement("a");
aNode.appendChild(document.createTextNode(name));
aNode.href = "mailto:" + email;
var h2Node = document.createElement("h2");
h2Node.appendChild(aNode);
var aNode2 = document.createElement("a");
aNode2.appendChild(document.createTextNode(website));
aNode2.href = website;
var detailsNode = document.getElementById("details");
detailsNode.innerHTML = "";
detailsNode.appendChild(h2Node);
detailsNode.appendChild(aNode2);
}
}
}
return false;
}
}
}
3.3 JSON
（1）JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
（2）JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。
window.onload = function(){
var aNodes = document.getElementsByTagName("a");
for(var i = 0;i < aNodes.length;i++){
aNodes[i].onclick = function(){
var request = new XMLHttpRequest();
var method = "GET";
var url = this.href;
request.open(method,url);
request.send(null);
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200 || request.status == 304){
var jsonStr = request.responseText;
var jsonObject = eval("(" + jsonStr + ")");
var name = jsonObject.person.name;
var website = jsonObject.person.website;
var email = jsonObject.person.email;
var aNode = document.createElement("a");
aNode.appendChild(document.createTextNode(name));
aNode.href = "mailto:" + email;
var h2Node = document.createElement("h2");
h2Node.appendChild(aNode);
var aNode1 = document.createElement("a");
aNode1.appendChild(document.createTextNode(website));
aNode1.href = website;
var detailsNode = document.getElementById("details");
detailsNode.innerHTML = "";
detailsNode.appendChild(h2Node);
detailsNode.appendChild(aNode1);
}
}
}
return false;
}
}
}4.使用jQuery实现Ajax技术
jQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON()。
4.1 load() 方法
$(function(){
$("a").click(function(){
var url = this.href;
var args = {"time":new Date()};
$("#details").load(url);
return false;
});
})（1）load() 方法是 jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的 HTML 代码并插入到 DOM 中. 它的结构是: load(url[, data][,callback])，其中url：String类型，请求HTML页面的URL地址；data（可选）：Object类型，发送到服务器的key/value数据；callback（可选）：Function类型，请求完成时的回调函数，无论请求成功还是失败。
（2）如果只需要加载目标 HTML 页面内的某些元素, 则可以通过 load() 方法的 URL 参数来达到目的. 通过 URL 参数指定选择符, 就可以方便的从加载过来的 HTML 文档中选出所需要的内容. load() 方法的 URL 参数的语法结构为 “url selector”(注意: url 和 选择器之间有一个空格)
$(function(){
$("a").click(function(){
//选择返回HTML结果页面中的h2后代a元素
var url = this.href + " h2 a";
var args = {"time":new Date()};
$("#details").load(url);
return false;
});
})（3）传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递, 采用 GET 方式传递, 否则采用 POST 方式
（4）对于必须在加载完才能继续的操作, load() 方法提供了回调函数, 该函数有三个参数: 代表请求返回内容的 data; 代表请求状态的 textStatus 对象和 XMLHttpRequest 对象
4.2$.get()或$.post() 方法
4.2.1加载XML数据
$(function(){
$("a").click(function(){
var url = this.href;
args = {"time" : new Date()};
$.get(url,args,function(data){
var name = $(data).find("name").text();
var email = $(data).find("email").text();
var website = $(data).find("website").text();
$("#details").empty()
.append("<h2><a href='mailto:" + email + "'>" + name +"</a></h2>")
.append("<a href='" + website + "'>" + website + "</a>");
})
return false;
});
})
4.2.2加载HTML数据
$(function(){
$("a").click(function(){
var url = this.href;
var args = {"time" : new Date()};
$.get(url,args,function(data){
$("#details").empty();
$(data).appendTo($("#details"));
});
return false;
});
})
4.2.3加载JSON数据
$(function(){
$("a").click(function(){
var url = this.href;
args = {"time" : new Date()};
$.get(url,args,function(data){
var name = data.person.name;
var email = data.person.email;
var website = data.person.website;
$("#details").empty()
.append("<h2><a href='mailto:" + email + "'>" + name +"</a></h2>")
.append("<a href='" + website + "'>" + website + "</a>");
},"JSON")
return false;
});
})
（1）$.get() 方法使用 GET 方式来进行异步请求. 它的结构是: $.get(url[, data][, callback][, type])，其中：url：String类型，请求HTML页面的URL地址；data（可选）：Object类型，发送到服务器的key/value数据；callback（可选）：Function类型，请求完成时的回调函数，无论请求成功还是失败；type（可选）：String类型，服务器返回内容的格式，可以是xml,json,html,text等类型。
（2）$.get() 方法的回调函数只有两个参数: data 代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等; textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.
（3）$.get() 和 $.post() 方法时 jQuery 中的全局函数, 而 find() 等方法都是对 jQuery 对象进行操作的方法
5.$.getJSON()方法
$(function(){
$("a").click(function(){
var url = this.href;
args = {"time" : new Date()};
$.getJSON(url,args,function(data){
var name = data.person.name;
var email = data.person.email;
var website = data.person.website;
$("#details").empty()
.append("<h2><a href='mailto:" + email + "'>" + name +"</a></h2>")
.append("<a href='" + website + "'>" + website + "</a>");
});
return false;
});
})
本篇文章到这就结束了（想看更多就到PHP中文网AJAX使用手册栏目中学习），有问题的可以在下方留言提问。
Das obige ist der detaillierte Inhalt vonWas ist Ajax? Detaillierter Nutzungsprozess von Ajax (vollständige Beispiele enthalten). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse