js進階ajax基本用法（創建對象，連接服務器，發送請求，獲取服務器傳過來的數據）

一、總結

1、ajax的瀏覽器的window對象的XMLHtmlRequest對象的兩個重要方法：open()，send()

2、ajax對象XMLHtmlRequest對象的三個重要屬性：a、onreadystatechange b、readyState c、status d、responseText e、statusText

3、onreadystatechange判斷狀態改變屬性的使用： myajax.onreadystatechange=function(){}

4、ajax使用四個步驟（詳細看下面代碼）：

a、創建XMLHttpRequest對象
b、open()方法連接服務器
c、send()方法發送請求給服務器
d、onreadystatechange屬性連接函數以接收responseText屬性從服務器返回的數據

二、js進階ajax基本用法

准備工作

配置本地服務器環境，這里推薦安裝：phpstudy，優點：一次性安裝，無須配置即可使用，非常方便

Ajax 簡介

什么是 Ajax ？

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）

AJAX 可以通過在后台與服務器進行少量數據交換，使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。

Ajax 的基本用法

創建 XMLHttpRequest 對象
語法：var myAjax=new XMLHttpRequest();
老版本的 IE（IE5 和 IE6）使用 ActiveX 對象：
var myAjax=new ActiveXObject("Microsoft.XMLHTTP");
向服務器發送請求:使用open() 和 send() 方法：
- open(method,url,async):規定請求的類型、URL 以及是否異步處理請求。
  1. method：請求的類型；GET 或 POST
  2. url：文件在服務器上的位置
  3. sync：true（異步）或 false（同步）
- send(string):string：僅用於 POST 請求
服務器響應
如需獲得來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。
- responseText 屬性:responseText 屬性返回字符串形式的響應
- responseXML 屬性:如果來自服務器的響應是 XML，而且需要作為 XML 對象進行解析，請使用 responseXML 屬性
onreadystatechange 事件
當請求被發送到服務器時，我們需要執行一些基於響應的任務。每當 readyState 改變時，就會觸發 onreadystatechange 事件。
- XMLHttpRequest 對象的三個重要的屬性：
  1. onreadystatechange:存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
  2. readyState:存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
    1. 0: 請求未初始化
    2. 1: 服務器連接已建立
    3. 2: 請求已接收
    4. 3: 請求處理中
    5. 4: 請求已完成，且響應已就緒
  3. status:200: "OK"/404: 未找到頁面

三、代碼

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>ajax01</title>
 6     <script src="ajax.js"></script>
 7 </head>
 8 <body>
 9     <input type="button" id="btn" value="測試按鈕">
10     <script>
11     /*
12         兼容IE6，IE5
13         if (window.XMLHttpRequest){
14             var myajax=new XMLHttpRequest()
15         }else{
16             var myajax=new ActiveXObject("Microsoft.XMLHTTP");
17         }
18         */
19     var btn=document.getElementById('btn')
20     btn.onclick=function (){
21         //1.創建Ajax對象
22         var myajax=new XMLHttpRequest()
23         //alert(myajax) //IE6及其以下版本不支持
24         //2.連接服務器
25         // open(方法，文件路徑，異步傳輸)
26         myajax.open('GET','test1.txt',true);
27         //3.發送請求
28         myajax.send(null);
29         //4.接受返回的數據
30         myajax.onreadystatechange=function(){ //1、onreadystatechange屬性的使用時連接函數 31             if(myajax.readyState==4){ //2、readyState是XMLHttpRequest對象的屬性，所以要是對象.屬性的方式訪問 32                 if (myajax.status==200) {
33                     alert('成功'+myajax.responseText)  //3、js中+號連接字符串 4、XMLHttpRequest對象的responseText屬性獲取從服務器返回的數據 34                 }else{
35                     alert('失敗'+myajax.status)
36                 }
37             }
38         }
39 
40     }
41     </script>
42 </body>
43 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS中獲取session中傳過來的值對象 js獲取頁面傳過來的參數 JS獲取頁面傳過來的值 Thymleaf js直接獲取后台傳過來的對象或者對象的屬性以及map flask獲取get請求傳過來的數組 ECharts動態獲取后台傳過來的json數據進行多個折線圖的顯示，折線的數據由后台傳過來頁面中js接收tp5 assign方式傳過來的數組對象 js 用window.open(參數) 打開新窗口，在新窗口怎么獲取傳過來的參數動態獲取后台傳過來的值作為select選項 java 前台用js接收后台傳過來的list