프로토타입.js의 간단한 Ajax 기능 구현에 대한 자세한 예

이 글은 간단하게 Ajax 기능을 구현하기 위해 프로토타입.js를 주로 소개하고, 프로토타입의 프론트엔드 Ajax와 백그라운드 스트럿의 관련 운영 스킬을 예제 형태로 분석한 내용이니, 필요한 친구들이 참고하면 좋겠습니다. 모두에게 도움이 될 수 있습니다.

Prototype.js가 원래 프레임워크인지 몰랐고, 그냥 일반 JS 파일인 줄 알고 그것을 가져와서 JSP 페이지를 작성했는데, 간단히 AJAX 효과를 얻기 위해 프로토타입.js를 사용했습니다. 그것을 사용하면 사용하기가 매우 쉽고 더 이상 그렇게 큰 코드를 작성할 필요가 없습니다. 아, 그럼 다시 요점으로 돌아가서 오늘 작성한 작은 코드를 게시해 보겠습니다.

1.

이 코드 부분에서 가장 중요한 것은 JS 부분의 변경 사항입니다. Prototype.js를 사용하지 않았을 때 AJAX 효과를 생성하려면 최소한 4개의 단락이 필요했습니다. 이제 다음과 같은 작은 코드만 작성하면 됩니다.

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

가장 중요한 것은 다음 단락입니다.

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

참고: 내부 URL은 절대 경로로 작성하거나 앞에 <% String path = request.getContextPath();%> 그럼 여기

"<%=path%>/test .do"

prototype.js를 사용하면 현재 브라우저 상태를 직접 판단할 필요가 없다는 점이 가장 편리한 것 같습니다. OnSuccess 함수를 호출하고 실패하면 onFailure 함수를 호출하고 성공과 실패에만 집중하면 됩니다. 그 이후에는 프로그램을 단순화합니다.

2. 배경 스트럿 부분

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

간단하게 인쇄합니다.

javascript의 ajax 함수 개념과 예

jQuery의 ajax 함수를 기반으로 웹 서비스의 json 변환 구현_ jquery

jQuery에 내장된 AJAX 함수와 JSON 사용 예_jquery

위 내용은 프로토타입.js의 간단한 Ajax 기능 구현에 대한 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!