Heim > Web-Frontend > js-Tutorial > So implementieren Sie Ajax in nativem JavaScript_Javascript-Kenntnisse

So implementieren Sie Ajax in nativem JavaScript_Javascript-Kenntnisse

WBOY
Freigeben: 2016-05-16 15:06:16
Original
1521 Leute haben es durchsucht

Zunächst teile ich den nativen JavaScript-Ajax-Code als Referenz. Der spezifische Inhalt ist wie folgt

var getXmlHttpRequest = function() {
  if (window.XMLHttpRequest) {
    //主流浏览器提供了XMLHttpRequest对象
    return new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    //低版本的IE浏览器没有提供XMLHttpRequest对象
    //所以必须使用IE浏览器的特定实现ActiveXObject
    return new ActiveXObject("Microsoft.XMLHttpRequest");
  }

};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function() {
  console.log(xhr.readyState);
  if (xhr.readyState === 3 && xhr.status === 200) {
    //获取成功后执行操作
    //数据在xhr.responseText
    console.log(xhr.responseText);
  }
};
xhr.open("get", "data.php", true);
xhr.send("");

Nach dem Login kopieren

Lassen Sie mich Ihnen verschiedene Möglichkeiten vorstellen, wie Sie mit Javascript natives Ajax implementieren können.
Bevor Sie Ajax implementieren, müssen Sie ein XMLHttpRequest-Objekt erstellen. Wenn der Browser, der das Objekt erstellt hat, es nicht unterstützt, müssen Sie wie folgt ein ActiveXObject erstellen:

var xmlHttp; 
function createxmlHttpRequest() { 
if (window.ActiveXObject) { 
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} else if (window.XMLHttpRequest) { 
xmlHttp=new XMLHttpRequest(); 
} 
Nach dem Login kopieren

(1) Verwenden Sie das oben erstellte xmlHttp, um die einfachste Ajax-Get-Anfrage zu implementieren:

function doGet(url){ 
// 注意在传参数值的时候最好使用encodeURI处理一下,以防出现乱码 
createxmlHttpRequest(); 
xmlHttp.open("GET",url); 
xmlHttp.send(null); 
xmlHttp.onreadystatechange = function() { 
if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) { 
alert('success'); 
} else { 
alert('fail'); 
} 
} 
} 
Nach dem Login kopieren

(2) Verwenden Sie das oben erstellte xmlHttp, um die einfachste Ajax-Post-Anfrage zu implementieren:

function doPost(url,data){ 
// 注意在传参数值的时候最好使用encodeURI处理一下,以防出现乱码 
createxmlHttpRequest(); 
xmlHttp.open("POST",url); 
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
xmlHttp.send(data); 
xmlHttp.onreadystatechange = function() { 
if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) { 
alert('success'); 
} else { 
alert('fail'); 
} 
} 
} 
Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage