發送get請求
XMLHttpRequest以異步的方式發送HTTP請求，因此在發送請求時，一樣需要遵循HTTP協議。
- get請求, 設置請求行時, 需要把參數列表拼接到url后面
- get請求不用設置請求頭
- get請求的請求體為null
// 使用XMLHttpRequest發送get請求的步驟
// 1. 創建一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 2. 設置請求行
//第一個參數: 請求方式 get/post
//第二個參數: 請求的地址 需要在url后面拼上參數列表
xhr.open("get", "08.php?name=hucc");
// 3. 設置請求頭
// 瀏覽器會給我們默認添加基本的請求頭,get請求時無需設置
xhr.setReqeustHeader('content-type','text/html');
// 4. 設置請求體
// get請求的請求體為空,因為參數列表拼接到url后面了
xhr.send(null);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
text-align: center;
}
.info {
width: 500px;
height: 200px;
border: 1px solid red;
margin: 50px auto;
}
</style>
</head>
<body>
<h1>ajax - get</h1>
<p>可以在頁面不刷新的情況下，請求服務器，局部更新頁面的數據；</p>
<input type="text"> <button>發送請求</button>
<div class="info"></div>
<script>
//點擊按鈕，獲取輸入框的值，通過ajax發送給后台
document.querySelector('button').onclick = function() {
var txt = document.querySelector('input').value;
//利用ajax發送數據給后台
//1-創建一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
//2-設置請求報文
//2-1請求行
xhr.open('get', './02-ajax-get.php?name=' + txt);
//2-2請求頭
xhr.setRequestHeader('content-type', 'text/html');
//2-3請求主體
xhr.send(null);
//3-監聽服務器響應
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var r = xhr.responseText;
document.querySelector('.info').innerHTML = r; //顯示
}
}
}
</script>
</body>
</html>
發送post請求
-
post必須設置請求頭中的content-type為application/x-www-form-urlencoded
-
post請求需要將參數列表設置到請求體中
var xhr = new XMLHttpRequest;
//1. 設置請求行 post請求的參數列表在請求體中
xhr.open("post", "09.php");
//2. 設置請求頭, post請求必須設置content-type,不然后端無法獲取到數據
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//3. 設置請求體
xhr.send("name=hucc&age=18");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
text-align: center;
}
.info {
width: 500px;
height: 200px;
border: 1px solid red;
margin: 50px auto;
}
</style>
</head>
<body>
<h1>ajax - post</h1>
<p>可以在頁面不刷新的情況下，請求服務器，局部更新頁面的數據；</p>
<input type="text"> <button>發送請求</button>
<div class="info"></div>
<script>
//點擊按鈕，獲取輸入框的值，通過ajax發送給后台
document.querySelector('button').onclick = function() {
var txt = document.querySelector('input').value;
//利用ajax向數據發送給后台
//1-創建一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
//2-設置請求報文
//2-1請求行
xhr.open('post', './03-ajax-post.php');
//2-2請求頭
//必須設置content-type屬性
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
//2-3請求主體
xhr.send('name=' + txt + '&sex=m');
//3-監聽服務器響應
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var r = xhr.responseText;
document.querySelector('.info').innerHTML = r;
}
}
}
</script>
</body>
</html>
demo：判斷用戶名是否存在
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./form.css">
</head>
<body>
<form>
用戶名：<input type="text" id="test">
<span class="msg"></span> 密碼： <input type="password" name="password"> 電話：
<input type="text" name="tel"> 郵箱：
<input type="text" name="email"> 昵稱：
<input type="text" name="nickname">
<input type="button" value="注冊">
</form>
<script>
// 當用戶名框失去焦點（onblur) ，獲取輸入框的值，使用ajax傳遞給后台服務器，
// 判斷用戶名是否可用
document.querySelector('#test').onblur = function() {
var txt = this.value; //獲取輸入框的值
// 利用ajax傳遞給后台，判斷用戶名是否可用
//1-創建一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
//2-設置請求報文
//2-1請求行
xhr.open('get', './01-register.php?name=' + txt);
//2-2請求頭
// xhr.setRequestHeader('content-type', 'text/html');
//2-3請求主體
xhr.send(null);
//3-監聽服務器響應
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var r = xhr.responseText;
console.log(r);
//把結果顯示在頁面中
document.querySelector('.msg').innerHTML = r;
}
}
}
</script>
</body>
</html>
<?php
// echo '<pre>';
// print_r($_GET);
// echo '</pre>';
// 1-獲取前端傳遞用戶名
$name = $_GET['name'];
// 2-獲取數據庫中所有用戶名 select name from user; 用數組模擬數據庫
$names = ['zs', 'ls', 'taotao', 'mage', 'chunge'];
// 3-判斷
// in_array(a, b); 判斷數據a是否在數組b中
// echo in_array($name, $names);
if (in_array($name, $names)) {
//重名，不可用
echo '×';
} else {
//可用
echo '√';
}
?>
獲取響應
HTTP響應分為3個部分，狀態行、響應頭、響應體。
// 給xhr注冊一個onreadystatechange事件，當xhr的狀態發生狀態發生改變時，會觸發這個事件。
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
//1. 獲取狀態行
console.log("狀態行:"+xhr.status);
//2. 獲取響應頭
console.log("所有的相應頭:"+xhr.getAllResponseHeaders());
console.log("指定相應頭:"+xhr.getResponseHeader("content-type"));
//3. 獲取響應體
console.log(xhr.responseText);
}
}
readyState
readyState: 記錄了XMLHttpRequest對象的當前狀態
// 0：請求未初始化（還沒有調用 open()）。
// 1：請求已經建立，但是還沒有發送（還沒有調用 send()）。
// 2：請求已發送，正在處理中
// 3：請求在處理中，通常響應中已有部分數據可用了，但是服務器還沒有完成響應的生成。
// 4：響應已完成，可以獲取並使用服務器的響應了。(我們只需要關注狀態4即可)