Viele Menschen sind gerade erst mit Ajax in Kontakt gekommen. Dieser Artikel fasst hauptsächlich einige allgemeine Grundkenntnisse von Ajax zusammen, die für Anfänger sehr gut geeignet sind. Freunde in Not können sich darauf beziehen. Lasst uns gemeinsam lernen.
1. Einführung in Ajax, Vor- und Nachteile, Anwendungsszenarien und Technologien
Einführung in Ajax:
Asynchrones Javascript und XML (asynchrones JavaScript und XML)
Es handelt sich nicht um eine einzelne Technologie, sondern um eine Kombination einer Reihe von Technologien im Zusammenhang mit interaktiven Webanwendungen
AJAX ist eine Methode zur Erstellung schneller dynamischer Webtechnologie. AJAX ermöglicht die asynchrone Aktualisierung von Webseiten, indem im Hintergrund kleine Datenmengen mit dem Server ausgetauscht werden. Das bedeutet, dass Teile einer Webseite aktualisiert werden können, ohne dass die gesamte Seite neu geladen werden muss.
Vorteile:
Keine Seitenaktualisierung, gute Benutzererfahrung.
Asynchrone Kommunikation, schnellere Reaktionsfähigkeit.
Reduzieren Sie redundante Anfragen und reduzieren Sie die Serverlast
Basierend auf standardisierter und weithin unterstützter Technologie, kein Herunterladen von Plug-Ins oder Applets erforderlich
Nachteile:
Ajax deaktiviert die Zurück-Schaltfläche, wodurch der Zurück-Mechanismus des Browsers zerstört wird.
Es gibt bestimmte Sicherheitsprobleme.
Die Unterstützung für Suchmaschinen ist relativ schwach.
Zerstört den Ausnahmemechanismus des Programms.
Direkter Zugriff über URL nicht möglich
Ajax-Anwendungsszenario
Szenario 1 . Datenüberprüfung
Szenario 2. Daten auf Abruf abrufen
Szenario 3. Seite automatisch aktualisieren
AJAX besteht aus den folgenden fünf Teilen:
Ajax ist keine neue Technologie, sondern eine Kombination mehrerer Originaltechnologien. Es besteht aus den folgenden Technologien.
Dargestellt mit CSS und XHTML.
Verwenden Sie das DOM-Modell für Interaktion und dynamische Anzeige.
Datenaustausch- und Betriebstechnologie unter Verwendung von XML und XSLT
Verwendung von XMLHttpRequest zur asynchronen Kommunikation mit dem Server.
Verwenden Sie Javascript zum Binden und Aufrufen.
Von den oben genannten Technologien basieren alle anderen Technologien mit Ausnahme des XmlHttpRequest-Objekts auf Webstandards und sind weit verbreitet. Obwohl XMLHttpRequest noch nicht vom W3C übernommen wurde, Aber es ist bereits ein De-facto-Standard, da es derzeit von fast allen gängigen Browsern unterstützt wird
Das erste Bild veranschaulicht insbesondere den Unterschied zwischen der Struktur und der Struktur von Webanwendungen bei herkömmlichen Webanwendungen unter Verwendung der AJAX-Technologie
Der Hauptunterschied besteht eigentlich nicht in JavaScript, nicht in HTML/XHTML und CSS, sondern in der Verwendung von XMLHttpRequest, um asynchron mit dem Server zu kommunizieren und XML-Daten anzufordern
Sehen Sie sich das zweite Bild an. Im herkömmlichen Webanwendungsmodell ist die Benutzererfahrung fragmentiert. Klicken Sie auf „Zur neuen Seite gehen“ und klicken Sie erneut auf „Erneut klicken“. und warte. Nach der Einführung der AJAX-Technologie wird der Großteil der Berechnungsarbeit vom Server ausgeführt, ohne dass der Benutzer dies bemerkt
2 Ajax erstellen
Das Prinzip von Ajax besteht einfach darin, eine asynchrone Anforderung über das XmlHttpRequest-Objekt an den Server zu senden, Daten vom Server abzurufen und dann Javascript zu verwenden, um das DOM zu betreiben und die Seite zu aktualisieren. Der wichtigste Schritt dabei ist das Abrufen der Anforderungsdaten vom Server. Die native Erstellung von Ajax kann in die folgenden vier Schritte unterteilt werden:
1. Erstellen Sie ein XMLHttpRequest-Objekt
Der Kern von Ajax ist der Schlüssel zur Ajax-Implementierung. Es kann asynchron gesendet werden Anfragen, Empfangen von Antworten und Ausführen von Rückrufen erfolgen über
Alle modernen Browser (IE7+, Firefox, Chrome, Safari und Opera) verfügen über integrierte XMLHttpRequest-Objekte.
Syntax zum Erstellen von XMLHttpRequest-Objekten:
var xhr = new XMLHttpRequest();
Nach dem Login kopieren
Ältere Versionen von Internet Explorer (IE5 und IE6) verwenden ActiveX-Objekte:
var xhr = new ActiveXObject("Microsoft.XMLHTTP");Nach dem Login kopieren
Um mit allen modernen Browsern zurechtzukommen Browser, einschließlich IE5 und IE6, überprüfen Sie bitte, ob der Browser das XMLHttpRequest-Objekt unterstützt. Sofern unterstützt, wird ein XMLHttpRequest-Objekt erstellt. Wenn es nicht unterstützt wird, erstellen Sie ein ActiveXObject:
Kompatibel mit der Toolfunktion jedes Browsers zum Erstellen von Ajax
function createRequest (){
try {
xhr = new XMLHttpRequest();
}catch (tryMS){
try {
xhr = new ActiveXObject("Msxm12.XMLHTTP");
} catch (otherMS) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}catch (failed) {
xhr = null;
}
}
}
return xhr;
}Nach dem Login kopieren
2. Bereiten Sie die Anfrage vor
Initialisieren Sie das XMLHttpRequest-Objekt und Akzeptieren Sie drei Parameter:
xhr.open(method,url,async);
Nach dem Login kopieren
Der erste Parameter stellt eine Zeichenfolge vom Anforderungstyp dar und sein Wert kann GET oder POST sein.
GET-Anfrage:
xhr.open("GET",demo.php?name=tsrot&age=24,true);Nach dem Login kopieren
POST-Anfrage:
xhr.open("POST",demo.php,true);Nach dem Login kopieren
Der zweite Parameter ist die URL, an die die Anfrage gesendet werden soll.
Der dritte Parameter ist wahr oder falsch und gibt an, ob die Anforderung im asynchronen oder synchronen Modus ausgegeben wird. (Standard ist true, false wird im Allgemeinen nicht empfohlen)
3、发送请求
xhr.send();
Nach dem Login kopieren
一般情况下，使用Ajax提交的参数多是些简单的字符串，可以直接使用GET方法将要提交的参数写到open方法的url参数中，此时send方法的参数为null或为空。
GET请求：
xhr.open("GET",demo.php?name=tsrot&age=24,true);
xhr.send(null);Nach dem Login kopieren
POST请求：
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader()来添加 HTTP 头。然后在send()方法中规定您希望发送的数据：
xhr.open("POST",demo.php,true);
xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.senNach dem Login kopieren
4、处理响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
}Nach dem Login kopieren
onreadystatechange ：当处理过程发生变化的时候执行下面的函数
readyState ：ajax处理过程
0：请求未初始化（还没有调用 open() ）。
1：请求已经建立，但是还没有发送（还没有调用 send() ）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。
status属性：
responseText：获得字符串形式的响应数据
responseXML：获得 XML形式的响应数据
对象转换为JSON格式使用JSON.stringify
json转换为对象格式用JSON.parse()
返回值一般为json字符串，可以用JSON.parse(xhr.responseText)转化为JSON对象
从服务器传回的数据是json格式，这里做一个例子说明，如何利用
1、首先需要从XMLHttpRequest对象取回数据这是一个JSON串，把它转换为真正的JavaScript对象。使用JSON.parse(xhr.responseText)转化为JSON对象
2、遍历得到的数组，向DOM中添加新元素
function example(responseText){
var salep= document.getElementById("sales");
var sales = JSON.parse(responseText);
for(var i=0;i<sales.length;i++){
var sale = sales[i];
var p = document.createElement("p");
p.setAttribute("class","salseItem");
p.innerHTML = sale.name + sale.sales;
salsep.appendChild(p);
}
}Nach dem Login kopieren
5、完整例子
var xhr = false;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
};
if(xhr) {//如果xhr创建失败，还是原来的false
xhr.open("GET","./data.json",true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(JSON.parse(xhr.responseText).name);
}
}
}Nach dem Login kopieren
data.json
{
"name":"tsrot",
"age":24
}Nach dem Login kopieren
这个过程是一定要记在脑子里的
function ajax(url, success, fail){
// 1. 创建连接
var xhr = null;
xhr = new XMLHttpRequest()
// 2. 连接服务器
xhr.open('get', url, true)
// 3. 发送请求
xhr.send(null);
// 4. 接受请求
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
success(xhr.responseText);
} else { // fail
fail && fail(xhr.status);
}
}
}
}Nach dem Login kopieren
XMLHttpRequest 在异步请求远程数据时的工作流程
谈谈JSONP
要访问web服务器的数据除了XMLHttpRequest外还有一种方法是JSONP
如果HTML和JavaScript与数据同时在同一个机器上，就可以使用XMLHttpRequest
什么是JSONP？
JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）
JSONP有什么用？
由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求
如何使用JSONP？
在客户端声明回调函数之后，客户端通过script标签向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回调函数
用XMLHttpRequest时，我们得到一个字符串；要用JSON.parse把字符串转化成对象，使用jsonp时，script标志会解析并执行返回的代码，等我们处理数据时，已经是一个JavaScript对象了
简单实例
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript">
function jsonpCallback(result) {
alert(result.a);
alert(result.b);
alert(result.c);
for(var i in result) {
alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
}
}
</script>
<script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>
<!--callback参数指示生成JavaScript代码时要使用的函数jsonpcallback-->Nach dem Login kopieren
注意浏览器的缓存问题
三、 jQuery中的Ajax
jQuery中的ajax封装案例
//ajax请求后台数据
var btn = document.getElementsByTagName("input")[0];
btn.onclick = function(){
ajax({//json格式
type:"post",
url:"post.php",
data:"username=poetries&pwd=123456",
asyn:true,
success:function(data){
document.write(data);
}
});
}
//封装ajax
function ajax(aJson){
var ajx = null;
var type = aJson.type || "get";
var asyn = aJson.asyn || true;
var url = aJson.url; // url 接收 传输位置
var success = aJson.success;// success 接收 传输完成后的回调函数
var data = aJson.data || '';// data 接收需要附带传输的数据
if(window.XMLHttpRequest){//兼容处理
ajx = new XMLHttpRequest();//一般浏览器
}else
{
ajx = new ActiveXObject("Microsoft.XMLHTTP");//IE6+
}
if (type == "get" && data)
{
url +="/?"+data+"&"+Math.random();
}
//初始化ajax请求
ajx.open( type , url , asyn );
//规定传输数据的格式
ajx.setRequestHeader('content-type','application/x-www-form-urlencoded');
//发送ajax请求（包括post数据的传输）
type == "get" ?ajx.send():ajx.send(aJson.data);
//处理请求
ajx.onreadystatechange = function(aJson){
if(ajx.readState == 4){
if (ajx.status == 200 && ajx.status<300)//200是HTTP 请求成功的状态码
{
//请求成功处理数据
success && success(ajx.responseText);
}else{
alert("请求出错"+ajx.status);
}
}
}Nach dem Login kopieren
jQuery中的Ajax的一些方法
jquery对Ajax操作进行了封装，在jquery中的$.ajax()方法属于最底层的方法，第2层是load() 、$.get() 、$.post();第3层是$.getScript() 、$.getJSON() ，第2层使用频率很高
load()方法
load()方法是jquery中最简单和常用的ajax方法，能载入远程HTML代码并插入DOM中 结构为：load(url,[data],[callback])
使用url参数指定选择符可以加载页面内的某些元素 load方法中url语法：url selector 注意：url和选择器之间有一个空格
传递方式
load()方法的传递方式根据参数data来自动指定，如果没有参数传递，则采用GET方式传递，反之，采用POST
回调参数
必须在加载完成后才执行的操作，该函数有三个参数 分别代表请求返回的内容、请求状态、XMLHttpRequest对象
只要请求完成，回调函数就会被触发
$("#testTest").load("test.html",function(responseText,textStatus,XMLHttpRequest){
//respnoseText 请求返回的内容
//textStatus 请求状态 ：sucess、error、notmodified、timeout
//XMLHttpRequest
})Nach dem Login kopieren
load方法参数
| 参数名称 |
类型 |
说明 |
| url |
String |
请求HTML页面的URL地址 |
| data(可选) |
Object |
发送至服务器的key / value数据 |
| callback(可选) |
Function |
请求完成时的回调函数，无论是请求成功还是失败 |
$.get()和$.post()方法
load()方法通常用来从web服务器上获取静态的数据文件。在项目中需要传递一些参数给服务器中的页面，那么可以使用$.get()和$.post()或$.ajax()方法
注意：$.get()和$.post()方法是jquery中的全局函数
$.get()方法
$.get()方法使用GET方式来进行异步请求
结构为：$.get(url,[data],callback,type)
如果服务器返回的内容格式是xml文档，需要在服务器端设置Content-Type类型 代码如下： header("Content-Type:text/xml:charset=utf-8") //php
$.get()方法参数解析
| 参数 |
类型 |
说明 |
| url |
String |
请求HTML页的地址 |
| data(可选) |
Object |
发送至服务器的key/ value 数据会作为QueryString附加到请求URL中 |
| callback(可选) |
Function |
载入成功的回调函数（只有当Response的返回状态是success才调用该方法） |
| type(可选) |
String |
服务器返回内容的格式，包括xml、html、script、json、text和_default |
$.post()-Methode
Sie hat die gleiche Struktur und Verwendung wie die $.get()-Methode, mit den folgenden Unterschieden
GET-Anfrage Die Parameter werden nach der URL von Zhang Nai übergeben, während die POST-Anfrage als Entitätsinhalt der HTTP-Nachricht an den Webserver gesendet wird. In der Ajax-Anfrage ist dieser Unterschied für den Benutzer unsichtbar
Bei der GET-Methode gibt es eine Größenbeschränkung für die übertragenen Daten (normalerweise nicht größer als 2 KB), während die mit der POST-Methode übertragene Datenmenge viel größer ist als bei der GET-Methode (theoretisch nicht begrenzt)
GET Die auf diese Weise angeforderten Daten werden vom Browser zwischengespeichert, sodass andere die Daten aus dem Browserverlauf lesen können, z. B. Kontonummer und Passwort. In einigen Fällen bringt die GET-Methode schwerwiegende Sicherheitsprobleme mit sich, und POST kann diese Probleme relativ vermeiden.
Die von der GET- und POST-Methode übergebenen Daten können nicht auf der Serverseite abgerufen werden. Verwenden Sie in PHP $_GET[], um die GET-Methode abzurufen; verwenden Sie $_POST[], um die POST-Methode abzurufen; beide Methoden können $_REQUEST[] verwenden, um
zu erhalten Zusammenfassung
Verwenden Sie die Methoden „load()“, „$.get()“ und „$.post()“, um einige reguläre Ajax-Programme abzuschließen. Wenn Sie komplexe Ajax-Programme benötigen, müssen Sie die Methode „$.ajax()“ verwenden 🎜 >
$.ajax()-Methode
$.ajax()-Methode ist die Ajax-Implementierung der niedrigsten Ebene von jquery. Ihre Struktur ist $.ajax(options)
Diese Methode hat nur einen Parameter, aber dieses Objekt enthält die für die $.ajax()-Methode erforderlichen Anforderungseinstellungen und Rückruffunktionen. Die Parameter sind im Schlüssel/Wert vorhanden und alle Parameter sind optional
Parsing allgemeiner Parameter in der $.ajax()-Methode
| Parameter | TypBeschreibung |
| URL |
String td > |
(Standard ist die aktuelle Seitenadresse) Die Adresse zum Senden der Anfrage |
| Typ |
String |
Anfragemethode (POST oder GET) Der Standardwert ist GET |
| timeout |
Number |
Legen Sie das Anforderungszeitlimit (Millisekunden) fest |
| dataType |
String |
Der Typ, der voraussichtlich vom Server zurückgegeben wird. Die verfügbaren Typen sind wie folgt
| 参数 |
类型 |
说明 |
| url |
String |
(默认为当前页地址)发送请求的地址 |
| type |
String |
请求方式（POST或GET）默认为GET |
| timeout |
Number |
设置请求超时时间（毫秒） |
| dataType |
String |
预期服务器返回的类型。可用的类型如下
xml:返回XML文档，可用jquery处理
html:返回纯文本的HTML信息，包含的script标签也会在插入DOM时执行
script：返回纯文本的javascript代码。不会自动缓存结果，除非设置cache参数。注意：在远程请求时，所有的POST请求都将转为GET请求
json:返回JSON数据
jsonp:JSONP格式，使用jsonp形式调用函数时，例如：myurl?call back=?,jquery将自动替换后一个？为正确的函数名，以执行回调函数
text:返回纯文本字符串 |
| beforeSend |
Function |
发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次Ajax请求。XMLHttpRequest对象是唯一的参数
function(XMLHttpRequest){
this;//调用本次Ajax请求时传递的options参数
} |
| complete |
Function |
请求完成后的回调函数（请求成功或失败时都调用）
参数：XMLHttpRequest对象和一个描述成功请求类型的字符串
function(XMLHttpRequest,textStatus){
this;//调用本次Ajax请求时传递的options参数
} |
| success |
Function |
请求成功后调用的回调函数，有两个参数
(1)由服务器返回，并根据dataTyppe参数进行处理后的数据
(2)描述状态的字符串
function(data,textStatus){
//data可能是xmlDoc、``jsonObj、html、text等
this;//调用本次Ajax请求时传递的options参数
} |
| error |
Function |
请求失败时被调用的函数 |
| global |
Boolean |
默认为true。表示是否触发全局Ajax事件，设置为false将不会触发。AjaxStart或AjaxStop可用于控制各种Ajax事件 |
xml: Gibt ein XML-Dokument zurück, das mit jquery verarbeitet werden kann
html: Gibt HTML-Informationen im Klartext zurück, und das enthaltene Skript-Tag wird auch ausgeführt, wenn es in das DOM eingefügt wird
Skript: Gibt Klartext-Javascript-Code zurück. Ergebnisse werden nicht automatisch zwischengespeichert, es sei denn, der Cache-Parameter ist festgelegt. Hinweis: Bei Remote-Anfragen werden alle POST-Anfragen in GET-Anfragen umgewandelt
json: JSON-Daten zurückgeben
jsonp: JSONP-Format. Wenn Sie eine Funktion im JSONP-Format aufrufen, zum Beispiel: myurl?call back=?, ersetzt jquery automatisch die letztere? ist der richtige Funktionsname zum Ausführen der Callback-Funktion
text: Gibt eine Nur-Text-Zeichenfolge zurück
|
| beforeSend |
Funktion |
Sie können die Funktion des XMLHttpRequest-Objekts ändern, bevor Sie die Anfrage senden , wie zum Beispiel das Hinzufügen selbstdefinierter HTTP-Header. Wenn in beforeSend false zurückgegeben wird, kann diese Ajax-Anfrage abgebrochen werden. Das XMLHttpRequest-Objekt ist der einzige Parameter
Funktion(XMLHttpRequest){
This;//Der Optionsparameter, der beim Aufruf dieser Ajax-Anfrage übergeben wird
}
|
| complete |
Funktion |
Rückruffunktion nach Abschluss der Anfrage (wird aufgerufen, wenn die Anfrage erfolgreich ist oder fehlschlägt)
Parameter: XMLHttpRequest-Objekt und eine Zeichenfolge, die den erfolgreichen Anforderungstyp beschreibt
Funktion(XMLHttpRequest,textStatus){
This;//Der Optionsparameter, der beim Aufruf dieser Ajax-Anfrage übergeben wird
}
|
| success |
Funktion |
Die nach einer erfolgreichen Anfrage aufgerufene Callback-Funktion hat zwei Parameter
(1) Vom Server zurückgegebene und gemäß dem dataType-Parameter verarbeitete Daten
(2) Zeichenfolge, die den Status beschreibt
Function(data,textStatus){
//Daten können xmlDoc, „jsonObj, html, Text usw.“ sein.
This;//Der Optionsparameter, der beim Aufruf dieser Ajax-Anfrage übergeben wird
|
| Fehler |
Funktion |
Funktion wird aufgerufen, wenn die Anfrage fehlschlägt |
global| Boolean |
Der Standardwert ist true. Gibt an, ob das globale Ajax-Ereignis ausgelöst werden soll. Wenn es auf „false“ gesetzt ist, wird es nicht ausgelöst. AjaxStart oder AjaxStop können zur Steuerung verschiedener Ajax-Ereignisse verwendet werden |
Verwandte Empfehlungen: Beispiele zur Erläuterung der Grundlagen von HTTP-Nachrichten und Ajax Ajax-GrundlagenJquery Ajax Basic Tutorial_jquery
Das obige ist der detaillierte Inhalt vonZusammenfassung von Ajax für Anfänger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
