iframe

在Ajax流行之前大量使用：

iframe中的src屬性指定的就是一個獨(dú)立的頁面url地址，iframe中呈現(xiàn)的就是這個頁面的內(nèi)容。

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

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

演示：略

獨(dú)立頁面

注意，iframe加載的是一個獨(dú)立的頁面，所以子頁面無法直接調(diào)用父頁面的內(nèi)容

子頁面調(diào)用父頁面需要：window.parent

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

父頁面調(diào)用子頁面需要：window.frames[n]

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

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

演示：略

Ajax技術(shù)特點(diǎn)

主要特點(diǎn)

仍然是一個HTTP請求，所以遵守HTTP協(xié)議

無頁面刷新的交互，提升了用戶體驗(yàn)

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

XMLHttpRequest 對象

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

var xhttp = new XMLHttpRequest();

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

發(fā)起請求

Ajax需要由客戶端主動發(fā)起：

open()

可以有5個參數(shù)，依次為：

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

url：請求訪問的文件路徑

async：true(異步，默認(rèn))或 false(同步，已經(jīng)不推薦了)

user：(可選的)用戶名稱

psw：(可選的)密碼

send()

GET時不用帶參數(shù)，因?yàn)閰?shù)都可以在url中直接包含，如：

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

xhttp.send();

(復(fù)習(xí)：有時候需要url參數(shù)避免緩存)

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

//POST時必須設(shè)定，否則默認(rèn)類型為text/plain，影響后臺程序轉(zhuǎn)換

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

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

x-requested-with:xml

演示：F12查看請求內(nèi)容

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

事件響應(yīng)

理解異步

@想一想@：為什么不能直接返回響應(yīng)結(jié)果？比如：

var result = xhttp.send();

因?yàn)閟end()的結(jié)果需要服務(wù)器的響應(yīng)，但需要多久服務(wù)器才能響應(yīng)呢？在等待服務(wù)器響應(yīng)的這個時間段，JavaScript代碼就停在這里等著么？如果是這樣，這就叫做“同步”

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

所以，當(dāng)Ajax的響應(yīng)到達(dá)服務(wù)器了怎么辦呢？用事件來響應(yīng)：

onreadystatechange

將該事件綁定到XMLHttpRequest即可：

xhttp.onreadystatechange = function() {

判斷狀態(tài)

readyState：保存了 XMLHttpRequest 的狀態(tài)。

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

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

2: 請求已接收

3: 正在處理請求

4: 請求已完成且響應(yīng)已就緒

xhttp.onreadystatechange = function () {

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

};

服務(wù)器響應(yīng)

服務(wù)器

responseText

status

responseXML

statusText

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

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

如果要動態(tài)的獲得Json數(shù)據(jù)，見：ASP.NET RazorPage和 MVC 相關(guān)章節(jié)。

JSON

全稱：JavaScriptObjectNotation

作為XML的替代品，風(fēng)靡全球：簡潔

序列化：將對象的狀態(tài)信息轉(zhuǎn)換為可以存儲或傳輸?shù)男问降倪^程(簡單理解：內(nèi)存 => I/O)

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

number：和JavaScript的number完全一致；

boolean：就是JavaScript的true或false；

string：就是JavaScript的string；

null：就是JavaScript的null；

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

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

一個標(biāo)準(zhǔn)的Json序列化示例：

var laoCheng = {

name: '老程',

age: 21,

isFemale: true,

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

course: {

'C#' : 86,

'HTML/CSS/JavaScript' : 95,

SQL: 92,

'ASP.NET': null

}

}

如何進(jìn)行序列化/反序列化

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

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

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

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

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

return value.toUpperCase();

}

return value;

}));

最應(yīng)該小心的，其實(shí)還是這些玩意(尤其是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) 函數(shù)

向后臺發(fā)送JSON數(shù)據(jù)需要修改content type：

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

作業(yè)

根據(jù)Ajax動態(tài)加載導(dǎo)航欄下的“新消息”

分別通過iframe和Ajax完成側(cè)邊欄關(guān)鍵字“換一批”的功能

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

發(fā)布求助時，能夠

根據(jù)一級關(guān)鍵字，通過Ajax獲取到該一級關(guān)鍵字下的二級關(guān)鍵字，并予以顯示

定向求助時移出焦點(diǎn)，就能找到相關(guān)用戶

刷新幫幫幣

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。