什麼是ajax及如何利用原生JS使用ajax(post)

什麼是ajax?

AJAX = Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML）。
AJAX 不是新的編程語言，而是一種使用現有標準的新方法。AJAX 是一種用於創建快速動態網頁的技術。通過在後台與伺服器進行少量數據交換，AJAX可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。有很多使用 AJAX 的應用程序案例：新浪微博、Google 地圖、開心網等等。

注意事項：使用ajax需要伺服器環境，所以想要使用ajax需要搭建伺服器
詳細步驟：

1. 新建index.html(自己隨便命名)文檔、css、js、images文件
2. 在css文件夾放入我寫的index.css2. 在js文件夾放入我封裝的ajax.js、我命名的index.js4. 在php文件夾放入我寫的index.php(這個文件只是一個PHP數組文件，可以看似一個php給前端的數據介面)5. 在index.html文檔內引入index.css、ajax.js、index.js6. 在index.html、index.css書寫入html、css代碼

代碼部分如下（本代碼是利用原生JS使用http協議中的get方法實現非同步獲取index.php數組中id=0的title和content）：

index.html代碼如下所示：

<!DOCTYPE html>

<html> <head> <meta charset="UTF-8"> <title>簡單事件的ajax</title>

<link rel="stylesheet" href="css/index.css"/>

<script src="js/ajax.js"></script> </head> <body> <ul class="h_box"></ul> <script src="js/index.js"></script> </body></html>

index.php代碼如下所示：

<?php

header("content-type:text/html;charse_utf8");//用來解決亂

$news=array( array( title=>朝鮮剛炸掉核試驗場特朗普就取消「特金會, content=>朝鮮副外相金桂冠稱，朝方願意在任何時候與美國對話。特朗普取消美朝峰會的決定與全世界的希望相悖。朝鮮最高領導人金正恩已盡最大努力，來與特朗普會談。 ), array( title=>古代男主人要和丫鬟行房, 丫鬟該怎麼辦?, content=>我們在看古裝電視劇的時候，經常會看到裡面一些大戶人家家中有許多干各種雜活的年輕女生，這些女生就是丫鬟。 丫鬟是社會最底層的人群，一生命運往往都是由主人家決定的。丫鬟多是因家庭生活困苦而被賣到主人家裡的，也有些是被人販子拐賣的（多為兒童）。此外，還有一部分丫鬟來自犯罪官員家的女眷，因官員犯了重罪，往往家產充公，女眷罰入功臣之家做丫鬟。

丫鬟也有等級之分，服侍主人的丫鬟地位最高，叫大丫鬟或貼身丫鬟。沒有固定主子或專供使役的叫小丫鬟。以《紅樓夢》為例，等級最高的是一等大丫鬟，伺候賈母、王夫人等賈府中地位最高的人。其次是二等大丫鬟，專門伺候小輩主子的，如賈寶玉房裡的晴雯、麝月等丫鬟。再接下來就是各種無名氏的小丫鬟了。

丫鬟沒有人身自由的概念，一切都完全要按主人家的意願。除了服侍主人的日常起居，或干一些雜役外。如果男主人看上了哪個丫鬟，隨時可以拉她行房，丫鬟是沒有權利說不的。《紅樓夢》中賈寶玉的第一次就是在貼身丫鬟襲人身上完成的。書中寫道：「襲人忙趁眾奶娘丫鬟不在旁時，另取出一件中衣來與寶玉換上。寶玉含羞央告道：「好姐姐，千萬別告訴人。」襲人亦含羞笑問道：「你夢見什麼故事了？是那裡流出來的那些髒東西？」寶玉道：「一言難盡。」說著便把夢中之事細說與襲人聽了。然後說至警幻所授雲雨之情，羞的襲人掩面伏身而笑。寶玉亦素喜襲人柔媚嬌俏，遂強襲人同領警幻所訓雲雨之事。襲人素知賈母已將自己與了寶玉的，今便如此，亦不為越禮，遂和寶玉偷試一番，幸得無人撞見。自此寶玉視襲人更比別個不同，襲人待寶玉更為盡心。」從這段就可以看出男主人和丫鬟行房在古代是很正常的事。這些和男主人有過雲雨之情的丫鬟，還有機會被男主人收為小妾，這對一個丫鬟而言，可以說是最好的出路了。丫鬟也並非一輩子都要留在主人家裡的，她們一般有幾種出路：一是被男主人收為小妾；二是由主人指定嫁給家中的男性奴僕；三是轉賣嫁人。如果這幾條路都走不通，那就只能繼續留在主人家。隨著年齡的增大，丫鬟就變成了老媽子或嬤嬤了。 ), array( title=>美國眾議院通過國防授權法案鼓勵「美台軍事往來, content=>【環球網綜合報道】據台灣「中央社」25日消息，美國聯邦眾議院24日表決通過2019財政年度國防授權法案，該法案要求強化台灣軍事實力，並呼籲遵循「與台灣關係法」，美國可派遣高級軍事官員訪台。 報道稱，美國聯邦眾議院以351票贊成、66票反對，通過了2019財政年度國防授權法案(HR 5515)。

2017年7月14日，美國國會眾議院審議通過「2018財年國防授權法案」，其中要求美國國防部長評估美國與台灣軍艦互訪的可能性。對此，外交部發言人陸慷曾在例行記者會上表示，有關條款嚴重違背美一個中國政策和中美三個聯合公報原則，干涉中國內政，中方已向美方提出嚴正交涉，敦促美方充分認清上述法案有關條款的嚴重危害性，不得讓含相關條款的法案通過成法，不要開歷史倒車，以免損害中美合作大局。

國台辦發言人安峰山也曾表示，台灣問題是中國的內政，我們堅決反對美台之間進行任何形式的官方往來和軍事聯繫。我要強調指出的是，任何挾洋自重，圖謀損害國家主權和領土完整的行徑，都必將遭到全體中國人民的共同反對，也是不可能得逞的。 ), array( title=>一把年紀還老不正經，讓人吐槽的6大明星, content=>趙忠祥：趙忠祥在離開央視之後面目全非，行為也總是很怪異，還自封「芙蓉爺爺」。 藍心湄：曾被曝出堅持不婚的她遠赴日本受精懷孕，被網友懷疑炒作。 劉曉慶：劉曉慶早年以《小花》一炮而紅，隨後的《武則天》更是傾倒了許多觀眾，然而隨著年紀的增長，越來越沒有節操，除了裝嫩賣萌之外，60歲的高齡還大張旗鼓的結婚辦喜事。謝賢：謝賢年輕時的風流韻事自然不在話下，晚年依然風流不改，以70多歲的高齡拿下80後的上海女孩COCO。當兒子謝霆鋒笑他被風乾了70多年，他還不高興大罵謝霆鋒神經病：人家只有30出頭呀！宮雪花：年過半百還穿著奇裝異服打扮得花枝招展出現在大眾面前，美其名曰覺得自己還不老，還可以和年輕小姑娘爭艷，看到她臉上厚厚的脂粉不禁讓人不寒而慄。

孫海英：《赤壁》是爛片就出自他的口，脾氣就好比他出演的倔老頭石光榮。

), ); $ty=array( array(title=>體育籃球1,content=>體育籃球體育籃球1), array(title=>體育籃球2,content=>體育籃球體育籃球2), array(title=>體育籃球3,content=>體育籃球體育籃球3), array(title=>體育籃球4,content=>體育籃球體育籃球4), ); $movie=array(

array(title=>速度與激情81,content=>速度與激情8速度與激情81),

array(title=>速度與激情82,content=>速度與激情8速度與激情82), array(title=>速度與激情83,content=>速度與激情8速度與激情83), array(title=>速度與激情84,content=>速度與激情8速度與激情84), ); $yule=array( array(title=>奔跑吧兄弟1,content=>快樂大本營快樂大本營1), array(title=>奔跑吧兄弟2,content=>快樂大本營快樂大本營2), array(title=>奔跑吧兄弟3,content=>快樂大本營快樂大本營3), array(title=>奔跑吧兄弟4,content=>快樂大本營快樂大本營4),

);

$con=$_GET[id]; if($con==0){ echo json_encode($news); }else if($con==1){ echo json_encode($ty); }else if($con==2){ echo json_encode($movie); }else if($con==3){ echo json_encode($yule);

}

index.css代碼如下所示：

padding: 0; margin: 0; list-style: none;}.h_box{ width: 400px; height: auto; background: pink; padding: 10px 20px; margin: 0 auto;}

ajax.js代碼如下所示

//methed get(默認) post

//url 必選//asynch true默認//dataType 可選 text json xml html (html script)//data 可選id=1&name=zhangsan&age=18 <={id:1,name:zhangsan,age:18}//success function(){}//ajax(mathod:get,url:data.php,asynch:true,data:id=ty,success:function(){}}) //配置項用jusn格式//ajax({url:data.php,success:function(){}})function ajax({url,data,success,method=get,asynch=true,dataType=text}) { if(!url){ return; } let dataStr=; if(data){ if(typeof data=="string"){ data=data; }else if(typeof data==object){ for(let i in data){ dataStr+=`${i}=${data[i]}&`; } dataStr=dataStr.slice(0,-1); } } let xml=new XMLHttpRequest(); if(method==get){ xml.open(method,url+?+dataStr,asynch); xml.send(); }else if(method=post){ xml.open(method,url,asynch); xml.setRequestHeader(content-Type,application/x-www-form-urlencoded); if(data){ xml.send(dataStr); }else{ xml.send(null); } } xml.onreadystatechange=function(){ if(xml.readyState==4){ if(xml.status==200){ if(dataType==text){ success(xml.responseText); }else if(dataType==json){ success(JSON.parse(xml.response)); }else if(dataType==xml){ success(xml.responseXML); } } } }}

index.js代碼如下所示：

window.onload=function(){

//二、post打開方式 let ul=document.querySelector(ul); let xml=new XMLHttpRequest(); xml.open(post,php/index.php?id=1,true); xml.send(); xml.onreadystatechange=function(){ //幫你找 if (this.readyState == 4 && this.status == 200) { let hJb =JSON.parse(xml.response); //必須按照json的標準格式寫 //document.body.innerText=xml.responseText; hJb.forEach(function(value,index){ ul.innerHTML+=`<li><br/>${value.title}<br/>${value.content}<li>`; }) } }};