使用Ajax發送http請求（get&post請求）

時間  2020-08-03
標籤 使用 ajax 發送 http 請求 get&post post 欄目 Ajax 简体版
原文   原文鏈接

本文最初發表於博客園，並在GitHub上持續更新前端的系列文章。歡迎在GitHub上關注我，一塊兒入門和進階前端。javascript

如下是正文。php

同步和異步

同步和異步的概念

  • 同步：必須等待前面的任務完成，才能繼續後面的任務。html

  • 異步：不受當前任務的影響。前端

拿排隊舉例：java

  • 同步：在銀行排隊時，只有等到你了，纔可以去處理業務。git

  • 異步：在排隊的時候，能夠玩手機。github

異步更新網站

咱們在訪問一個普通的網站時，當瀏覽器加載完HTML、CSS、JS之後，網站的內容就固定了。若是想讓網站內容發生更改，就必須刷新頁面纔可以看到更新的內容。web

可若是用到異步更新，狀況就大爲改觀了。好比，咱們在訪問新浪微博時，看到一大半了，點擊底部的加載更多，會自動幫咱們加載更多的微博，同時頁面並無刷新。ajax

試想一下，若是沒有異步刷新的話，每次點擊「加載更多」，網頁都要刷新，體驗就太很差了。json

web前端裏的異步更新，就要用到 Ajax。

Ajax

Ajax 的概念

在瀏覽器中，咱們能夠在不刷新頁面的狀況下，經過ajax的方式去獲取一些新的內容。

Ajax：Asynchronous Javascript And XML（異步 JavaScript 和 XML）。它並非憑空出現的新技術，而是對於現有技術的結合。Ajax 的核心是 js 對象：XMLHttpRequest。

發送 Ajax 請求的五個步驟

其實也就是 使用 XMLHttpRequest 對象的五個步驟。

咱們先回憶一下，一個完整的HTTP請求須要的是：

  • 請求的網址、請求方法get/post。

  • 提交請求的內容數據、請求主體等。

  • 接收響應回來的內容。

發送 Ajax 請求的五個步驟：

（1）建立異步對象。即 XMLHttpRequest 對象。

（2）設置請求的參數。包括：請求的方法、請求的url。

（3）發送請求。

（4）註冊事件。 onreadystatechange事件，狀態改變時就會調用。

若是要在數據完整請求回來的時候才調用，咱們須要手動寫一些判斷的邏輯。

（5）獲取返回的數據。

Ajax 請求：get 請求舉例

（1）index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<h1>Ajax 發送 get 請求</h1>
<input type="button" value="發送get_ajax請求" id='btnAjax'>

<script type="text/javascript">
    // 綁定點擊事件
    document.querySelector('#btnAjax').onclick = function () {
        // 發送ajax 請求 須要 五步

        // （1）建立異步對象
        var ajaxObj = new XMLHttpRequest();

        // （2）設置請求的參數。包括：請求的方法、請求的url。
        ajaxObj.open('get', '02-ajax.php');

        // （3）發送請求
        ajaxObj.send();

        //（4）註冊事件。 onreadystatechange事件，狀態改變時就會調用。
        //若是要在數據完整請求回來的時候才調用，咱們須要手動寫一些判斷的邏輯。
        ajaxObj.onreadystatechange = function () {
            // 爲了保證 數據 完整返回，咱們通常會判斷 兩個值
            if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
                // 若是可以進到這個判斷 說明 數據 完美的回來了,而且請求的頁面是存在的
                // 5.在註冊的事件中 獲取 返回的 內容 並修改頁面的顯示
                console.log('數據返回成功');

                // 數據是保存在 異步對象的 屬性中
                console.log(ajaxObj.responseText);

                // 修改頁面的顯示
                document.querySelector('h1').innerHTML = ajaxObj.responseText;
            }
        }
    }
</script>
</body>
</html>

（2）02-ajax.php：

<?php
	echo 'smyhvae';
 ?>

效果以下：

Ajax 請求：post 請求舉例

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<h1>Ajax 發送 get 請求</h1>
<input type="button" value="發送put_ajax請求" id='btnAjax'>
<script type="text/javascript">

    // 異步對象
    var xhr = new XMLHttpRequest();

    // 設置屬性
    xhr.open('post', '02.post.php');

    // 若是想要使用post提交數據,必須添加此行
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    // 將數據經過send方法傳遞
    xhr.send('name=fox&age=18');

    // 發送並接受返回值
    xhr.onreadystatechange = function () {
        // 這步爲判斷服務器是否正確響應
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    };
</script>
</body>
</html>

XMLHttpRequest 對象詳解

咱們在上一段講解了使用 XMLHttpRequest 對象的五個步驟。本段，咱們講一下注意事項。

發送請求

發送請求的方法：

open(method, url, async);

參數解釋：

  • method：請求的類型；GET 或 POST

  • url：文件在服務器上的位置

  • async：true（異步）或 false（同步）

另外還有個方法：（僅用於 POST 請求）

send(string);

POST請求時注意

若是想讓 像form 表單提交數據那樣使用POST請求，就須要使用 XMLHttpRequest 對象的 setRequestHeader()方法 來添加 HTTP 頭。而後在 send() 方法中添加想要發送的數據：

xmlhttp.open("POST","ajax_test.php", true);

	xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

	xmlhttp.send("name=smyhvae&age=27");

onreadystatechange 事件

註冊 onreadystatechange 事件後，每當 readyState 屬性改變時，就會調用 onreadystatechange 函數。

readyState：（存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化）

  • 0: 請求未初始化

  • 1: 服務器鏈接已創建

  • 2: 請求已接收

  • 3: 請求處理中

  • 4: 請求已完成，且響應已就緒

status：

  • 200: "OK"。

  • 404: 未找到頁面。

在 onreadystatechange 事件中，當 readyState 等於 4，且狀態碼爲200時，表示響應已就緒。

服務器響應的內容

  • responseText：得到字符串形式的響應數據。

  • responseXML：得到 XML 形式的響應數據。

若是響應的是普通字符串，就使用responseText；若是響應的是XML，使用responseXML。

Ajax 傳輸 XML

XML 語法

XML（Extensible Markup Language）：可擴展標記語言。詳細語法能夠查看：#。

一、XML聲明：

<?xml version="1.0" encoding="UTF-8"?>

第一行的聲明，指定了XML版本(1.0)以及使用的編碼。

二、自定義標籤：

XML中沒有默認的標籤，全部的標籤都是咱們本身已定義的。例如：

<fox></fox>
<name></name>

XML中沒有單標籤，都是雙標籤。

三、根節點：

XML中必需要有一個根節點，全部的子節點都放置在根節點下。例如：

<root1>
  <name></name>
</root1>

XML 解析

由於 XML 就是標籤，因此咱們能夠直接用解析Dom元素的方法解析 XML。

解析過程：

（1）html 部分：（包含 xml ）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <person id='personXML'>
      <name>fox</name>
      <age>18</age>
      <skill>小花花</skill>
  </person>
</body>
</html>

（2）解析 xml：

<script type="text/javascript">
    var xmlObj = document.getElementById("personXML");
    var name = xmlObj.getElementsByTagName('name')[0].innerHTML;

    console.log(name);
</script>

ajax 請求解析xml（舉例）

（1）get_xml.php：（裏面包含了xml文件）

<?php
	// 設置 返回的爲 xml
	header('content-type:text/xml; charset= utf-8');

	// 讀取xml文件 並返回
	echo file_get_contents('info/star.xml');

 ?>

上方代碼解釋：

  • php 自帶了 讀取 xml 文件的方法。

  • 在 php 中，若是要使用xml傳輸數據，則須要使用header()設置返回的內容爲xml。

（2）get_xml.html：（Ajax 請求，獲取並解析xml）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="button"  value="獲取XMl數據" id='getXML'>
</body>
</html>
<script type="text/javascript">
	document.querySelector('#getXML').onclick = function () {
		var ajax = new XMLHttpRequest();

		ajax.open('get','get_XMl.php');

		ajax.send();

		ajax.onreadystatechange = function () {
			if (ajax.readyState == 4 && ajax.status==200) {
				// 若是 返回的是 xml文件
				console.log(ajax.responseText);

				// 異步 對象中 有另一個屬性 用來專門獲取 xml
				// xml對象 在瀏覽器段 就是一個 document對象
				// 解析時 能夠直接使用 querySelector 或者 getElementById等等 document對象 有的語法
				console.log(ajax.responseXML);
				console.log(ajax.responseXML.querySelector('kuzi').innerHTML);
				// 下面這個 頁面文檔對象 若是要獲取某個標籤
				console.log(window.document);

			}
		}
	}
</script>

Ajax 傳輸 JSON

JSON 的語法

JSON(JavaScript Object Notation)：是ECMAScript的子集。做用是進行數據的交換。語法更爲簡潔，網絡傳輸、機器解析都更爲迅速。

語法規則：

  • 數據在鍵值對中

  • 數據由逗號分隔

  • 花括號保存對象

  • 方括號保存數組

數據類型：

  • 數字（整數或浮點數）

  • 字符串（在雙引號中）

  • 邏輯值（true 或 false）

  • 數組（在方括號中）

  • 對象（在花括號中）

  • null

示例：

// 對象
{
  "name":"fox",
  "age":"18",
  "sex":"true",
  "car":null
}

// 數組
[
  {
      "name":"小小胡",
      "age":"1"
  },
  {
      "name":"小二胡",
      "age":"2"
  }
]

JavaScript中：json 字符串 <--> js 對象

基本上，全部的語言都有將 json 字符串轉化爲該語言對象的語法。

好比在 js中：

  • JSON.parse()：將JSON字符串轉化爲 js 對象。例如：
// 將 JSON 字符串格式化爲 js 對象
	var jsObj = JSON.parse(ajax.responseText);
  • JSON.stringify()：將 JS 對象轉化爲JSON字符串。例如：
var Obj = {
	  name: "fox",
	  age: 18,
	  skill: "撩妹"
	};

	console.log(Obj);

	// 將 js 對象格式化爲 JSON 字符串
	var jsonStr = JSON.stringify(Obj);

PHP中：json 字符串 <--> js 對象

  • json_decode()方法：將json字符串轉化爲變量。

  • json_encode()方法：將變量轉化爲json字符串。

代碼舉例：

<?php
    header("Content-Type:text/html;charset=utf-8");
    // json字符串
    $jsonStr = '{"name":"itcast","age":54,"skill":"歌神"}';
    // 字符串轉化爲 php對象
      print_r(json_decode($jsonStr));

      echo "<br>";
      // php數組
      $arrayName = array('name' =>'littleFox' ,'age' => 13 );
      // php對象 轉化爲 json字符串
      print_r(json_encode($arrayName));
 ?>

輸出結果：

stdClass Object ( [name] => itcast [age] => 54 [skill] => 歌神 )
	{"name":"littleFox","age":13}

ajax 請求解析 json（舉例）

（1）Person.json:

{
	"name":"小強",
	"skill":"砍樹",
	"friend":"老闆"
}

（2）myJson.php：

<?php

	// 讀取json文件 並返回便可
	echo  file_get_contents('info/Person.json');

 ?>

（3）getJson.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1>獲取 json 數據</h1>
	<input type="button"  value="獲取json" id='btnJson'>
</body>
</html>
<script type="text/javascript">
	// 獲取的是一個 若是要獲取多個
	// document.querySelectorAll(selector)
	document.querySelector("#btnJson").onclick = function () {
		var ajax = new XMLHttpRequest();

		ajax.open('get','myJson.php');

		ajax.send();

		ajax.onreadystatechange = function () {
			if (ajax.readyState==4&&ajax.status==200) {
				// json 字符串 是字符串 因此咱們能夠 經過  responseText獲取
				console.log(ajax.responseText);

				// 轉化爲 js對象
				var jsObj = JSON.parse(ajax.responseText);

				console.log(jsObj);

				// 拼接ul s
				var str = '';

				str+='<ul>';
				str+='<li>'+jsObj.name+'</li>';
				str+='<li>'+jsObj.skill+'</li>';
				str+='<li>'+jsObj.friend+'</li>';
				str+='</ul>';

				// 設置到界面上

				document.body.innerHTML = str;
			}
		}
	}
</script>

演示效果：

個人公衆號

想學習代碼以外的軟技能？不妨關注個人微信公衆號：生命團隊（id：vitateam）。

掃一掃，你將發現另外一個全新的世界，而這將是一場美麗的意外：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程