Was ist die allgemeine Syntax von AJAX?

Wir alle wissen, dass Ajax mittlerweile eine sehr verbreitete Technologie ist. In diesem Artikel werden hauptsächlich das Implementierungsprinzip von Ajax in nativem JS sowie die Konzepte und Prozesse von XMLHttpRequest und Promise vorgestellt.

Ajax ist derzeit eine weit verbreitete Technologie und auch eine Technologie, die es wert ist, diskutiert und erforscht zu werden. In diesem Artikel erfahren Sie mehr über die neue und alte Syntax von Ajax, basierend auf dem Entwicklungsprozess von Ajax und wie es in verschiedenen Bibliotheks-Frameworks verwendet wird.

Einführung in Ajax

Ajax steht für „Asynchronous Javascript And XML“, was „asynchrones JavaScript und XML“ bedeutet. Über Ajax können wir Anfragen zur Dateninteraktion an den Server senden, ohne die Seite zu blockieren, was auch als asynchrone Datenübertragung verstanden werden kann. Mit Hilfe von Ajax muss unsere Webseite nur teilweise aktualisiert werden, um die Datenanzeige zu aktualisieren, wodurch die Menge unnötiger Daten reduziert, die Benutzererfahrung erheblich verbessert, die Wartezeit des Benutzers verkürzt und die Webanwendung kleiner und schneller wird. Freundlicher.

Natürlich handelt es sich bei den oben genannten Inhalten um alltägliche Inhalte. Als qualifizierter Entwickler sind Sie hier nur mit einer kurzen Einführung vertraut.

Natives Ajax

Grundsätzlich unterstützen alle modernen Browser die native Ajax-Funktion. Hier finden Sie eine detaillierte Einführung, wie wir natives JS verwenden, um Ajax-Anfragen zu initiieren und zu verarbeiten.

Holen Sie sich das XMLHttpRequest-Objekt

var xhr = new XMLHttpRequest(); // Holen Sie sich das integrierte XMLHttpRequest-Objekt des Browsers

Wenn Ihre Projektanwendung niedrigere Versionen von nicht berücksichtigt IE, dann können Sie die obige Methode direkt verwenden. Alle modernen Browser (Firefox, Chrome, Safari und Opera) verfügen über integrierte XMLHttpRequest-Objekte. Wenn Sie mit älteren Versionen des IE (IE5, IE6) kompatibel sein müssen, können Sie ActiveX-Objekte verwenden:

var xhr;
if (window.XMLHttpRequest) {
  xhr=new XMLHttpRequest();
} else if (window.ActiveXObject) {  // 兼容老版本浏览器
  xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

Parameterkonfiguration

Mit dem XMLHttpRequest-Objekt müssen wir auch konfigurieren Um die Dateninteraktion abzuschließen, verwenden Sie die offene Methode:

var xhr;
if (window.XMLHttpRequest) {
  xhr=new XMLHttpRequest();
} else if (window.ActiveXObject) {
  xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
  xhr.open('GET', '/test/', true); // 以GET请求的方式向'/test/'路径发送异步请求
}

Die offene Methode erstellt eine neue http-Anfrage für uns, wobei der erste Parameter die Anfragemethode ist, normalerweise „GET“ oder „ POST'; Der zweite Parameter ist die Anforderungs-URL; der dritte Parameter gibt an, ob sie asynchron ist, und der Standardwert ist true.

Anfrage senden

Nachdem wir die grundlegenden Parameterinformationen konfiguriert haben, rufen wir direkt die Sendemethode auf, um die Anfrage zu senden. Der Code lautet wie folgt:

var xhr;
if (window.XMLHttpRequest) {
  xhr=new XMLHttpRequest();
} else if (window.ActiveXObject) {
  xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
  xhr.open('GET', '/test/', true); 
  xhr.send(); // 调用send方法发送请求
}

Was muss Hierbei ist zu beachten, dass wir, wenn die GET-Methode zum Übergeben von Parametern verwendet wird, die Parameter direkt nach der URL einfügen können, z. B. „/test/?name=luozh&size=12“, wenn wir die POST-Methode verwenden B. in der Sendemethode geschrieben werden:

xhr.open('POST', '/test/', true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 将请求头设置为表单方式提交
xhr.send('name=luozh&size=12');

Es wird schließlich in Form von Formulardaten geliefert:

Wenn der Anforderungsheader nicht festgelegt ist, sendet natives Ajax Daten Unter Verwendung des Inhaltstyps „text/plain;charset=UTF-8“ sieht unsere endgültige Übertragungsform standardmäßig wie folgt aus:

Offensichtlich ist dies nicht das von der Datei erwartete Datenformat Server, wir können es so schreiben:

xhr.open('POST', '/test/', true);
xhr.send(JSON.stringify({name: 'luozh', size: 12}));

Auf diese Weise können wir JSON direkt übergeben. Die Zeichenfolge wird vom Hintergrund verarbeitet, und natürlich kann der Hintergrund entsprechend konfiguriert werden.

Überwachungsstatus

Nach dem Senden der Ajax-Anfrage müssen wir den vom Server zurückgegebenen Status überwachen und entsprechend verarbeiten. Hier müssen wir die Methode onreadystatechange verwenden. Der Code lautet wie folgt:

var xhr;
if (window.XMLHttpRequest) {
  xhr=new XMLHttpRequest();
} else if (window.ActiveXObject) {
  xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
  xhr.open('GET', '/test/', true);   // 以GET请求的方式向'/test/'路径发送异步请求
  xhr.send();
  xhr.onreadystatechange = function () {  // 利用onreadystatechange监测状态
    if (xhr.readyState === 4) {  // readyState为4表示请求响应完成
      if (xhr.status === 200) {  // status为200表示请求成功
        console.log('执行成功');
      } else {
        console.log('执行出错');
      }  
    }
  }
}

Oben verwenden wir onreadystatechange, um den Status zu überwachen, und intern verwenden wir readyState, um den aktuellen Status abzurufen. readyState hat insgesamt 5 Stufen. Wenn es 4 ist, bedeutet dies, dass der Antwortinhalt analysiert wurde und auf dem Client aufgerufen werden kann. Wenn readyState 4 ist, erhalten wir den Statuscode über status. Wenn der Statuscode 200 ist, wird der Erfolgscode ausgeführt, andernfalls wird der Fehlercode ausgeführt.

Natürlich können wir onload verwenden, um die Situation zu ersetzen, in der onreadystatechange gleich 4 ist, da onload nur aufgerufen wird, wenn der Status 4 ist. Der Code lautet wie folgt

xhr.onload = function () {  // 调用onload
  if (xhr.status === 200) {  // status为200表示请求成功
    console.log('执行成功');
  } else {
    console.log('执行出错');
  }  
}

Allerdings Es ist zu beachten, dass IE die Unterstützung für das Onload-Attribut nicht freundlich ist.

Zusätzlich zum Onload gibt es auch:

1.onloadstart
2.onprogress
3.onabort
4.ontimeout
5.onerror
6.onloadend

und andere Veranstaltungen, bei denen Interessierte ihre Nützlichkeit persönlich üben können.

Das Obige ist der allgemeine Code für native Ajax-Anfragedaten.

Ajax in anderen Bibliotheksframeworks

Ajax in jQuery

jQuery ist die Bibliothek mit den meisten Benutzern und ihr Ajax ist gut gekapselt. Das native Ajax Der Code wurde hinsichtlich Kompatibilität und Benutzerfreundlichkeit erheblich verbessert, wodurch Ajax-Aufrufe sehr einfach werden. Das Folgende ist ein einfacher jQuery-Ajax-Code:

$.ajax({
  method: 'GET', // 1.9.0本版前用'type'
  url: "/test/",
  dataType: 'json'
})
.done(function() {
  console.log('执行成功');
})
.fail(function() {
  console.log('执行出错');
})

Anders als bei nativem Ajax ist der Standardinhaltstyp in jQuery „application/x-www-form-urlencoded=UTF-8“, If Wenn Sie mehr über jQuery Ajax erfahren möchten, können Sie zur offiziellen Dokumentation gehen: http://api.jquery.com/jquery.ajax/

Ajax in Vue.js

Als Das derzeit beliebte Front-End-Framework Vue.js enthält eigentlich keine Ajax-Funktionalität, sondern muss im Projekt in Form eines Plug-Ins referenziert werden Im Folgenden finden Sie die Anforderung für die Vue-Ressource:

Vue.http.get('/test/').then((response) => {
  console.log('执行成功');
}, (response) => {
  console.log('执行出错');
});

3. Ajax in Angular.js

Das Ajax in Angular.js bezieht sich hier hauptsächlich auf die 1.×-Version von Angular , da Angular2 derzeit in der in verwendeten Produktionsumgebung nicht empfohlen wird.

var myApp = angular.module('myApp',[]);
var myCtrl = myApp.controller('myCtrl',['$scope','$http',function($scope, $http){
  $http({
    method: 'GET',
    url: '/test/',
    headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'} 
  }).success(function (data) {
    console.log('执行成功');
  }).error(function () {
    console.log('执行出错');
  });
}]);

在Angular中，我们需要在控制器上注册一个$http的事件，然后才能在内部执行Ajax。Angular的Ajax默认的Content-type是'application/json;charset=UTF-8'，所以如果想用表单的方式提交还需设置下headers属性。

4.React中的Ajax

在React中我比较推荐使用fetch来请求数据，当然其不仅适用于React，在任何一种框架如上面的Vue、Angular中都可以使用，因为其已经被目前主流浏览器所支持，至于其主要功能和用法，我在下面会做下讲解。

Fetch API

Fetch API 是基于 Promise 设计，由于Promise的浏览器兼容性问题及Fetch API本身的兼容问题，一些浏览器暂时不支持Fetch API，浏览器兼容图如下：

当然我们可以通过使用一些插件来解决兼容性问题，比如：fetch-polyfill、es6-promise、fetch-ie8等。

使用Fetch我们可以非常便捷的编写Ajax请求，我们用原生的XMLHttpRequst对象和Fetch来比较一下：

XMLHttpRequst API
// XMLHttpRequst API
var xhr = new XMLHttpRequest();
xhr.open('GET', '/test/', true);
xhr.onload = function() {
  console.log('执行成功');
};
xhr.onerror = function() {
  console.log('执行出错');
};
xhr.send();
Fetch API 
fetch('/test/').then(function(response) {
  return response.json();
}).then(function(data) {
  console.log('执行成功');
}).catch(function(e) {
  console.log('执行出错');
});

可以看出使用Fetch后我们的代码更加简洁和语义化，链式调用的方式也使其更加流畅和清晰。随着浏览器内核的不断完善，今后的XMLHttpRequest会逐渐被Fetch替代。关于Fetch的详细介绍可以移步：https://segmentfault.com/a/1190000003810652

跨域Ajax

介绍了各种各样的Ajax API，我们不能避免的一个重要问题就是跨域，这里重点讲解下Ajax跨域的处理方式。

处理Ajax跨域问题主要有以下4种方式：

1.利用iframe

2.利用JSONP

3.利用代理

4.利用HTML5提供的XMLHttpRequest Level2

第1和第2种方式大家应该都非常熟悉，都属于前端的活，这里就不做介绍了，这里主要介绍第3和第4种方式。

利用代理的方式可以这样理解：

通过在同域名下的web服务器端创建一个代理：

北京服务器(域名:www.beijing.com)

上海服务器(域名：www.shanghai.com)

比如在北京的web服务器的后台(www.beijing.com/proxy-shanghaiservice.php)来调用上海服务器(www.shanghai.com/services.php)的服务，然后再把访问结果返回给前端，这样前端调用北京同域名的服务就和调用上海的服务效果相同了。

利用XMLHttpRequest Level2的方式需要后台将请求头进行相应配置：

// php语法
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET,POST');

以上的*号可以替换成允许访问的域名，*表示所有域名都可以访问。

由此可见，第3和第4种方式主要是后台的活，前端只需调用就可以。

总结

无论Ajax的语法多么多变，无论库和框架如何封装Ajax，其只是一种实现异步数据交互的工具，我们只需理解原生JS中Ajax的实现原理，了解XMLHttpRequest及promise的概念和流程，便可以轻松的在数据异步交互的时代游刃有余。

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

CSS的文本字体颜色如何设置

css里的font文字怎么设置

 Css3中的transform 渐变属性怎么使用

Das obige ist der detaillierte Inhalt vonWas ist die allgemeine Syntax von AJAX?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!