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获取到该一级关键字下的二级关键字，并予以显示

定向求助时移出焦点，就能找到相关用户

刷新帮帮币