iframe

在Ajax流行之前大量使用：

iframe中的src屬性指定的就是一個獨立的頁面url地址，iframe中呈現的就是這個頁面的內容。

通過改變src的值，我們就可以輕松的改變iframe中的內容(類似的，刷新驗證碼也是同樣的手段)：

document.getElementById('keywords').src = "/Iframe2.html";

演示：略

獨立頁面

注意，iframe加載的是一個獨立的頁面，所以子頁面無法直接調用父頁面的內容

子頁面調用父頁面需要：window.parent

window.parent.document.getElementsByTagName('p')[0].innerText = "全程直播";

父頁面調用子頁面需要：window.frames[n]

window.frames[0].document.getElementsByTagName('div')[0]

.setAttribute('style', "border: 1px dashed");

演示：略

Ajax技術特點

主要特點

仍然是一個HTTP請求，所以遵守HTTP協議

無頁面刷新的交互，提升了用戶體驗

可以只獲取“部分頁面”甚至是簡單數據，降低了流量消耗

XMLHttpRequest 對象

(現代瀏覽器)直接new出來就行：

var xhttp = new XMLHttpRequest();

接下來都圍繞這XMLHttpRequest對象展開。

發起請求

Ajax需要由客戶端主動發起：

open()

可以有5個參數，依次為：

method：請求方式， 字符串GET或POST (復習)

url：請求訪問的文件路徑

async：true(異步，默認)或 false(同步，已經不推薦了)

user：(可選的)用戶名稱

psw：(可選的)密碼

send()

GET時不用帶參數，因為參數都可以在url中直接包含，如：

xhttp.open("GET", "/Ajax.html?id=8");

xhttp.send();

(復習：有時候需要url參數避免緩存)

POST時通常把參數信息放在send()中，如：

//POST時必須設定，否則默認類型為text/plain，影響后臺程序轉換

xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhttp.send("fname=Bill&lname=Gates");

x-requested-with:xml

演示：F12查看請求內容

號外：出于安全原因，現代瀏覽器不允許跨域訪問。

事件響應

理解異步

@想一想@：為什么不能直接返回響應結果？比如：

var result = xhttp.send();

因為send()的結果需要服務器的響應，但需要多久服務器才能響應呢？在等待服務器響應的這個時間段，JavaScript代碼就停在這里等著么？如果是這樣，這就叫做“同步”

但Ajax是異步的。即：一旦完成send()，不需要等待send()的結果，就會立即執行后面的代碼。

所以，當Ajax的響應到達服務器了怎么辦呢？用事件來響應：

onreadystatechange

將該事件綁定到XMLHttpRequest即可：

xhttp.onreadystatechange = function() {

判斷狀態

readyState：保存了 XMLHttpRequest 的狀態。

0: 請求未初始化，open()之前

1: 服務器連接已建立，open()之后

2: 請求已接收

3: 正在處理請求

4: 請求已完成且響應已就緒

xhttp.onreadystatechange = function () {

console.log('in onreadystatechange:' + this.readyState);

};

服務器響應

服務器

responseText

status

responseXML

statusText

為保險起見，我們通常都是在獲得完整的、正確的Response響應之后

if (this.readyState === 4 && this.status === 200) {

如果要動態的獲得Json數據，見：ASP.NET RazorPage和 MVC 相關章節。

JSON

全稱：JavaScriptObjectNotation

作為XML的替代品，風靡全球：簡潔

序列化：將對象的狀態信息轉換為可以存儲或傳輸的形式的過程(簡單理解：內存 => I/O)

必須是UTF-8，包含6種類型：

number：和JavaScript的number完全一致；

boolean：就是JavaScript的true或false；

string：就是JavaScript的string；

null：就是JavaScript的null；

array：就是JavaScript的Array表示方式——[]；

object：就是JavaScript的{ ... }表示方式

一個標準的Json序列化示例：

var laoCheng = {

name: '老程',

age: 21,

isFemale: true,

hobby: ['tabletennis', 'basketball','swim'],

course: {

'C#' : 86,

'HTML/CSS/JavaScript' : 95,

SQL: 92,

'ASP.NET': null

}

}

如何進行序列化/反序列化

console.log(JSON.stringify(laoCheng));

console.log(JSON.stringify(laoCheng, ['age'])); //指定只序列化age屬性

console.log(JSON.stringify(laoCheng, null, ' ')); //格式化：換行和縮進

console.log(JSON.stringify(laoCheng, function (key, value) {

if (typeof value === 'string') {//key：屬性，value：屬性值

return value.toUpperCase();

}

return value;

}));

最應該小心的，其實還是這些玩意(尤其是null和undefined)：

反序列化：

var lz = JSON.parse('{"name":"老程","age":21,"isFemale":true,"hobby":["tabletennis","basketball","swim"],"course":{"C#":86,"HTML/CSS/JavaScript":95,"SQL":92,"ASP.NET":null}}')

觀察：反序列化除 array 以外，不保證各屬性的順序。

parse中也可傳入 function(key, value) 函數

向后臺發送JSON數據需要修改content type：

xhttp.setRequestHeader("Content-type", "application/json; charset=utf-8");

作業

根據Ajax動態加載導航欄下的“新消息”

分別通過iframe和Ajax完成側邊欄關鍵字“換一批”的功能

能通過Json獲得(有無未讀消息的)數據，決定是否閃爍鈴鐺圖標(注意：要能閃還能不閃)

發布求助時，能夠

根據一級關鍵字，通過Ajax獲取到該一級關鍵字下的二級關鍵字，并予以顯示

定向求助時移出焦點，就能找到相關用戶

刷新幫幫幣

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的ajax将响应结果显示到iframe,JavaScript：iframe / Ajax / JSON的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。