第十二章：第41节JavaScript页面无刷新交互——使用iframe实现
更新于：2017-11-27 19:49:14
页面无刷新交互是什么意思？
这是现在网站应用非常多的一类功能，在很多网站都能看到。
比如，在百度输入一关键字“PHP”
输入框下面会出现相关的关键字推荐。
再比如，注册163邮箱
输入一邮件地址，163会验证是否可用，然后把结果显示出来。
大家想一想，百度、163的前端页面为什么会这么智能？百度搜索页面会推荐相关搜索关键字，163邮箱会验证注册的邮件地址是否可用。
其实完成这些工作的不是前端页面，而是服务器端。它们使用了页面无刷新交互相关的技术：在页面不刷新的前提下，完成了前端页面与服务器数据交互。
也就是在百度搜索框输入“PHP”，百度的前端页面通过JS在页面不刷新的前提下，向百度的服务器请求了有关“PHP”其他热门搜索关键字。163邮箱也是，在页面不刷新的前提下，向163服务器发送了用户输入的邮箱地址，服务器做了验证并返回。
传统验证方式：
大家都知道，用户与网站交互数据，主要通过表单的get和post两种方式，提交表单意味着页面会刷新。这是传统的提交数据方式。
这种方式有不好的缺点：
① 用户体验不好，无法做到在页面不刷新的情况下多次与服务器交互。
② 浪费带宽，用户名不正确时，会反复对表单进行提交。
就像上面注册163邮箱的表单一样，用户输入的邮箱地址，在提交表单前（不使用页面无刷新交互相关的技术）无法验证，只能等到用户输完密码和其他项目后，提交表单才能验证。如果邮箱地址已被注册，那用户还得重新输一遍密码……
同样，不使用页面无刷新交互技术，百度的搜索框就实现不了智能化推荐。
无刷新验证方式：
为了解决传统验证方式的弊端，使用JS可以让页面在不刷新的前提下与服务器多次交互。
页面无刷新交互都怎么实现呢？
现在大部分网站都使用ajax这门技术完成页面无刷新交互，这是我们后面主要学习的知识。
其实利用我们前面学习的知识，使用iframe标记和window对象的parent属性也能实现页面无刷新交互。
下面给大家做个示例：
iframe实现页面无刷新
说明：做这个示例（包括后面的示例），需要访问服务器，不再只是用JS代码，所以我们要把第十一章曾经写过的一些代码拿来用（前面我们写的一个小框架）。
开始：
假如后台有个地区数据表
说明：reid为父ID。
使用页面无刷新技术完成二级联动。
也就是选择省时，在页面不刷新的前提下，相应省下的市从服务端获取到。
步骤：
1）定义一个地区控制器，总共两个方法。
2）在入口文件处，把默认控制器改成“Area”，把默认方法改成“index”。
3）看下index.html视图文件的代码，这里是关键。
①
12行给省下拉框加了一个onchangge事件属性。
②
32——36行是实现无刷新技术的关键HTML标记。
查看结果：
楠神本地测试代码是OK的，只要选择一个省，前端页面就会向服务器请求一次，可在开发者工具“Network”中看到发出的请求。
说明：
页面无刷新技术，大家普遍使用ajax，一般不使用iframe框架实现。iframe有很多的弊端（可以去百度上搜）。我们了解下就可以了，知道iframe可以实现页面无刷新交互。
从下节开始学习ajax。