Ajax与Json

javascript课程：
* 编写js代码，没有java代码：
* Aptana：
* Eclipse或MyEclipse支持插件
* 提供javascript代码的提示功能、语法高亮等
* Aptana的版本问题：
* Aptana官网提供的最新版本：3.0.4版本
* 我们使用的版本：2.x版本
* Aptana官网提供的两种方式：
* MyEclipse或Eclipse的插件版本
* 提供了独立的IDE
* Aptana的安装方式：
* 在线安装：官网提供的
* 离线安装：2.x版本提供离线安装包
* "aptana_update_024747.zip"就是离线安装包
* 制作离线安装包：
* 解压缩压缩包
* 只保留"features"和"plugins"文件夹
* 在当前目录中，鼠标右键，新建一个文件夹"eclipse"
* 将"features"和"plugins"文件夹，拖拽到"eclipse"文件夹中
* MyEclipse
* MyEclipse8.5以前
* 将离线安装包，放置在本地磁盘的任意目录中
* 目录中不能包含中文或空格
* 进入到MYEclipse的安装目录中
* 鼠标右键，新建文件夹"links"
* 在"links"目录中，新建文本文档"aptana.link"
path=C:/Users/JYL/Desktop/aptana
* MyEclipse8.5以后
* 找到MyEclipse的安装目录
* 进入到MyEclipse 10目录中
* 找到"dropins"文件夹
* 将离线安装包，放在该文件夹中
* MyEclipse安装插件需要注意的问题：
* MyEclipse必须是安装版本，不能是绿色版本
* MyEclipse在系统环境中，只能存在一个版本
* 建议大家使用MyEclipse的版本：尽量主流版本
* 6.5
* 8.5
* 10.7
* Eclipse
* 找到Eclipse的安装目录
* 进入到Eclipse 10目录中
* 找到"dropins"文件夹
* 将离线安装包，放在该文件夹中
* 问题：
* Aptana插件2.x版本不支持Eclipse3.2版本和Eclipse4.x版本
* Aptana只支持Eclipse3.5和3.7版本
* 验证安装是否成功
* 选择"window"-"配置"-"Aptana"选项
* 配置Aptana插件：
* 建议大家安装火狐浏览器
* Firebug工具
* 介绍：
* Firebug工具就是火狐浏览器的一个插件
* Firebug提供了javascript的调试功能（类似于MyEclipse的debug模式）
* 安装：
* 在线安装
* 首先安装火狐浏览器
* 火狐浏览器"添加组件"功能
* 离线安装
* 首先安装火狐浏览器
* "firebug.xpi"就是离线安装包
* Ajax：1天
* 同步交互和异步交互
* 同步交互(Java Web)：客户端向服务器端发送请求，服务器端处理并响应，这个过程中用户不能做任何其他事情。
* 异步交互(Ajax)：客户端向服务器端发送请求，服务器端处理并响应，这个过程中用户可以做任何其他事情。
* Ajax基本内容：面试
* 定义（不严格）：允许浏览器与服务器通信而无须刷新当前页面的技术
* 特点：
* Ajax异步交互并不适用于任何应用场景
* Ajax解决B\S模式下的异步交互
* 在实现同样的场景下，Ajax的性能更好
* 传统web模型与Ajax模型的区别：
* 传统web模型：交互整个页面
* Ajax模型：交互数据层面
* 除了Ajax以外，还有哪些技术可以实现异步交互：
* Flash
* 框架(跨页面操作)：frameset\frame
* 隐藏的iframe
* XMLHttpRequest对象
* Ajax核心对象：XMLHttpRequest对象
* Ajax包含的技术：Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest
* Ajax的缺陷：
* 浏览器的兼容问题
* 浏览器的前进和后退功能失效
* 用户经常搞不清楚，数据是新的还是旧的（提示信息）
* Ajax对流媒体支持不太好
* 对手持设备支持不太好
* 如何实现Ajax异步交互：
* 实现Ajax的步骤：
* 创建XMLHttpRequest对象
* 固定写法,不用记
* 如果面试题如何创建核心对象(代码实现)：背来下
* 注册监听
* 利用XMLHttpRequest对象的onreadystatechange属性：用于监听服务器端的状态
* 利用XMLHttpRequest对象的readyState属性：获取服务器端的状态
* 利用XMLHttpRequest对象的status属性：获取状态码(404等)
* 建立连接
* 利用XMLHttpRequest对象的open()方法
* 发送请求
* 利用XMLHttpRequest对象的send()方法
* 如果请求类型是GET方式，send()方法不起作用
* 如果请求类型是POST方式，send()方法起作用
* Ajax异步交互中GET方式与POST方式的区别：
* 如果请求类型是POST方式的话：
* 需要设置请求首部信息:"Content-Type"为"application/x-www-form-urlencoded"
* send()方法起作用
* open()方法的第一个参数
* Ajax异步交互中的数据格式
* 文本(HTML)格式：
* 服务器端：
* 构建一个字符串内容
* 客户端
* 利用XMLHttpRequest对象的responseText属性来接收
* 将文本内容当作HTML内容处理
* XML格式：不是单纯的存储数据
* 服务器端
* 如果服务器端向客户端发送的数据格式是XML格式的话,一定设置响应首部信息:"Content-Type"为"text/xml"
* 如何构建XML格式的数据内容：
* 手工方式构建：String类型的符合XML格式要求的字符串内容
* 自动方式构建：如何将JavaBean、Array、List和Map等集合，转换成XML格式响应给客户端?
* 使用第三方提供的工具来实现：XStream
* 核心包：xstream-1.4.4.jar
* 必要依赖包：xpp3_min-1.1.4c.jar
* 客户端
* 利用XMLHttpRequest对象的responseXML属性：接收响应数据内容
* 利用DOM解析XML
* JSON格式：
* 介绍：
* JavaScript Object Notation缩写
* 定义：是一种轻量级的数据交换格式。
* 特点：
* 易于程序员阅读和编写。
* 易于计算机解析和生成。
* 其实是javascript的子集：原生javascript支持JSON
* 注意：JSON和XML对于我们的意义
* XML：是我们开发主流的数据格式
* JSON：是互联网开发主流的数据格式，是我们将来可能主流的数据格式
* 结构：
* "key/value"格式：类似于Map集合
* key：全部增加双引
* value：支持数据类型string、number、object、array、boolean、null
* 数组格式
* 在Ajax异步交互如何使用JSON格式：
* 服务器端
* 如果服务器端向客户端响应数据格式为JSON时,不需要设置响应首部信息
* 如何构建JSON格式的数据内容：
* 手工方式构建：String类型的符合JSON格式要求的字符串内容
* 自动方式构建：如何将JavaBean、Array、List和Map等集合，转换成JSON格式响应给客户端?
* 使用第三方提供的工具来实现：json-lib\gson
* 客户端
* 利用XMLHttpRequest对象的responseText属性：接收响应数据内容
* 利用eval()函数进行转换
* 解析JSON格式的数据(远比解析XML容易的多)
* 对比文本格式、XML格式和JSON格式的优缺点：
* 文本格式
* 优点：
* 客户端页面不需要解析
* 可读性更好
* 效率更高
* 缺点：
* 复杂数据格式内容，解析起来比较，麻烦
* XML格式
* 优点：
* XML 是一种通用的数据格式。
* 不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记。
* 利用DOM完全解析XML（不需要第三方工具）
* 缺点：
* 如果文档来自于服务器，就必须得保证文档含有正确的首部信息。
* 若文档类型不正确，那么 responseXML 的值将是空的。
* 当浏览器接收到长的
4000
XML 文件后， DOM 解析可能会很复杂
* JSON格式
* 优点：
* 作为一种数据传输格式，JSON 与 XML 很相似，但是它更加灵巧。
* JSON 不需要从服务器端发送含有特定内容类型的首部信息。
* 缺点：
* eval 函数存在风险

//创建一个XMLHttpRequest对象 ,利用此对象与服务器进行通信 是AJAX技术的核心
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}

return xmlHttp;
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
function getXMLHttpRequest(){
var xmlHttpReq=null;
if (window.ActiveXObject) {//IE浏览器创建XMLHttpRequest对象
xmlHttpReq = new ActiveXObject("MSXML2.XMLHTTP.3.0");
}else if(window.XMLHttpRequest){
xmlHttpReq = new XMLHttpRequest();
}
return xmlHttpReq;
}

/////////////////////////////////////////////////////////////////////////////////////////////////////////////

/**
* 获取XmlHttpRequest对象
*/
function getXMLHttpRequest() {
var xmlHttpReq=null;
if (window.XMLHttpRequest) {//Mozilla 浏览器
xmlHttpReq = new XMLHttpRequest();
}else {
if (window.ActiveXObject) {//IE 浏览器
try {
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
try {//IE 浏览器
xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
}
}
}
}
return xmlHttpReq;
}