Detailed example of prototype.js simple implementation of ajax function

This article mainly introduces the simple implementation of ajax function in prototype.js, and analyzes the related operation skills of prototype.js front-end ajax and background struts in the form of examples. Friends who need it can refer to it. I hope it can help everyone.

I didn’t know that prototype.js was a framework, I just thought of it as an ordinary JS file. I took it and used it, and wrote a JSP page, simply using prototype.js to achieve the AJAX effect. After using it, I found it to be very easy to use. I don’t have to write such a big pile of code anymore. Oh yeah. Let’s get back to the point. Let’s post the small code I wrote today.

1. JSP part

The most critical part of this part of the code is the change in the JS part. When prototype.js is not used, to generate an AJAX effect, there must be at least four sections. Now, only the following small section of code needs to be written.

<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>

The most important one is this paragraph:

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
 });

Note: The URL inside should either be written as an absolute path, or just take <% in front String path = request.getContextPath() ;%>, then here
"<%=path%>/test.do"

The most convenient thing about prototype.js for me is that I don’t have to judge the current browsing experience by myself If it succeeds, the OnSuccess function is called, and if it fails, the onFailure function is called. I only focus on what to do after success and failure, which simplifies the program.

2. Background struts part

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;
  }

Simple printing.

Concepts and examples of the ajax function of javascript

Json conversion of web service based on jQuery's ajax function_jquery

jQuery’s built-in AJAX function and JSON usage examples_jquery

The above is the detailed content of Detailed example of prototype.js simple implementation of ajax function. For more information, please follow other related articles on the PHP Chinese website!