ajax學習筆記

時間 2019-11-16

標籤 ajax 學習筆記欄目 Ajax 简体版

原文原文鏈接

問題

要作的仍舊是很簡單javascript

- 請求php

- 響應css

常見的請求方式有如下幾種html

img標籤的src
link標籤引入css
script標籤引入js
form標籤提交

上拉加載更多(以及主動刷新頁面部份內容),須要客戶端主動用代碼從服務端請求數據,上面的方案彷佛不能知足需求了.ajax技術就是爲了解決這樣一個問題.java

解決

經過XMLHttpRequest對象,咱們能夠主動的從服務器獲取數據以刷新部分頁面ajax

You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing.

XMLHttpRequest對象,不只像字面那樣只能請求XML格式的數據,還能夠請求其餘類型的數據,好比json等;並且支持的協議也不單單是http,對於ftp和file協議也是支持的json

Despite its name, XMLHttpRequest can be used to retrieve any type of data, not just XML, and it supports protocols other than HTTP (including file and ftp).bash

使用XMLHttpRequest請求json數據

客戶端代碼:服務器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>學生列表</title>
</head>
<body>
	<ul id="stus">
		
	</ul>
	<script type="text/javascript">
		// 獲取元素
		var stus_tag = document.getElementById('stus');

                //1.初始化XMLHttpRequest對象
		var xhr = new XMLHttpRequest();

                //2.調用監聽方法
		xhr.onload = function () {
			if (this.readyState !== 4) {return;}
			// console.log(this.responseText);
			// 遍歷數據,展現
			var stus = JSON.parse(this.responseText);
			for (var i = 0; i < stus.length; i++) {
				// console.log(stus[i]);
				// 建立li
				var li_tag = document.createElement('li');
				// 設置內容
				li_tag.innerHTML = stus[i].name;
				// 拼接
				stus_tag.appendChild(li_tag);
			}
		}
                //3.設置請求方法和請求路徑
		xhr.open('GET','./students.php');
                //4.發送請求
		xhr.send();
	</script>
</body>
</html>
複製代碼

服務端代碼app

<?php 
	$stus =  array(
		array('id' => 1,'name' => '張三', 'age' => 28),
		array('id' => 2,'name' => '李四', 'age' => 29),
		array('id' => 3,'name' => '王五', 'age' => 30),
		array('id' => 4,'name' => '趙六', 'age' => 31),
		array('id' => 5,'name' => '田七', 'age' => 32)
	 );

	header("Content-Type:Application/json");

	echo json_encode($stus);	
 ?>
複製代碼

客戶端代碼其實有一點問題,onload函數中打印readyState

xhr.onload = function () {
    console.log(this.readyState);
    if (this.readyState !== 4) {return;}
    .....
}複製代碼

永遠都只能打印4

只有在onreadystatechange中才能夠監聽到readyState的變化,修改代碼以下

xhr.onreadystatechange = function () {
                        console.log(this.readyState);
			if (this.readyState !== 4) {return};
			var stus = JSON.parse(this.responseText);
			for (var i = 0; i < stus.length; i++) {
				// console.log(stus[i]);
				// 建立li
				var li_tag = document.createElement('li');
				// 設置內容
				li_tag.innerHTML = stus[i].name;
				// 拼接
				stus_tag.appendChild(li_tag);

				li_tag.id = stus[i].id;
			}
		}複製代碼

打印以下

狀態說明中還有0

須要在open以前調用onreadystatechange才能打印全部狀態,奇怪,確實是在open以前調用的啊,猜想是否是網速緣由,執行太快了

傻了傻了,初始值是0,此時readyState尚未發生化,onreadystatechange天然不會打印0

上述示例已經完成了一個基本的應用,此外就是一些方法和屬性的使用.

發送一個post請求,設置請求頭,設置請求參數

給li標籤添加點擊事件,點擊彈出對應條目的年齡

li_tag.id = stus[i].id;

li_tag.onclick = function () {
    //從新發起請求,獲取age
    var xhr2 = new XMLHttpRequest();
    xhr2.onload = function () {
        if (this.readyState !== 4) {return}
        alert(this.responseText);
    }
xhr2.open('POST','./students.php');
//設置請求頭
xhr2.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
var para = "id=" + this.id;
//傳遞參數
xhr2.send(para);
}
複製代碼

服務端代碼

<?php 

	$stus =  array(
		array('id' => 1,'name' => '張三', 'age' => 28),
		array('id' => 2,'name' => '李四', 'age' => 29),
		array('id' => 3,'name' => '王五', 'age' => 30),
		array('id' => 4,'name' => '趙六', 'age' => 31),
		array('id' => 5,'name' => '田七', 'age' => 32)
	 );

	header("Content-Type:Application/json");

	if ($_SERVER['REQUEST_METHOD'] === "GET") {
		echo json_encode($stus);
	}elseif ($_SERVER['REQUEST_METHOD'] === "POST") {
		foreach ($stus as $item) {
			if ($_POST['id'] == $item['id']) {
				echo $item['age'];
			}
		}
	}
	
 ?>
複製代碼

設置響應頭

服務端設置響應頭

能夠看出post狀態下返回的是年齡字符串,可是response中的Content-Type倒是application/json,這樣雖然沒有不會出現錯誤,可是實際上倒是欺騙了客戶端,正確的作法是content-type和實際返回給客戶端的數據類型保持一致,改爲以下

客戶端設置響應頭

設置responseType則由ajax將服務端返回的數據處理成json,無論服務端設置

xhr.open('GET','./students.php');
		xhr.responseType = 'json';
		xhr.send();
複製代碼

服務端去掉下面的代碼

// header("Content-Type:Application/json");
複製代碼

由於上面的示例代碼中都是對responseText進行處理,能夠發現,設置xhr的responseType爲json的時候,壓根不返回responseText,直接返回處理好的response,於是數據渲染失敗.

get請求如何傳參數?

If the request method is GET or HEAD, the bodyparameter is ignored and the request body is set to null.

這是send()函數的說明,若是是get請求,會忽略send()中的參數,並設置爲null.真的是這樣嗎?那麼是否應該把參數拼接在url後面?

get請求下send中傳參

xhr.send('foo=value');
複製代碼

發現確實不見了

服務端打印,也見不到提交的get參數

var_dump($_GET);
複製代碼

那麼仍是把參數拼接在url後面

xhr.open('GET','./students.php?foo=value');
複製代碼

能夠打印$_GET

也能夠看到上傳的參數

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。