1. 양식 제출
<h1>form表单的get</h1>
<form action="/adress" method="get">
<input type="text" name="name">
<input type="text" name="pswd">
<input type="submit" value="get">
</form>
<h1>form表单的post</h1>
<form action="/adress" method="post">
<input type="text" name="name">
<input type="text" name="pswd">
<input type="submit" value="post">
</form>양식 양식은 양식의 내용을 입력 상자, 라디오 상자, 확인란, 텍스트 필드 등과 같은 백그라운드로 제출합니다.
- 양식 양식이 제출되고 해당 값은 백그라운드에서 해당 이름 속성을 통해 얻을 수 있습니다.
- action 속성은 제출된 서버 주소를 설정하는 데 사용됩니다.
- method 속성은 form get 또는 post 양식의 제출 방법을 설정하는 데 사용되며 기본값은 get입니다.
양식 제출 기능:
- 양식 제출 후 새 페이지가 생성됩니다.
- 제출할 때마다 페이지가 새로 고쳐집니다. 페이지를 부분적으로 새로 고칠 수 있는 방법은 없습니다.
- 양식 양식은 브라우저와 함께 제공되며 브라우저의 js 지원이 꺼져 있어도 양식을 계속 제출할 수 있습니다.
2. 네이티브 아약스
소개(MDN에서)
Asynchronous JavaScript + XML(asynchronous JavaScript and XML) 자체는 새로운 기술이 아니라 기존 기술의 집합체를 사용하는 '새로운' 방법을 설명하기 위해 Jesse James Garrett이 2005년에 제안한 새로운 용어로 HTML 또는 XHTML, CSS를 포함합니다. , JavaScript, DOM, XML(en-US), XSLT 및 가장 중요한 XMLHttpRequest. 이러한 기술과 결합된 AJAX 모델을 사용할 때 웹 애플리케이션은 전체 페이지를 다시 로드(새로 고침)하지 않고도 사용자 인터페이스에 대한 증분 업데이트를 신속하게 렌더링할 수 있습니다. 이를 통해 프로그램은 사용자 작업에 더 빠르게 응답할 수 있습니다.
X는 Ajax에서 XML을 나타내지만 JSON은 더 가볍고 Javascript의 일부라는 JSON의 많은 장점으로 인해 현재 XML보다 더 일반적으로 사용됩니다. JSON과 XML은 모두 Ajax 모델에서 정보를 패키징하는 데 사용됩니다.
간단한 요약
Ajax는 새로운 기술이 아니라 여러 기술의 조합으로 Ajax는 전체 페이지를 로드하지 않고 웹 페이지의 일부를 업데이트할 수 있으므로 프로그램이 사용자에게 더 빠르게 응답할 수 있습니다.
예
<h1>原生ajax</h1>
<input type="text" id="userName" value="hehe">
<button id="getbtn">ajax--get</button>
<input type="text" id="pswd">
<button id="postbtn"></button>
<script>
let getBtn = document.querySelector('#getbtn');
let postBtn = document.querySelector('#postbtn');
let userName = document.querySelector('#userName');
let pswd = document.querySelector('#pswd');
// 原生ajax-get
getBtn.onclick = function () {
// 1.创建请求对象
let xhr = new XMLHttpRequest();
// 2.创立链接
xhr.open("get", `/login?name=${userName.value}&pswd=${pswd.value}`, true)
// 3.发送请求
xhr.send();
// 4.监听请求状态
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log("ajax-get", xhr.responseText);
}
}
}
// 原生ajax-post
postBtn.onclick = function () {
// 1.创建请求对象
let xhr = new XMLHttpRequest();
// 2.创立链接
xhr.open("post", "/register", true)
// 3.发送请求
xhr.send(`name=${userName.value}&pswd=${pswd.value}`);
// 4.监听请求状态
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log("ajax-post", xhr.responseText);
}
}
}
</script>Ajax 요청의 장점
- Ajax는 제출, 요청 및 수신 시 비동기식이며 페이지의 다른 부분에 영향을 주지 않아 사용자 경험을 향상시킵니다.
Ajax 요청의 단점
- 사용하기 번거로운 단계
- 브라우저 뒤로 버튼을 지원하지 않습니다.
- Ajax는 서버와의 상호 작용 세부 정보를 노출합니다.
3개의 jQuery 아약스
왜 jQuery의 아약스일까요?jQuery는 그냥 네이티브 아약스를 캡슐화하기 때문에 매번 네이티브 아약스를 작성할 필요가 없어 프로그래머에게 편리합니다.
$('#getbtn').click(() => {
$.ajax({
type: "get",
url: "/login",
data: { name: userName.value, pswd: pswd.value },
// 注意这里是写数据类型，这里要么不写，要么写json
dataType: "dataType",
success(response) {
console.log("get:", response);
}
});
})
$('#postbtn').click(() => {
$.ajax({
type: "post",
url: "/register",
data: { name: userName.value, pswd: pswd.value },
success(response) {
console.log("post:", response);
}
});
})
jQuery를 아약스 매개변수
- 유형: 요청 방법
- url: 요청 주소
- 데이터: 서버로 전송되는 데이터
- dataType: 서버 응답의 데이터 유형
- success(response, status, xhr): 성공 시 콜백
사용하려면 jQuery를 도입해야 합니다.
4: 축
소개(Axios 공식 웹사이트에서)
Axios는 node.js 및 브라우저를 위한 약속 기반 네트워크 요청 라이브러리입니다. 동형입니다(즉, 동일한 코드가 브라우저와 node.js에서 실행될 수 있음). 서버 측에서는 기본 node.js http 모듈을 사용하고 클라이언트 측(브라우저 측)에서는 XMLHttpRequests를 사용합니다.
예
// *****************axios-get
axios.get("/login", {
params: { name: userName.value, pswd: pswd.value }
}).then((response) => {
// then就相当于success
console.log("axios-get", response);
})
// *****************axios-post
// post请求 参数直接写{} 不需要外面那层params
axios.post("/register", {
name: userName.value, psw: pswd.value
}).then((response) => {
// then就相当于success
console.log("axios-post", response);
}vue 프레임워크의 제작자인 You Yuxi는 jQuery를 대체하기 위해 axios를 사용할 것을 권장합니다.
- 네이티브 ajax의 설정 및 호출 방식이 매우 번거롭고 비동기식 요청 구현이 번거로움
- jQuery의 ajax는 네이티브 ajax에 비해 매우 유용하지만 ajax 비동기 네트워크 때문에 전체 jQuery 프레임워크를 참조할 필요가 없다.
Axios는 본질적으로 네이티브 ajax의 캡슐화이지만 Promise의 구현 버전입니다.네이티브 ajax 또는 jQuery의 ajax와 비교할 때 프로그래머는 최신 ES 사양을 준수하는 Promise 객체를 생성하는 프로세스를 저장합니다.다음과 같은 특징이 있습니다.
- 브라우저 측 및 서버 측 요청 모두 지원
- 지원 약속 API
- 동시 요청을 위한 일부 인터페이스 제공
- 변환 요청은 자동으로 JSON 형식으로 변환된 데이터를 반환합니다.
5. 가져오기
소개(MDN에서)
Fetch API는 요청 및 응답과 같은 HTTP 파이프라인의 특정 부분에 액세스하고 조작하기 위한 JavaScript 인터페이스를 제공합니다. 또한 네트워크를 통해 리소스를 비동기적으로 가져오는 간단하고 합리적인 방법을 제공하는 글로벌 fetch() 메서드를 제공합니다.
이 기능은 이전에 XMLHttpRequest를 사용하여 구현되었습니다. Fetch.AI는 서비스 작업자와 같은 다른 기술에서 쉽게 사용할 수 있는 보다 바람직한 대안을 제공합니다. 또한 Fetch.AI는 CORS 및 HTTP 확장과 같은 다른 HTTP 관련 개념을 정의하기 위한 전용 논리적 공간을 제공합니다.
예
//发起get请求
fetch(url).then(function(response) {
//response.status表示响应的http状态码
if(response.status === 200){
//json是返回的response提供的一个方法,会把返回的json字符串反序列化成对象,也被包装成一个Promise了
return response.json();
}else{
return {}
}
});
//fetch post请求
fetch(url, {
method: 'post',
body: JSON.stringify(base),
headers: {
'Content-Type': 'application/json'
}
}).then(function(data) {
})Fetch는 ES6에 등장하고 ES6에서 약속 개체를 사용하는 Ajax 대체품이라고 주장합니다. Fetch는 약속을 기반으로 설계되었습니다. Fetch의 코드 구조는 ajax보다 훨씬 간단하고 매개변수는 jQuery ajax와 약간 비슷합니다. 그러나 가져오기는 XMLHttpRequest 개체를 사용하지 않고 ajax를 추가로 캡슐화하는 것이 아니라 네이티브 js입니다.