JavaScript+jQuery程序设计第16章 综合开发实例——365影视网站设计.pptVIP

综合开发实例——365影视网站设计 系统分析 系统设计 网页预览 关键技术 首页技术实现 查看影片详情页面 系统分析 计算机技术、网络通信技术、多媒体技术的飞速发展，对人类的生产和生活方式产生了很大影响。随着多媒体应用技术的不断成熟，以及宽带网络的不断发展，我们有理由相信在线影视点播一定会成为网络内容创新的重头戏。通过影视网站可以让用户实现查看电影排行、浏览影片资讯、在线观看等功能。 系统设计 系统目标 系统功能结构 开发环境 文件夹组织结构 系统目标 结合实际情况及对用户需求的分析，365影视网应该具有如下特点： （1）操作简单方便、界面简洁美观。 （2）能够全面展示影片分类，及影片详细信息。 （3）浏览速度快，尽量避免长时间打不开页面的情况发生。 （4）影片图片清楚，文字醒目。 （5）系统运行稳定、安全可靠。 （6）易维护，并提供二次开发支持。 在制作项目时，项目的需求是十分重要的，需求就是项目要实现的目的。 系统功能结构 开发环境 在开发365影视网时，该项目使用的软件开发环境如下： （1）操作系统：Windows7。 （2） PHP运行环境：phpStud（3） jQuery版本：jquery-1.6.1.min.js。 （4）开发工具：Dreamweaver CS6。 （5）浏览器：IE 8.0。 （6）分辨率：最佳效果1680×1050像素。 由于该项目中使用了Ajax技术请求PHP文件，所以需要在计算机中安装PHP运行环境。 文件夹组织结构 网页预览 网页预览 关键技术 JavaScript脚本技术 Ajax无刷新技术 jQuery技术 JavaScript脚本技术 导航菜单设计 电影图片不间断滚动效果设计 浮动窗口设计 Ajax无刷新技术 创建新请求的方法 open(method,URL[,asyncFlag[,userName[, password]]]) 语法格式 参数 说明 method 用于指定请求的类型，一般为GET或POST URL 用于指定请求地址，可以使用绝对地址或者相对地址，并且可以传递查询字符串 asyncFlag 为可选参数，用于指定请求方式，异步请求为true，同步请求为false，默认情况下为true userName 为可选参数，用于指定请求用户名，没有时可省略 password 为可选参数，用于指定请求密码，没有时可省略 XMLHttpRequest对象的常用方法 Ajax无刷新技术 向服务器发送请求的方法 send(content) 语法格式 用于指定发送的数据 http_request.send(null); Ajax无刷新技术 设置请求的HTTP头的方法 setRequestHeader(header, value) 语法格式 用于指定HTTP头 用于为指定的HTTP头设置值 http_request.setRequestHeader(Content-Type,application/x-www-form-urlencoded); Ajax无刷新技术 返回HTTP头信息的方法 停止或放弃当前异步请求的方法 abort() 语法格式 http_request.abort() getResponseHeader(headerLabel) 语法格式 getAllResponseHeaders() 语法格式 http_request.getResponseHeader(Content-Type) text/html;charset=GBK http_request.getAllResponseHeaders() Ajax无刷新技术 http_request.onreadystatechange = getResult; http_request.onreadystatechange = function(){ getResult(添加的参数); }; 指定状态改变时所触发的事件处理器的属性onreadystatechange 获取请求状态的属性readyState 值 意义 值 意义 0 未初始化 1 正在加载 2 已加载 3 交互中 4 完成 XMLHttpRequest对象的常用属性 Ajax无刷新技术 var h=http_request.responseText; var xmldoc = http_request.responseXML; 获取服务器的字符串响应的属性responseText 获取服务器的XML响应的属性responseXML Ajax无刷新技术 返回服务器的HTTP状态码的属性status 值 意义 值 意义 100 继续发送请求 200 请求已成功 202 请求被接受，但尚未