JavaScript中的ajax怎么用
工具/材料
電腦
Hbuilder
xampp
操作方法
-
01
第一步，新建一個html界面，這里我就新建一個“index.html”的界面。界面中有一個div和一個button。給div添加id，待會我們通過ajax把從服務器獲取到內容添加到div里面。
-
02
接著在script里面定義一個函數，這個函數就是用來創建ajax對象，并且向服務器發送請求的。如圖，我就定義一個變量ajax，然后使用if(window.XMLHttpRequest)來判斷瀏覽器是否支持XMLHttpRequest，如果支持，則創建一個對應的對象。
-
03
如果不支持XMLHttpRequest，則創建 ActiveXObject 對象。ActiveXObject是IE5和IE6里面的，這兩個版本的瀏覽器基本沒人用了，不過有些公司也要求兼容這兩版瀏覽器。
-
04
創建好對象之后，我們就可以調用open方法來發起請求。open里面有三個參數，第一個表示請求方式，這里我就使用get請求。第二個參數表示請求的地址，這里我就使用PHP文件，待會我再寫這個文件。第三個參數表示同步或者異步，true表示異步，false表示同步，這里我就用異步（ajax最大的特點就是異步）。之后，再調用send方法。如果是get請求，則send里面的參數為空。
-
05
之后，給onreadystatechange事件綁定一個匿名函數。onreadystatechange表示的是請求響應狀態改變事件。當向服務器發送請求時，請求的狀態，響應的狀態都會發生改變，而改變的時候就可以觸發這個事件了。
-
06
之后，判斷readyState和status的狀態，200狀態碼表示請求完成，4狀態碼表示響應就緒。之后，我們就可以把responseText里面的數據添加到div里面了。responseText是XMLHttpRequest對象的屬性，它保存著服務器返回的數據。
-
07
之后，我們給之前的按鈕綁定一個點擊事件。
-
08
然后寫好之前的“my.php”文件，這里我就寫一個最簡單的。
-
09
然后安裝好xampp，記住它的安裝路徑，然后啟動xampp，如圖所示，點擊“start”。
-
10
之后，找到xampp的安裝路徑，在里面找到htdocs文件夾，把我們之前編寫的index.html和my.php文件放到htdocs文件夾里面。
-
11
之后，在瀏覽器地址欄輸入地址，localhost/index.html，注意，localhost后面跟你的文件名要一致，我的是index.html，所以就寫index.html。然后按回車鍵就可以看到編寫好的界面了，我們點擊按鈕試試看效果。
-
12
之后，我們就會看到頁面在沒有全部刷新的情況下就從服務器獲取到數據了。
- End
特別提示
ajax要用到后端文件，而后端文件的執行需要用到服務器，所以學習前端的小伙伴也需要會點服務器和后端的知識哦。
- 發表于 2017-10-09 00:00
- 閱讀 ( 742 )
- 分類：電腦網絡
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章