@Author：Runsen
@Date：2020/6/1
作者介紹：Runsen目前大三下學期，專業化學工程與工藝，大學沉迷日語，Python， Java和一系列數據分析軟件。導致翹課嚴重，專業排名中下。.在大學60%的時間，都在CSDN，CSDN是我從大一奮鬥到現在的地方。
今天，Runsen寫的是Ajax。AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。
在瞭解Ajax，需要弄清楚什麼是Asynchronous，異步。
異步更新網站
我們在訪問一個普通的網站時，當瀏覽器加載完HTML、CSS、JS以後，網站的內容就固定了。如果想讓網站內容發生更改，就必須刷新頁面才能夠看到更新的內容。
可如果用到異步更新，情況就大爲改觀了。比如，我們在訪問新浪微博時，看到一大半了，點擊底部的加載更多，會自動幫我們加載更多的微博，同時頁面並沒有刷新。
試想一下，如果沒有異步刷新的話，每次點擊“加載更多”，網頁都要刷新，體驗就太不好了。
web前端裏的異步更新，就要用到 Ajax。
我來說兩個簡單的例子：
百度下拉圖片，就是會發起新地請求，在xhr這裏可以看到ajax請求的url。
大家都發過微博吧，假設當前的這條微博處於正在發送的狀態時，你還能繼續刷微博查看其他內容麼？很明顯，完全可以，其實這就是一個ajax操作。
學習Ajax，先偷窺菜鳥教程，別人的知識就是香。
其實學Ajax，我會發起請求就夠了。
發送 Ajax 請求的五個步驟：
（1）創建異步對象。即 XMLHttpRequest 對象。
（2）使用open方法設置請求的參數。open(method, url, async)。參數解釋：請求的方法、請求的url、是否異步。
（3）發送請求。
（4）註冊事件。 註冊onreadystatechange事件，狀態改變時就會調用。
如果要在數據完整請求回來的時候才調用，我們需要手動寫一些判斷的邏輯。
（5）獲取返回的數據。
服務器軟件
常見的服務器軟件有：
-
文件服務器：Server-U、FileZilla、VsFTP等；
-
數據庫服務器：Oracle、MySQL、PostgreSQL、MSSQL等；
-
郵件服務器：Postfix、Sendmail等；
-
HTTP 服務器：Apache（免費、開源）、Nginx、IIS（微軟的.net服務器）、Tomcat（java編程的服務器）、NodeJS 等。
搭建 HTTP服務
這裏你可以下載去 WampServer 的官網下載軟件。
但是由於我不需要深入php等，因此我使用Centos搭建 HTTP服務，使用的服務器是Nginx，因此下面需要在Vim上寫代碼。
下面是安裝Nginx服務的過程，我的Centos的ip是192.168.92.90
[root@node01 ~] yum -y install pcre-devel zlib-devel
[root@node01 ~] wget http://nginx.org/download/nginx-1.14.2.tar.gz
[root@node01 ~] tar -xvf nginx-1.14.2.tar.gz
[root@node01 ~] cd nginx-1.14.2/
[root@node01 nginx-1.14.2] ./configure
[root@node01 nginx-1.14.2] make install
[root@node01 nginx-1.14.2] cd /usr/local/nginx/sbin/
[root@node01 sbin]./nginx
[root@node01 sbin]# curl 127.0.0.1:80
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
body {
width: 35em;
margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>
<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>
<p><em>Thank you for using nginx.</em></p>
</body>
</html>
[root@node01 ~] # 配置nginx開機啓動
[root@node01 ~] cd /lib/systemd/system
[root@node01 system] vim nginx.service
##########
[Unit]
Description=nginx
After=network.target
[Service]
Type=forking
ExecStart=/usr/local/nginx/sbin/nginx
ExecReload=/usr/local/nginx/sbin/nginx reload
ExecStop=/usr/local/nginx/sbin/nginx quit
PrivateTmp=true
[Install]
WantedBy=multi-user.target
[root@node01 system] systemctl enable nginx.service
[root@node01 system] systemctl start nginx.service
其實這個index的頁面
[root@node01 ~]# cd /usr/local/nginx/
[root@node01 nginx]# ls
client_body_temp fastcgi_temp logs sbin uwsgi_temp
conf html proxy_temp scgi_temp
[root@node01 nginx]# cd html/
[root@node01 html]# ls
50x.html index.html
因此我們需要在html文件夾下東西。
Chrome瀏覽器的跨域設置
在本地調試程序時，經常需要讀取本地文件，但是瀏覽器默認是不允許的，需要解決跨域問題，下面是常見的解決辦法：
Chrome
必須有快捷方式，然後鼠標選中右鍵->目標，現在裏面的內容應該是一個雙引號包圍的chrome.exe，然後先加一個空格，再加上–disable-web-security --user-data-dir=C:\chrome_data這句話，其中C:\chrome_data 是一個文件夾，隨便自己在哪裏新建一個都可以，記得這句話是加在雙引號打空格之後。
C:\Users\YIUYE\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files --disable-web-security --user-data-dir=C:\chrome_data
JS寫Ajax請求
[root@node01 html]# vim 1.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', 'ajax_info.txt');
// （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>
[root@node01 html]# vim ajax_info.txt
<p>Runsen學習ajax
</p>
本文先到這裏先，下篇主要講Jq寫Ajax請求中的GET和POST。
參考：
- http://www.cnblogs.com/smyhvae/p/8485028.html