Heim > Web-Frontend > js-Tutorial > Hauptteil

Ajax-Kern-XMLHttpRequest-Zusammenfassung

亚连
Freigeben: 2018-05-25 12:00:07
Original
1205 Leute haben es durchsucht

Dieser Artikel fasst hauptsächlich das relevante Wissen über XMLHttpRequest, den Kerninhalt von Ajax, zusammen. Er ist sehr detailliert und wird jedem empfohlen.

Ajax: „Asynchronous JavaScript and XML“, eine umfassende Technologie: Verwendung des JavaScript-Objekts XMLHttpRequest für den asynchronen Datenaustausch; Verwendung von JavaScript zur Erzielung dynamischer Effekte für XML- und XSLT-Ausdrucksdaten; Dieser Artikel konzentriert sich auf die Verwendung des XMLHttpRequest-Objekts für den asynchronen Datenaustausch mit dem Server.

So verwenden Sie
Fünf Schritte zur Verwendung von XMLHttpRequest:

1. Erstellen Sie das Objekt
2. Registrieren Sie die Rückruffunktion; . Die offene Methode legt die grundlegenden Informationen für die Interaktion mit dem Server fest.
4. Legt die zu sendenden Daten fest und beginnt mit der Interaktion mit dem Server.
5. Implementiert die Rückruffunktion.

Da jedes Mal, wenn das XMLHttpRequest-Objekt verwendet wird, fünf Schritte erforderlich sind, kann die Verwendung des Objekts in einer JS-Datei gekapselt werden, einige Parameter können übergeben werden und seine Methoden können zum Abschließen verwendet werden Die entsprechenden Funktionen lauten wie folgt:

//Mithilfe der Kapselungsmethode stellen Benutzer nur HTTP-Anfragen, URL-Adressen, Daten sowie Erfolgs- und Fehlerrückrufmethoden bereit

//1 Definieren Sie die Konstruktionsmethode von das XMLHttpRequest-Objekt

var MyXMLHttpRequest =function(){ 
    var xmlhttprequest; 
    if(window.XMLHttpRequest){ 
    //IE7,IE8,FireFox,Mozillar,Safari,Opera 
    //alert("IE7,IE8,FireFox,Mozillar,Safari,Opera"); 
    xmlhttprequest = new XMLHttpRequest(); 
    //解决浏览器在服务器端响应由于没有Text头的时候可能无法工作的问题 
    if(xmlhttprequest.overrideMimeType){ 
    xmlhttprequest.overrideMimeType("text/xml"); 
    } 
    }else if(window.ActiveXObject){ 
    //IE6,IE5.5,IE5 
    alert("IE6,IE5.5,IE5"); 
    var activexName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; 
    for (var n=0;n
Nach dem Login kopieren

Erweiterungsprobleme

1. Browser-Cache

2. Chinesische verstümmelte Zeichen
3. Domänenübergreifender Zugriff

Für Frage 1 kann Problem 3 durch Ändern der URL-Adresse gelöst werden. Problem 1 kann durch Hinzufügen eines Zeitstempels am Ende der URL-Adresse gelöst werden, und Problem 3 kann durch einen Proxy gelöst werden. Fügen Sie einfach das entsprechende Urteil hinzu, bevor Sie den dritten Schritt in send() ausführen:

// Lösen Sie die Cache-Konvertierung: Zeitstempel hinzufügen


if(url.indexOf("?") >= 0 ){ 
    url = url + "&t=" + (new Date())。valueOf(); 
    } else { 
    url = url + "?t=" + (new Date())。valueOf(); 
    } 
    //解决跨域的问题 
    if(url.indexOf("http://") >= 0) { 
    url.replace("?","&"); 
    url = "Proxy?url=" + url; 
    }
Nach dem Login kopieren

Frage 3 entspricht dem Proxy-Dienst Endimplementierung:

/** 
    * Handles the HTTP GET method. 
    * 
    * @param request servlet request 
    * @param response servlet response 
    * @throws ServletException if a servlet-specific error occurs 
    * @throws IOException if an I/O error occurs 
    */ 
    @Override 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) 
    throws ServletException, IOException { 
    //获取参数,最后得到请求url地址类似于:url = http://192.168…/AJAX/AJAXServer?aa=11&bb=22&cc=33 
    StringBuilder url = new StringBuilder(); 
    url.append(request.getParameter("url")); 
    //获取访问的跨域地址url = http://192.168…/AJAX/AJAXServer 
    Enumeration enu = request.getParameterNames(); 
    boolean flag = false;       //定义标志变量,表示是否为拼接的第一个参数 
    while(enu.hasMoreElements()){ 
    String paramName = (String) enu.nextElement(); 
    if(!paramName.equals("url")){ 
    String paramValue = request.getParameter(paramName); 
    paramValue = URLEncoder.encode(paramValue,"utf-8"); 
    if(!flag){ 
    url.append("?")。append(paramName)。append("=")。append(paramValue); 
    flag = true; 
    } else { 
    url.append("&")。append(paramName)。append("=")。append(paramValue); 
    } 
    } 
    } 
    response.setContentType("text/html;charset=utf-8"); 
    PrintWriter out = response.getWriter(); 
    if(url != null && url.length() > 0){ 
    URL connectionUrl = new URL(url.toString()); 
    BufferedReader reader = new BufferedReader(new InputStreamReader(connectionUrl.openStream(),"utf-8"));
Nach dem Login kopieren

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Lösung des Problems des Verlusts von Ajax-Cookies für domänenübergreifende Anforderungsdaten

JavaScript basierend auf Ajax erreichen, dass die Webseite nicht aktualisiert wird. Dateiinhalt dynamisch anzeigen auf

Verwenden Sie Ajax, um Seiteninhalt und Adressleisten-URL ohne Aktualisierung zu ändern

Das obige ist der detaillierte Inhalt vonAjax-Kern-XMLHttpRequest-Zusammenfassung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!