由於課程設計的安排，我對H5+css樣結合js技術對開發前端項目有了更深的瞭解。隨後又學習ajax的使用方法，下面，我將講一下我所學到的關於ajax的知識。
一，ajax是什麼
全稱：asynchronous JavaScript and XML ；（基於XML的異步JavaScript） 通俗的說，就是通過ajax技術將後端的數據拿出來然後在前端頁面中顯示出來。 也相當於異步的JS和XML，要明確ajax不是一種編程語言，它不需要任何瀏覽器插件，但需要用戶允許JS在瀏覽器上面執行。
二，ajax的工作流程
三，ajax工作中比較重要的對象
1，XMLHttpRequest 對象
XMLHttpRequest 對象用於在後臺與服務器交換數據。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
對於大多數瀏覽器來說均支持 XMLHttpRequest 對象；但也有少部分不支持，如：IE5 和 IE6 則使用 ActiveXObject對象；
（在這裏因爲基本上很多瀏覽器都支持XMLHttpRequest ，所以就不在講解ActiveXObject的使用啦。）
創建 XMLHttpRequest 對象的語法：
variable=new XMLHttpRequest();
創建ActiveXObject對象的語法：
variable=new ActiveXObject("Microsoft.XMLHTTP");
四，ajax向服務器發送請求及相應
請求；
直接上代碼啦，，，
xmlhttp.open(method,url,async);
xmlhttp.send();
PS———如下：
代碼中：open方法裏面三個參數分別是；
method：請求的類型；GET 或 POST
url：文件在服務器上的位置
async：true（異步）或 false（同步）
對於method參數：一般選用get， 只有以下情況才使用post
1.更新服務器上的文件或數據庫
2.向服務器發送大量數據的時候
3.發送包含未知字符的用戶輸入的時候
url：就是你所請求的服務器的鏈接地址
async：true（異步）或 false（同步）只有這兩種情況，所以根據情況選擇。
響應；
XMLHttpRequest 對象的兩個 responseText 或 responseXML 屬性
responseText：獲得字符串形式的響應數據。如果服務器的響應不是XML文件的時候所用的響應；
responseXML：獲得 XML 形式的響應數據。只有服務器獲得XML文件類型的時候所做出的響應；
ajax執行中所涉及的事件
在執行任務的時候會有兩個屬性：分別是readyState和status
readyState屬性會有五個狀態的存在，分別是：
0: 請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒
status屬性有兩個狀態：
200: “OK”
404: 未找到頁面
也就是說，當readyState=4和status=200同時成立的時候表示響應已經就緒；
關於ajax重要參數屬性基本就這些，下面我分享一下我的課程設計所運用的ajax技術。
初始頁面如下：
點擊刷新之後的頁面如下（所得到的數據是在後臺數據庫所獲取的）
代碼解析如下：
詳細代碼在這兒：
//第一步：創建一個請求對象（負責要數據）
var xhr = new XMLHttpRequest();
//第二步：建立與服務端的連接（找到那個服務器去要數據，我所用到的服務器地址是已經創建好的，並且在服務器裏面已經創建好了測試的接口） xhr.open('get','https://mockapi.eolinker.com/2ZhGVxjacb39010e6753bd9c02ee803e6e3bfeab6e8007c/aboutus');
//設置頭信息，告訴服務器讓數據以表單的形式傳遞過去
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
// 第三部：向服務端發送請求
xhr.send();
// 第四部：接收服務端返回的數據
xhr.onreadystatechange = function (){
//xhr.readyState=4代表數據請求完成； xhr.status == 200 代表數據返回成功
if(xhr.readyState=4 && xhr.status == 200){
var responseData = JSON.parse(xhr.responseText);//json串 JSON.parse() 方法用於將一個 JSON 字符串轉換爲對象。
var sa = responseData.data;
var h3 = document.getElementById("title");
var h4 = document.getElementById("subTitle");
var p = document.getElementById("info");
h3.innerHTML = sa.title;
h4.innerHTML = sa.subTitle;
p.innerHTML = sa.info;