Maison > interface Web > js tutoriel > Résumé du noyau XMLHttpRequest d'Ajax

Résumé du noyau XMLHttpRequest d'Ajax

亚连
Libérer: 2018-05-25 12:00:07
original
1307 Les gens l'ont consulté

Cet article résume principalement les connaissances pertinentes de XMLHttpRequest, le contenu de base d'Ajax, pour tout le monde. Il est très détaillé et recommandé à tout le monde. Si vous en avez besoin, veuillez vous y référer.

Ajax : "JavaScript asynchrone et XML", une technologie complète : utilisation de l'objet JavaScript XMLHttpRequest pour l'échange de données asynchrone ; JavaScript exécutant DOM pour obtenir des effets dynamiques ; utilisation de XHTML+CSS pour l'expression des informations XML et XSLT ; Cet article se concentre sur l'utilisation de l'objet XMLHttpRequest pour l'échange de données asynchrones avec le serveur.

Comment utiliser
Cinq étapes pour utiliser XMLHttpRequest :

1. Créez l'objet
2. Enregistrez la fonction de rappel
3. .Utiliser open La méthode définit les informations de base pour l'interaction avec le serveur ;
4. Définit les données à envoyer et commence à interagir avec le serveur
5. Implémente la fonction de rappel.

Puisque cinq étapes sont requises à chaque fois que l'objet XMLHttpRequest est utilisé, l'utilisation de l'objet peut être encapsulée dans un fichier js, et certains paramètres peuvent être transmis et ses méthodes peuvent être utilisées pour compléter le fonctions correspondantes. L'implémentation est la suivante :

//En utilisant la méthode d'encapsulation, les gens fournissent uniquement les requêtes http, les adresses URL, les données, les méthodes de rappel de réussite et d'échec
//1. l'objet XMLHttpRequest

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
Copier après la connexion

Problèmes d'extension

1. Cache du navigateur
2. Caractères chinois tronqués
3. Accès inter-domaines

Pour les questions 1. Le problème 3 peut être résolu en modifiant l'adresse URL. Le problème 1 peut être résolu en ajoutant un horodatage à la fin de l'adresse URL, et le problème 3 peut être résolu via un proxy. Ajoutez simplement le jugement correspondant avant d'exécuter la troisième étape de send() :

// Résoudre la conversion du cache : ajouter l'horodatage

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; 
    }
Copier après la connexion

Correspondant à la question 3 Implémentation du serveur proxy :

/** 
    * 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"));
Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Résoudre le problème de la perte de cookies de données de requête inter-domaines ajax

JavaScript basé sur Ajax pour obtenir la non-actualisation de la page Web Afficher dynamiquement le contenu du fichier sur

Utilisez ajax pour modifier le contenu de la page et l'URL de la barre d'adresse sans actualiser

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal