초보자가 꼭 읽어야 할 Ajax 기술 구성 요소 및 핵심 원리 분석
이번에는 초보자가 꼭 읽어야 할 Ajax 기술 구성 요소 및 핵심 원리 분석을 가져왔습니다. Ajax 기술 구성 요소 및 핵심 원리 분석에 대해 초보자가 반드시 읽어야 할 Notes는 무엇입니까?
이 기사에서는 참고용으로 Ajax 기술의 구성 원리를 주로 분석합니다. 구체적인 내용은 다음과 같습니다
1. Ajax
특징: 부분 새로 고침, 사용자 경험 개선, 서버 공급자에서 데이터 로드
2. AJax의 기술적 구성은 새로운 기술이 아니라 이전 기술의 통합입니다.
Ajax: 비동기식 Javascript 그리고 요청을 보낸 후 대기 없이
콜백 함수
에 의해 처리됩니다. 결과. JavaScript: 서버에 요청을 보내고, 반환된 결과를 받고, 페이지를 업데이트합니다. XML: 데이터를 캡슐화하는 데 사용됩니다.
XMLHttpRequst 개체: 이 개체를 통해 서버에 요청을 보냅니다. 모든 최신 브라우저(Chrome, IE5+)에서 지원되는 비동기 요청 기술입니다.
Non 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: 초기화되지 않음
2: 로드 완료
3: 요청 진행 중
4: 요청 완료
responseXML: 서버에서 반환한 데이터(XML 형식)
요약:
XMLHttpRequest 사용 단계:
1) XMLHttpRequest 개체 만들기
2) 요청 방법 및 URL 설정
3) 상태 변경 시 콜백 함수 설정
xhr.onreadystatechange=function(){}
1: 로딩 중 2: 로딩 완료 3: 요청 진행 중
4: 요청 완료
4) 요청 보내기
xhr.send(data),
게시물 제출이면 데이터가 제출됨 get이 제출된 경우 매개변수는 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=='0'){
document.getElementById("res").innerHTML="登录成功";
}else{
document.getElementById("res").innerHTML="<font color='red'>登录失败</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 중국어의 다른 관련 기사를 주목하세요. 웹사이트!
추천 도서:
등록된 사용자 이름이 존재하는지 확인하려면 ajax를 사용하세요
위 내용은 초보자가 꼭 읽어야 할 Ajax 기술 구성 요소 및 핵심 원리 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
Stable Diffusion 3 논문이 드디어 공개되고, 아키텍처의 세부 사항이 공개되어 Sora를 재현하는 데 도움이 될까요?
Mar 06, 2024 pm 05:34 PM
StableDiffusion3의 논문이 드디어 나왔습니다! 이 모델은 2주 전에 출시되었으며 Sora와 동일한 DiT(DiffusionTransformer) 아키텍처를 사용합니다. 출시되자마자 큰 화제를 불러일으켰습니다. 이전 버전과 비교하여 StableDiffusion3에서 생성된 이미지의 품질이 크게 향상되었습니다. 이제 다중 테마 프롬프트를 지원하고 텍스트 쓰기 효과도 향상되었으며 더 이상 잘못된 문자가 표시되지 않습니다. StabilityAI는 StableDiffusion3이 800M에서 8B 범위의 매개변수 크기를 가진 일련의 모델임을 지적했습니다. 이 매개변수 범위는 모델이 많은 휴대용 장치에서 직접 실행될 수 있어 AI 사용이 크게 줄어든다는 것을 의미합니다.
자율주행과 궤도예측에 관한 글은 이 글이면 충분합니다!
Feb 28, 2024 pm 07:20 PM
자율주행 궤적 예측은 차량의 주행 과정에서 발생하는 다양한 데이터를 분석하여 차량의 향후 주행 궤적을 예측하는 것을 의미합니다. 자율주행의 핵심 모듈인 궤도 예측의 품질은 후속 계획 제어에 매우 중요합니다. 궤적 예측 작업은 풍부한 기술 스택을 보유하고 있으며 자율 주행 동적/정적 인식, 고정밀 지도, 차선, 신경망 아키텍처(CNN&GNN&Transformer) 기술 등에 대한 익숙함이 필요합니다. 시작하기가 매우 어렵습니다! 많은 팬들은 가능한 한 빨리 궤도 예측을 시작하여 함정을 피하기를 희망합니다. 오늘은 궤도 예측을 위한 몇 가지 일반적인 문제와 입문 학습 방법을 살펴보겠습니다. 관련 지식 입문 1. 미리보기 논문이 순서대로 되어 있나요? A: 먼저 설문조사를 보세요, p
DualBEV: BEVFormer 및 BEVDet4D를 크게 능가하는 책을 펼치세요!
Mar 21, 2024 pm 05:21 PM
본 논문에서는 자율 주행에서 다양한 시야각(예: 원근 및 조감도)에서 객체를 정확하게 감지하는 문제, 특히 원근(PV) 공간에서 조감(BEV) 공간으로 기능을 효과적으로 변환하는 방법을 탐구합니다. VT(Visual Transformation) 모듈을 통해 구현됩니다. 기존 방법은 크게 2D에서 3D로, 3D에서 2D로 변환하는 두 가지 전략으로 나뉩니다. 2D에서 3D로의 방법은 깊이 확률을 예측하여 조밀한 2D 특징을 개선하지만, 특히 먼 영역에서는 깊이 예측의 본질적인 불확실성으로 인해 부정확성이 발생할 수 있습니다. 3D에서 2D로의 방법은 일반적으로 3D 쿼리를 사용하여 2D 기능을 샘플링하고 Transformer를 통해 3D와 2D 기능 간의 대응에 대한 주의 가중치를 학습하므로 계산 및 배포 시간이 늘어납니다.
PHP 및 Ajax: 자동 완성 제안 엔진 구축
Jun 02, 2024 pm 08:39 PM
PHP 및 Ajax를 사용하여 자동 완성 제안 엔진 구축: 서버측 스크립트: Ajax 요청을 처리하고 제안을 반환합니다(autocomplete.php). 클라이언트 스크립트: Ajax 요청을 보내고 제안을 표시합니다(autocomplete.js). 실제 사례: HTML 페이지에 스크립트를 포함하고 검색 입력 요소 식별자를 지정합니다.
jQuery AJAX 요청에서 발생한 403 오류를 해결하는 방법
Feb 20, 2024 am 10:07 AM
제목: jQuery AJAX 요청의 403 오류를 해결하는 방법 및 코드 예제 403 오류는 서버가 리소스에 대한 액세스를 금지하는 요청을 의미합니다. 이 오류는 일반적으로 요청에 권한이 없거나 서버에서 거부되기 때문에 발생합니다. jQueryAJAX 요청을 할 때 가끔 이런 상황이 발생합니다. 이 기사에서는 이 문제를 해결하는 방법을 소개하고 코드 예제를 제공합니다. 해결 방법: 권한 확인: 먼저 요청한 URL 주소가 올바른지 확인하고 리소스에 액세스할 수 있는 충분한 권한이 있는지 확인하십시오.
jQuery AJAX 요청 403 오류를 해결하는 방법
Feb 19, 2024 pm 05:55 PM
jQuery는 클라이언트 측 개발을 단순화하는 데 사용되는 인기 있는 JavaScript 라이브러리입니다. AJAX는 전체 웹 페이지를 다시 로드하지 않고 비동기 요청을 보내고 서버와 상호 작용하는 기술입니다. 그러나 jQuery를 사용하여 AJAX 요청을 할 때 가끔 403 오류가 발생합니다. 403 오류는 일반적으로 보안 정책이나 권한 문제로 인해 서버 거부 액세스 오류입니다. 이 기사에서는 403 오류가 발생한 jQueryAJAX 요청을 해결하는 방법에 대해 설명합니다.
jQuery AJAX 오류 403 문제를 해결하는 방법은 무엇입니까?
Feb 23, 2024 pm 04:27 PM
jQueryAJAX 오류 403 문제를 해결하는 방법은 무엇입니까? 웹 애플리케이션을 개발할 때 jQuery는 종종 비동기 요청을 보내는 데 사용됩니다. 그러나 때때로 jQueryAJAX를 사용할 때 서버에서 액세스가 금지되었음을 나타내는 오류 코드 403이 발생할 수 있습니다. 이는 일반적으로 서버 측 보안 설정으로 인해 발생하지만 문제를 해결하는 방법이 있습니다. 이 기사에서는 jQueryAJAX 오류 403 문제를 해결하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. 만들다
Ajax를 사용하여 PHP 메소드에서 변수를 얻는 방법은 무엇입니까?
Mar 09, 2024 pm 05:36 PM
Ajax를 사용하여 PHP 메소드에서 변수를 얻는 것은 웹 개발의 일반적인 시나리오입니다. Ajax를 통해 데이터를 새로 고치지 않고도 페이지를 동적으로 얻을 수 있습니다. 이 기사에서는 Ajax를 사용하여 PHP 메소드에서 변수를 가져오는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 Ajax 요청을 처리하고 필요한 변수를 반환하기 위해 PHP 파일을 작성해야 합니다. 다음은 간단한 PHP 파일 getData.php에 대한 샘플 코드입니다.
