javascript
ajax将响应结果显示到iframe,JavaScript:iframe / Ajax / JSON
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: android主要文件的作用是什么,an
- 下一篇: JAVA设置jscrollbar大小_J