Ajax 기술 구성 및 핵심 원리 설명-PHP 튜토리얼-php.cn

집

백엔드 개발

PHP 튜토리얼

Ajax 기술 구성 및 핵심 원리 설명

小云云

Jan 12, 2018 pm 04:19 PM

ajax원칙핵심

이 글은 주로 JavaScript 성능 최적화를 위한 함수 제한 및 함수 디바운스를 소개합니다. 관심 있는 친구들이 참고하시면 도움이 될 것입니다.

1. Ajax
특징: 사용자 경험 개선, 서버 제공자로부터 데이터 로드

2 AJax
의 기술적 구성은 새로운 기술이 아니라 이전 기술
Ajax: 비동기 자바스크립트 및
JavaScript: 서버에 요청을 보내고, 반환된 결과를 받고, 페이지를 업데이트합니다.
XML: 데이터를 캡슐화하는 데 사용됩니다.

3 Ajax 핵심 원칙

XMLHttpRequst 개체: 이 개체를 통해 서버에 요청을 보냅니다.
모든 최신 브라우저(Chrome, IE5+)에서 지원되는 비동기 요청 기술입니다

1) XMLHttpReuest 객체 생성

IE가 아닌 브라우저(Mozilla/Safari): var xhr=new XMLHttpRequest();
IE: xhr =new ActiveXObject("Msxml2.POST", URL, true/false): 서버에 대한 연결을 설정하는 데 사용됩니다. 매개변수 1: 제출 방법, 매개변수 2: 요청된 URL. 동기식 또는 비동기식 요청을 나타냅니다. true: 비동기식 요청을 나타냅니다false: 동기식 요청을 나타냅니다
send(data): 요청을 보냅니다
Parameters: 제출된 콘텐츠입니다.
POST 메소드: 데이터는 제출된 매개변수, send(username=root&password=abc123); GET 메소드: send(null)

b) 속성:
onreadystatechange: 상태가 변경될 때 콜백 함수를 설정합니다. 서버 데이터를 얻는 데 사용됩니다.
onreadystatechange=function(){
｝

readyState: 서버 상태 응답

상태 코드:

0: 초기화되지 않음

1: 로드 중

2: 로드 완료
3: 요청 진행 중
4: 요청 완료

responseText: 서버에서 반환하는 데이터(텍스트 형식)
responseXML: 서버에서 반환하는 데이터(XML 형식)
요약:

XMLHttpRequest 사용 단계:
1) XMLHttpRequest 개체 만들기
2) 요청 방법을 설정하고 URL
xhr.open("GET/POST","url",true/false), true는 비동기 요청, false는 동기 요청

　3) 상태 변경 시 콜백 함수 설정

　　xhr.onreadystatechange=function(){ }
　　0 : 초기화 안됨

　　1 : 로딩중

　　2 : 로딩완료　　3 : 요청진행중　　4 : 요청완료
　　4) 요청보내기
　　xhr.send(data),
　　, 데이터는 제출된 데이터, 가져오기를 위해 제출된 경우 매개변수는 null일 수 있습니다.

사용자가 로그인한 HTML 페이지 확인:

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录</title>
</head>
<body>
  用户名：<input type="text" name="username" id="username"><br>
  密码:<input type="password" name="password" id="password">
  <a href="javascript:chkUser();">登录</a>
  <p id="res"></p>
</body>

<script type="text/javascript">
  var xhr;
  /**
  * 创建XMLHttpRequest对象
  */
 function createXMLHttpRequest(){
  //1、创建XMLHttpRequest对象
    if(window.XMLHttpRequest){
      //非IE内核浏览器
     xhr=new XMLHttpRequest(); 
    }else{
      //IE浏览器
      try{
        xhr=new ActiveXObject("Msxml2.XMLHTTP"); 
      }catch(e){
       //IE低版本
        xhr=new ActiveXObject("Microsoft.XMLHTTP"); 
      }
    }
 }
  
  /**
  * 发送请求，用来检查用户名、密码是否正确
  */
  function chkUser(){
    
    //1、创建XMLHttpRequest
    createXMLHttpRequest();
    
    //2、获得用户名、密码
    var username=document.getElementById("username").value;
    var password=document.getElementById("password").value;
    
    //3、与服务器建立连接：open
    var url="login?username="+username+"&password="+password;
    //方式1：get提交
    //xhr.open("GET",url,true);
    
    //方式2：post提交
    var url2="login";
    xhr.open("POST",url2,true);
    
    
    //4、设置回调函数，获得服务器响应的数据
    xhr.onreadystatechange=function(){
      /*
      readyState状态码：
      0：未初始化
      1：正在加载
      2：加载完成
      3：请求进行中
      4：请求完成
      */
      if(xhr.readyState==4){
        //status,200表示响应正常
        if(xhr.status==200){
         //alert("从服务器返回的值为："+xhr.responseText);
         var res=xhr.responseText;
         if(res==&#39;0&#39;){
           document.getElementById("res").innerHTML="登录成功";
         }else{
           document.getElementById("res").innerHTML="<font color=&#39;red&#39;>登录失败</font>";
         }
         
        }else{
          alert("出现在了异常:"+xhr.response.Text);
        }
        
      }
    }
    //5、发送请求
    //方式1：get方式
    //xhr.send(null);
    
    //方式2:post方式：
    //Post提交需要设置http请求头
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("username="+username+"&password="+password);
    
    
  }
 
</script>

</html>

서버 코드:

package com.newer.login.web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.newer.login.bean.User;
import com.newer.login.service.UserService;

/**
 * Servlet implementation class LoginServlet
 */
public class LoginServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;

  UserService userService = new UserService();

  /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
   *   response)
   */
  protected void doGet(HttpServletRequest request,
      HttpServletResponse response) throws ServletException, IOException {
    doPost(request,response);
  
  }

  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
   *   response)
   */
  protected void doPost(HttpServletRequest request,
      HttpServletResponse response) throws ServletException, IOException {
    // 1、获得页面参数
    String username = request.getParameter("username");
    String password = request.getParameter("password");

    System.out.println("获得请求的参数username:"+username);
    System.out.println("获得请求的参数password:"+password);    
    // 2、封装User对象
    User user = new User();
    user.setUsername(username);
    user.setPassword(password);

    // 3、调用服务类，完成用户名、密码的校验
    User u = userService.login(user);

    /*
     * 传统方式 if(u!=null){ //表示登录成功 request.setAttribute("user", user);
     * //跳转至首页... }else{ //登录失败，跳转登录页面
     * 
     * }
     */
    // ajax响应

    PrintWriter out = response.getWriter();

    if (u != null) {
      //0成功，1失败
      out.print(0);
    }else{
      out.print(1);
    }
    out.close();
  }
}

관련 기사

PHP 세션에 어떤 데이터를 저장할 수 있습니까?May 02, 2025 am 12:17 AM

phpsessionscanstorestrings, 숫자, 배열 및 객체 1.Strings : TextDatalikeUsernames.2.numbers : integorfloatsforcounters.3.arrays : listslikeshoppingcarts.4.objects : complexStructuresThatareserialized.

PHP 세션을 어떻게 시작합니까?May 02, 2025 am 12:16 AM

tostartAphPessession, us

세션 재생이란 무엇이며 보안을 어떻게 개선합니까?May 02, 2025 am 12:15 AM

세션 재생은 세션 고정 공격의 경우 사용자가 민감한 작업을 수행 할 때 새 세션 ID를 생성하고 이전 ID를 무효화하는 것을 말합니다. 구현 단계에는 다음이 포함됩니다. 1. 민감한 작업 감지, 2. 새 세션 ID 생성, 3. 오래된 세션 ID 파괴, 4. 사용자 측 세션 정보 업데이트.

PHP 세션을 사용할 때 몇 가지 성능 고려 사항은 무엇입니까?May 02, 2025 am 12:11 AM

PHP 세션은 응용 프로그램 성능에 큰 영향을 미칩니다. 최적화 방법은 다음과 같습니다. 1. 데이터베이스를 사용하여 세션 데이터를 저장하여 응답 속도를 향상시킵니다. 2. 세션 데이터 사용을 줄이고 필요한 정보 만 저장하십시오. 3. 비 차단 세션 프로세서를 사용하여 동시성 기능을 향상시킵니다. 4. 사용자 경험과 서버 부담의 균형을 맞추기 위해 세션 만료 시간을 조정하십시오. 5. 영구 세션을 사용하여 데이터 읽기 및 쓰기 시간의 수를 줄입니다.

PHP 세션은 쿠키와 어떻게 다릅니 까?May 02, 2025 am 12:03 AM

phpsessionsareser-side, whilecookiesareclient-side.1) sessions stessoredataontheserver, andhandlargerdata.2) cookiesstoredataonthecure, andlimitedinsize.usesessionsforsensitivestataondcookiesfornon-sensistive, client-sensation.

PHP는 사용자 세션을 어떻게 식별합니까?May 01, 2025 am 12:23 AM

phpidifiesauser의 sssessionusessessioncookiesandssessionids.1) whensession_start () iscalled, phpgeneratesauniquessessionStoredInacookienamedPhpsSessIdonSeuser 'sbrowser.2) thisidallowsphptoretrievessessionDataTromServer.

PHP 세션을 확보하기위한 모범 사례는 무엇입니까?May 01, 2025 am 12:22 AM

PHP 세션의 보안은 다음 측정을 통해 달성 할 수 있습니다. 1. Session_REGENEREAT_ID ()를 사용하여 사용자가 로그인하거나 중요한 작업 일 때 세션 ID를 재생합니다. 2. HTTPS 프로토콜을 통해 전송 세션 ID를 암호화합니다. 3. 세션 _save_path ()를 사용하여 세션 데이터를 저장하고 권한을 올바르게 설정할 보안 디렉토리를 지정하십시오.

PHP 세션 파일은 기본적으로 어디에 저장됩니까?May 01, 2025 am 12:15 AM

phpsessionfilesarestoredInTheRectorySpecifiedBysession.save_path, 일반적으로/tmponunix-likesystemsorc : \ windows \ temponwindows.tocustomizethis : 1) austession_save_path () toSetacustomDirectory, verlyTeCustory-swritation;

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.