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 的值将是空的。* 当浏览器接收到长的 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;}