AJAX-비동기 개발
44865 단어 자바
동기 화 와 비동기 의 차이
4.567917.동기 화 방식:정상 적 인 상황 에서 브 라 우 저 와 서버 간 은 직렬 작업 으로 자바 단일 스 레 드 와 유사 합 니 다
4.567917.비동기 방식:브 라 우 저 와 서버 는 병행 작업 으로 자바 의 다 중 스 레 드 작업 과 유사 합 니 다
즉,브 라 우 저 배경 에서 서버 에 데 이 터 를 보 내 는 것 은 폼 을 통 해 서버 에 데 이 터 를 제출 하 는 것 이 아 닙 니 다.
사용 자 는 프론트 데스크 에서 계속 일 할 수 있 습 니 다.사용 자 는 브 라 우 저가 서버 에 데 이 터 를 보 냈 고 서버 도 데 이 터 를 되 돌려 주 었 다 는 것 을 느끼 지 못 합 니 다.
ajax 사용 기술
원생 AJAX 접근 절차
AJAX 의 실행 절차
절차 설명:
사용자 가 브 라 우 저 에서 JS 에서 대상 XMLHttpRequest 대상 을 만 듭 니 다
사례:원생 의 AJAX 가 사용자 이름 의 존재 여 부 를 판단
<html lang="en">
<head>
<meta charset="UTF-8">
<title> title>
head>
<body>
<form autocomplete="off">
：<input type="text" id="username">
<span id="uSpan">span>
<br>
：<input type="password" id="password">
<br>
<input type="submit" value=" ">
form>
body>
<script>
//1.
document.getElementById("username").onblur = function() {
//2. XMLHttpRequest
let xmlHttp = new XMLHttpRequest();
//3.
let username = document.getElementById("username").value;
xmlHttp.open("GET","userServlet?username="+username,true);
//xmlHttp.open("GET","userServlet?username="+username,false);
//4.
xmlHttp.send();
//5.
xmlHttp.onreadystatechange = function() {
//
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
// span
document.getElementById("uSpan").innerHTML = xmlHttp.responseText;
}
}
}
script>
html>
jQuery 에서$.ajax()방법의 사용
사례:AJAX 를 사용 하여 백그라운드 사용자 로그 인 기능 구현
서버
#####
```html
/*
$.ajax({ : , : })
url ：
async ： ， true， false
method： GET POST ， get
data ： ，2 ：1. = & = 2. { : , : }
dataType ： <br /> ：xml, html, script, json, text
success ： ，
error ： ， XMLHttpRequest
*/
//
$("#btnLogin").click(function () {
//1.
let username = $("#username").val();
let password = $("#password").val();
//2. $.ajax
$.ajax({
url: "json/login.json",
// ，
success: function (users) {
let exists = false;
//
for (let user of users) {
//
if (user.name == username && user.password == password) {
exists = true;
break;
}
}
//
if (exists) {
alert(" ， ：" + username);
}
else {
alert(" ， ");
}
},
dataType: "json" // json
})
});
다른 매개 변수의 시범
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title> title>
<script src="js/jquery-3.3.1.js">script>
head>
<body>
<h2> h2>
<form id="loginForm">
<table>
<tr>
<td> td>
<td><input type="text" name="username" id="username"/>td>
tr>
<tr>
<td> td>
<td><input type="password" name="password" id="password"/>td>
tr>
<tr>
<td colspan="2" align="center"><input type="button" value=" " id="btnLogin"/>td>
tr>
table>
form>
<script type="text/javascript">
/*
$.ajax({ : , : })
url ：
async ： ， true， false
： ，
： ， JS
method： GET POST ， get
data ： ，2 ：1. = & = 2. { : , : }
dataType ：
：xml, html, script, json, text
success ： ，
error ： ， XMLHttpRequest
*/
//
$("#btnLogin").click(function () {
//1.
let username = $("#username").val();
let password = $("#password").val();
//2. $.ajax
$.ajax({
url: "json/login.json",
data: "a=1&b=2", // ， f12, network
//async: false, // true，
// ，
success: function (users) {
let exists = false;
//
for (let user of users) {
//
if (user.name == username && user.password == password) {
exists = true;
break;
}
}
//
if (exists) {
alert(" ， ：" + username);
}
else {
alert(" ， ");
}
},
dataType: "json", // json
error: function (request) { // ， XMLHttpRequest
alert(" ， ：" + request.status);
}
});
//alert(" "); // ，
});
script>
body>
html>
jQuery 3.0 의$.get()과$.post 방법
GET 의 새로운 서명 방식 으로 위의 로그 인 을 실현 합 니 다.
코드
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title> title>
<script src="js/jquery-3.3.1.js">script>
head>
<body>
<h2> h2>
<form id="loginForm">
<table>
<tr>
<td> td>
<td><input type="text" name="username" id="username"/>td>
tr>
<tr>
<td> td>
<td><input type="password" name="password" id="password"/>td>
tr>
<tr>
<td colspan="2" align="center"><input type="button" value=" " id="btnLogin"/>td>
tr>
table>
form>
<script type="text/javascript">
/*
$.get({ : , : }) $.post
url ：
async ： ， true， false
： ，
： ， JS
method： GET POST ， get
data ： ，2 ：1. = & = 2. { : , : }
dataType ：
：xml, html, script, json, text
success ： ，
error ： ， XMLHttpRequest
*/
//
jQuery("#btnLogin").click(function () {
//1.
let username = jQuery("#username").val();
let password = jQuery("#password").val();
//2. $.get
jQuery.get({
url: "json/login.json",
method: "post",
data: "a=1&b=2", // ， f12, network
//async: false, // true，
// ，
success: function (users) {
let exists = false;
//
for (let user of users) {
//
if (user.name == username && user.password == password) {
exists = true;
break;
}
}
//
if (exists) {
alert(" ， ：" + username);
}
else {
alert(" ， ");
}
},
dataType: "json", // json
error: function (request) { // ， XMLHttpRequest
alert(" ， ：" + request.status);
}
});
});
script>
body>
html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Is Eclipse IDE dying?In 2014 the Eclipse IDE is the leading development environment for Java with a market share of approximately 65%. but ac...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
