博主信息
我的博客
博文
61
粉絲
1
評論
0
訪問量
6328
積分:0
P豆:125.5

新疆十一选五开奖记录:0514-ajax的看法

2019年05月15日 11:01:31閱讀數:298博客 / 我的博客 / ajax

新疆十一选五预测号码今天 www.envkt.com //自己看法:

1、AJAX 不是新的編程語言,而是一種使用現有標準的新方法。

2、AJAX 是與服務器交換數據并更新部分網頁的技術,在不重新加載整個頁面的情況下

3、之前交互用xml格式比較多,現在json格式是主流,因為xml太臃腫了,我們就不再學習了;

4、一共分五部走: (1) 創建(xhr)、(2) 注冊回調函數、(3)配置請求(OPEN(),get/post) 、(4)發送請求send(null)

                               (5)創建回調函數

5、詳細說明:https://www.jb51.net/article/88084.htm

//以下是老師代碼

# Ajax

## 1. 傳統的HTTP請求是什么樣子的?

* 一次HTTP請求對應一個頁面;
* 如果想在當前頁面中發現請的http請求,頁不跳轉當前頁面,就必須需要一個請求代理;
* 這個請求代理,代理了用戶的請求,向服務器發出新的http請求;
* 而這個代理,我們可以用一段 javascript代碼來完成,由js來發出http請求;
* 等js收到服務器端響應的數據后,再由js來刷新頁面更新數據;
* 這時,給用戶的感覺就是我仍停留在當前頁面,而頁面上的數據卻在不停的更新中,用戶體驗超級棒;
* 這個代理用戶發出http請求的js代碼,宏觀上也可以叫作客戶端,因為任何能發起請求的實體都可以視為客戶端;

-----------------------------------------------------------------------------------------

## 2. Ajax 是什么?

* Ajax 就是剛才我們所說的那個代理用戶發起http訪問請求的js代碼;
* Ajax 的全稱是: Asynchronous JavaScript and XML[異步的 JavaScript 和 XML];
* 之前交互用xml格式比較多,現在json格式是主流,因為xml太臃腫了,我們就不再學習了;
* 同步與異步的區別:
 * 同步是指客戶端與服務器端處理的是同一個請求,服務器響應成功,客戶端也接收到返回的數據,這個請求才算完成;
 *異步是指客戶端與服務器可以同時處理不同的請求,客戶端通過事件監聽判斷服務器端是否響應成功并返回數據;
* Ajax 是目前最主流的異步請求方式,得到了幾乎所有的主流瀏覽器的支持,包括IE在內.

-----------------------------------------------------------------------------------------

## 3. Ajax 的主要應用場景?
``
* 表單驗證;
* 數據實時更新,例如股票行情;
* 在線地圖;
* 其它需要數據實時加載,無刷新的使用場景.

-----------------------------------------------------------------------------------------

## 4. Ajax 中常用的屬性和方法

* 對象: `XMLHttpRequest()` 簡稱 xhr對象;   //request 請求
* 事件: `onreadystatechange()` 監聽就緒狀態屬性的變化;   //onreadystatechange 隨時準備狀態改變
* 屬性: `readyState` 請求狀態值,有四個值,我們只對數據就緒狀態的值:4感興趣;  //state 狀態
* 屬性: `status` 請求狀態碼, 返回 200 時,表示已從服務器上成功的獲取到了返回的文本;   //status 地位
* 屬性: `responseText`, 從服務器端返回的文本內容;       //response  響應                         
* 方法: `open('請求類型','請求的url',請求方式,默認為true異步)`:設置請求參數
* 方法: `send()`: 發送請求,GET請求請填上參數null;
* 方法: 如果是`post`請求,需要設置一下請求頭信息,請文檔類型重置:   //如果是post 請求,設置以下代碼
      `setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');`

-----------------------------------------------------------------------------------------

## 5. 基本代碼的結構:

```javascript

// 1. 創建request對象
var request = new XMLHttpRequest();

// 2. 監聽請求變化
request.onreadystatechange = function () {
   if (request.status === 4) {
       if (request.status === 200) {
           // 請求成員, 更新頁面中的DOM元素
       }
   }
};

// 3. 初始化請求,請求服務器資源           /*以下是如果用get發送請求的辦法,兩步*/

request.open('get', 'check.php', true);

// 4. 發送get/post的請求給服務器。
request.send(null);



// 如果是POST請求, 3-4步會發生變化   /*以下是如果用post發送請求的辦法,三步*/

// 3. 初始化請求
request.open('post', 'check.php', true);

// 4. 設置請求頭
setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

// 5. 發送請求
request.send(data);

```

全部評論

文明上網理性發言,請遵守新聞評論服務協議

條評論
暫無評論暫無評論!