ajax初步(1)
阿新 • • 發佈:2017-05-13
request get lin tel sogo 調用 oca head sta
搭建服務器環境,創建一個文件夾,本篇搭建為wamp環境,在www目錄下,創建ajax文件夾。
ajax概念:
AJAX 指異步JavaScript及XML(Asynchronous JavaScript And XML(異步JavaScript和XML)),是指一種創建交互式網頁應用的網頁開發技術。
使用Javascript向服務器提出請求並處理響應而不阻塞用戶!核心對象XMLHTTPRequest。通過這個對象,您的 JavaScript 可在不重載頁面的情況與Web服務器交換數據,即在不需要刷新頁面的情況下,就可以產生局部刷新的效果。AJAX 在瀏覽器與 Web 服務器之間使用異步數據傳輸(HTTP 請求),這樣就可使網頁從服務器請求少量的信息,而不是整個頁面。AJAX 可使因特網應用程序更小、更快,更友好。 如何使用: 1.創建XMLHTTPRequest對象; 2.調用open方法 3、調用send方法 一個簡單的例子: 在ajax文件夾下創建1.txt文件,裏面寫入“hello world”。 然後建一個文件ajax.html,寫入代碼:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () { var oBtn = document.getElementById(‘btn‘); oBtn.onclick = function () { var xhr = newXMLHttpRequest(); xhr.open(‘get‘,‘1.txt‘,true); xhr.send(); xhr.onreadystatechange = function () { if(xhr.readyState == 4){ if(xhr.status == 200){ alert(xhr.responseText); } } } } }</script> </head> <body> <input type="button" value="按鈕" id="btn"/> </body> </html>
然後在瀏覽器輸入:localhost/ajax/ajax.html;
點擊頁面按鈕,出現彈窗,彈出了hello world,則請求成功。
ajax初步(1)