-1
AJAX를 통합하여 서버와 상호 작용할 것으로 예상되는 페이지에서 작업 할 때 문제가 발생했습니다. 하지만,AJAX를 사용하여 서버와 상호 작용
- 은 일련의 규칙에 따라 (내가 이런 짓을하고 너무 세부 사항에 당신을 지루하게하지 않을 것이다 제대로 작동이 한 검증하는 양식을 만듭니다 : 여기 이 일어날 해야하는 무엇 그들은 내가 포함 할 것입니다 내 코드에서 명확하게 볼 수 있어야합니다).
- 양식이 유효성 검사를 성공적으로 통과 한 경우 서버 유효성 검사 핸드 셰이크 지시 사항을 따르십시오.
다음은 자동화 된 검증 핸드 셰이크 명령어입니다
- 양식이 성공적으로 확인 된 경우 양식에서하고 "로그인"매개 변수를 사용하여 암호를 사용하여 서버에 로그인합니다. 참고 : 서버에서 허용하는 유일한 암호는 1234
- 입니다. 그러면 짧은 시간 동안 만 유효한 시간 기반 키가 다시 나타납니다. "유효 :"형식과 숫자 및 콜론으로 구성됩니다.
- 키를 얻은 후 "valid :"을 제거하고 "verify"매개 변수가있는 키를 사용하여 상태 정보 만 서버로 보냅니다. stateValue + strippedKey 예를 들어 사용자가 "LA"를 선택하고 반환 된 값이 "유효 : 46 : 10 : 10 : 33 : 46"인 경우 "LA46 : 10 : 10"서버로 보냅니다. : 33 : 46 ".
- 그러면 서버에서 일련의 숫자와 문자를 다시 전송합니다.
- 다시 전송 된 숫자와 문자를 사용하여 "제출"매개 변수, 상태 및 각 사람 사이에 콜론이있는 사람의 이름으로 다시 보냅니다. . 양식은 귀하의 성공 여부를 알려줍니다.
W3School 웹 사이트의 자습서와 함께 작업하기 전에 AJAX와 함께 일한 적이 없지만이 지침에 적용하는 방법을 알아 내려는 데 어려움이 있습니다.
내가 지금까지 가지고있는 것입니다 : (대부분의 AJAX 코드 (function ajax())는 강사가 작성한 코드의 일부를 모델로했지만, "login = 1234"부분을 주석 처리했습니다. 그가 이것을하기 전에 거기에 있었던 문법을 모르겠다.)
<html>
<head>
<title>Project 5</title>
</head>
<body>
<form name="myForm" id="myForm" onsubmit="return validateForm()">
First Name: <input type="text" id="name"> <br>
<span id="nameErrMsg" class="error"></span> <br />
Age: <input type="text" id="age"> <br>
<span id="ageErrMsg" class="error"></span> <br />
Street Address: <input type="text" id="address"> <br>
<span id="addressErrMsg" class="error"></span> <br />
State: <select>
<option value="la">LA</option>
<option value="tx">TX</option>
<option value="ok">OK</option>
<option value="mi">MI</option>
<option value="az">AZ</option>
</select> <br>
Login Password: <input type="password" id="password"> <br>
<span id="passwordErrMsg" class="error"></span> <br />
<input type="submit" value="Submit"> <br>
</form>
<script type="text/javascript">
function validateForm() {
var ckName = checkName();
var ckAge = checkAge();
var ckAddress = checkAddress();
var ckPassword = checkPassword();
return ckName && ckAge && ckAddress && ckPassword;
}
function checkName() {
var form = document.myForm;
var fName = form.name.value;
var errMsgHolder = document.getElementById("nameErrMsg");
if(fName.length < 3) {
errMsgHolder.innerHTML = "Please enter a name with at least three letters";
return false;
}
else if(!(/^\S{3,}$/.test(fName))) {
errMsgHolder.innerHTML = "Name cannot contain spaces";
return false;
}
else {
errMsgHolder.innerHTML = " ";
return undefined;
}
}
function checkAge() {
var form = document.myForm;
var personAge = form.age.value;
var ageErr = document.getElementById("ageErrMsg");
if(personAge === "") {
ageErr.innerHTML = "Please enter your age";
return false;
}
else if(/\D/.test(personAge)) {
ageErr.innerHTML = "Please enter a numeric age";
return false
}
else {
ageErr.innerHTML = " ";
return undefined;
}
}
function checkAddress() {
var form = document.myForm;
var strAddress = form.address.value;
var addressErr = document.getElementById("addressErrMsg");
if(strAddress === "") {
addressErr.innerHTML = "Please enter your address";
return false;
}
else if(strAddress.length < 12) {
addressErr.innerHTML = "Address must contain at least 12 characters";
return false;
}
else {
addressErr.innerHTML = " ";
return undefined;
}
}
function checkPassword() {
var form = document.myForm;
var passwd = form.password.value;
var passwordErr = document.getElementById("passwordErrMsg");
if(passwd === "") {
passwordErr.innerHTML = "Please enter your password"
return false;
}
else {
passwordErr.innerHTML = " ";
return undefined;
}
}
function ajax() {
var url = "http://cs.sfasu.edu/rball/351/project5.php";
var request = new XMLHttpRequest();
var passwd = document.getElementById("password").value;
var concat = url+"?"+passwd;
alert("sending:"+concat);
request.open("GET",concat, login=1234");
</script>
</body>
</html>
누구든지 올바른 방향으로 나를 가리 키도록 도와 줄 수 있습니까?
는 ~ http://api.jquery.com/category/ajax/ – Phil
는 * "가 W3school 웹 사이트에 튜토리얼을 따라 해결하려고 노력하는 것은"* ~이 사이트는 단순한 생명 확인 일반적으로 web-dev 커뮤니티에 의해 frowned. 더 나은 자원을 찾으시기 바랍니다. – Phil
@Phil 그것은 복잡한 인증 핸드 쉐이크 메커니즘을 설명하는 클래스 할당의 일부인 것처럼 들립니다. –