Exemple détaillé d'implémentation simple de prototype.js de la fonction ajax

Cet article présente principalement l'implémentation simple de la fonction ajax dans prototype.js et analyse les compétences opérationnelles associées de l'ajax frontal et des supports d'arrière-plan de prototype.js sous forme d'exemples. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

À l'origine, je ne savais pas que prototype.js était un framework, je pensais juste que c'était un fichier JS ordinaire, je l'ai pris et je l'ai utilisé, et j'ai écrit une page JSP, en utilisant simplement prototype.js pour réaliser l'objectif. Effet AJAX. Après l'avoir utilisé, je l'ai trouvé très simple à utiliser. Je n'ai plus besoin d'écrire un si gros tas de code. Oh ouais, revenons au fait, publions le petit code que j'ai écrit aujourd'hui. .

1. Partie JSP

La partie la plus critique de cette partie du code est le changement dans la partie JS. Lorsque prototype.js n'est pas utilisé, générer un effet AJAX nécessite au moins. quatre sections. Désormais, seule la petite section de code suivante est nécessaire.

<script type="text/javascript">
function getnodelist(){
  function onSuccess(request)
  {
      alert("success");
     $("result").innerHTML = "abc"+request.responseText ;
  }
  function onComplete(request){
  }
  function onFailure(request){
     alert("failure");
     $("result").innerHTML = request.responseText ;
  }
  var paras = "" ;
  var ajax = new Ajax.Request(
     "http://localhost:8080/LoginDemo/test.do",
    {
    method: 'post',
    parameters:paras ,
    onSuccess: onSuccess,
    onComplete:onComplete,
    onFailure:onFailure
   }
 );
}
</script>

La plus importante est ce paragraphe :

var ajax = new Ajax.Request(   //新生成一个AJAX.Request对象.
 "http://localhost:8080/LoginDemo/test.do", //请求的servlet地址.即URL
 {                                //参数
  method: 'post',
  parameters:paras ,
  onSuccess: onSuccess,       //这些函数和上面三个函数相对应.
  onComplete:onComplete,
  onFailure:onFailure
 });

Remarque : l'URL à l'intérieur doit être écrite. comme chemin absolu, ou prenez simplement <% String path = request devant .getContextPath();%>, puis ici
"<%=path%>/test.do"

La chose la plus pratique pour moi avec prototype.js est que je n'ai pas à le faire moi-même. Pour déterminer l'état du navigateur actuel, s'il réussit, appelez la fonction OnSuccess, s'il échoue, appelez la fonction onFailure, et je me concentre uniquement sur ce qu'il faut faire après le succès et l'échec, simplifiant le programme

2. Partie des entretoises d'arrière-plan

public ActionForward execute(
    ActionMapping mapping,
    ActionForm form,
    HttpServletRequest request,
    HttpServletResponse response) {
    // TODO Auto-generated method stub
    try{
      System.out.println("in action");
     response.setContentType("text/html;charset=gb2312");
      ServletOutputStream out = response.getOutputStream();
      out.print("hello slf!");
      System.out.println("out");
    }catch(Exception e)
    {
      e.printStackTrace();
    }
    return null;
  }

Impression simple.

Concepts. et des exemples de la fonction ajax de javascript

Implémentation d'un service Web basé sur la fonction ajax de jQuery json conversion_jquery

Fonction AJAX intégrée de jQuery et exemples d'utilisation de JSON_jquery

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!