原生ajax 傳送請求
阿新 • • 發佈：2022-12-02
原生ajax 傳送請求
原生髮送請求不帶引數<body>
<h2>原生ajax</h2>
<button>
原生髮送請求不帶引數
</button>
<script>
document.querySelector("button").onclick = function () {
// 1.例項化非同步物件 內建的,通過它 不重新整理頁面傳送請求
const xhr = new XMLHttpRequest();
// 2.設定請求的 地址 和方法
get請求傳遞引數<body>
<h2>get請求傳遞引數</h2>
<button>聊天機器人</button>
<script>
document.querySelector("button").onclick = function () {
// 1.例項化非同步物件 內建的,通過它 不重新整理頁面傳送請求
const xhr = new XMLHttpRequest();
// 2.設定請求的 地址 和方法
// 沒有params屬性,需要自行拼接
post請求傳遞引數
<body>
<h2>post請求傳遞引數</h2>
<button>傳送請求</button>
<script>
// 測試-表單提交介面
document.querySelector("button").onclick = function () {
// 1.例項化非同步物件 內建的,通過它 不重新整理頁面傳送請求
const xhr = new XMLHttpRequest();
// 2.設定請求的 地址 和方法
// 沒有params屬性,需要自行拼接
xhr.open("post", "http://ajax-api.itheima.net/api/data");
// post請求 一定要設定請求頭
xhr.setRequestHeader(
"content-type",
"application/x-www-form-urlencoded"
);
// 3.註冊回撥函式 伺服器響應內容回來之後觸發
xhr.addEventListener("load", function () {
// response 響應
console.log(xhr.response);
});
// 4.傳送請求 post請求引數url格式化拼接 多個引數用&符隔開
xhr.send("username=admin&passwoed=123456");
};
</script>
</body>
post傳送請求提交JSON
<body>
<h2>post傳送請求提交JSON</h2>
<button>傳送請求</button>
<script>
// 測試-表單提交介面
document.querySelector("button").onclick = function () {
// 1.例項化非同步物件 內建的,通過它 不重新整理頁面傳送請求
const xhr = new XMLHttpRequest();
// 2.設定請求的 地址 和方法
// 沒有params屬性,需要自行拼接
xhr.open("post", "http://ajax-api.itheima.net/api/login");
// post請求 一定要設定請求頭
xhr.setRequestHeader(
"content-type",
"application/json"
);
// 3.註冊回撥函式 伺服器響應內容回來之後觸發
xhr.addEventListener("load", function () {
// response 響應
console.log(xhr.response);
});
// 4.傳送請求 post請求引數url格式化拼接 多個引數用&符隔開
// 方法1
// const data ={username:'admin',password:'123456'}
// xhr.send(JSON.stringify(data));
// 方法2
const data =JSON.stringify({username:'admin',password:'123456'})
xhr.send(data)
};
</script>
</script>
</body>
原生ajax 傳送post請求 提交JSON 解析響應資料
<body>
<h2>原生ajax 傳送post請求 提交JSON 解析響應資料 </h2>
<button>傳送請求</button>
<script>
document.querySelector("button").onclick = function () {
// 1.例項化非同步物件 內建的,通過它 不重新整理頁面傳送請求
const xhr = new XMLHttpRequest();
// 2.設定請求的 地址 和方法
xhr.open("post", "http://ajax-api.itheima.net/api/login");
// 設定提交的內容格式為JSON
xhr.setRequestHeader("content-type", "application/json");
// 3.註冊回撥函式 伺服器響應內容回來之後觸發
xhr.addEventListener("load", function () {
// response 響應
console.log(xhr.response);
// 把字串轉換為物件
const res = JSON.parse(xhr.response);
alert(res.message);
});
// 4.傳送請求
// 請求體的資料 在send中提交
const data = { username: "admin", password: "123456" };
// 資料轉為JSON並提交給伺服器
xhr.send(JSON.stringify(data));
};
</script>
</body>