传智播客－Ajax（1）－Ajax开发简介

1、推荐一个ajax开发工具：IntelliJ-IDEA，代码提示功能很强，尤其是js，eclipse等IDE其实都是学的它，之所以流行不广是因为这个是收费的，不过idea9以后就免费了（http://www.intellij.org.cn/portal/index.php?option=com_frontpage&Itemid=1）。

 

2、ajax框架简介:
ajax框架有dojo、dwr、ext、jquery、mootools、prototype、nco等等。
jquery严格说来不是框架，只是一个类库。不过应用还是蛮广的，经济学人网站（http://www.economist.com/）就用到了jquery。
ext的内容很全，效果和桌面一样，但是代价是速度慢，国内一般用于开发内网。
dwr不支持页面效果，主要是提供了页面js访问服务端的便利。
struts2里有一套专门的ajax标签，其实封装的是dojo（dojo背靠ibm大树，以后发展应该会很好。。。）。

 

2、ajax理论概述：
ajax（Asynchronous JavaScript And XML）－－异步的js和xml。

 

ajax包括5个方面的内容：
－－（1）使用XHTML和CSS的基于标准的表示技术
 倡导标签，各司其职，物尽其用。例如，table就是table，应该只负责生成表格，布局则由css负责。而强调“标准”，是为了提高代码的兼容性，使其能够跨浏览器运行。
 XHTML与一般HTML的主要区别就在于XHTML在某些方面是强制实现标准的HTML。HTML的标准标签至少包括几个内容：A标签名小写，B标签必须关闭，C属性名小写，D属性值应该加上双引号""，E只用一个关闭标签的时候尽量在前面加一个空格，例如<hr />，如果不加空格的话，某些时候某些浏览器会报错，原因未知。。。（详情请参见http://www.w3school.com.cn，忘了具体哪一页有此说明了。。）
－－（2）使用Dom进行动态显示和交互
 Dom（Document Object Model）被称做文档对象模型，它是语言和平台中立的接口，允许程序和脚本动态访问和更新文档的内容，结构和风格。
 在Ajax中，Dom对于我们来说是HTML和XML文档的一个应用程序接口，它可以把HTML，XML与ajax中的开发语言用js连接起来，从而做到页面的动态修改和数据的提取处理，从而实现异步数据变更。
－－（3）使用XML和XSLT进行数据交换和处理
 老师语：实际中多用json，因为它是js的原声支持。
 不过我认为XML和XSLT联合的功能也蛮强的，就是布局和显示还是有一些揉合。。。（http://www.w3school.com.cn这个网站有XSLT结合XML在页面显示数据的示例）
－－（4）使用XMLHttpRequest进行异步数据检索
 这个是ajax的核心内容，所有关于ajax开发的类库或框架都有对该方法的封装，实际开发中多直接使用这些类库或框架。
 请参见下文关于XMLHttpRequest知识点的详细阐述。
－－（5）使用js将以上技术融合。
 ajax开发与js是密不可分的，ajax开发主要就是通过js进行数据交互和动态显示

 

3、XMLHttpRequest的实现原理和关于跨域访问的安全问题(类似代码网上都有，略有补充，请关注注释内容)
－－（1）XMLHttpRequest的实现原理
 基本原理：页面每次发出request，同时会注入一个回调函数。
 以校验用户名的方法为例：
 function verify(){
  //使用dom方式获取文本框中的值
  var userName=document.getElementById("userName").value;
  var xmlhttp;
  //以下5个步骤即完成ajax应用的5个关键步骤
  //1. 创建XMLHttpRequest对象（最关键&复杂的一步）
  //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同代码
  if(window.XMLHttpRequest){
   xmlhttp=new XMLHttpRequest();//针对mozillar，firefox，opera，safari，ie7，ie8
   //针对某些特定版本的mozillar浏览器的bug（主要是调用回调函数时会有问题）进行修正（这一步是保证脚本的健壮性）
   if(xmlhttp.overrideMimeType){
    xmlhttp.overrideMimeType("text/xml");
   }
  }else if(window.ActionXObject){
   //（老师语）为什么这个放在第二个if语句里呢？
   //（1）针对的对象范围太窄
   //（2）自身的缺陷或者说原理已被一些人摸透了，有人利用ActionXObject干了不少坏事（？）所以会被一些有经验的用户直接禁掉
   //针对ie6，ie5.5，ie5
   //两个可以创建XMLHttpRequest对象的控件名称，保存在一个js数组中，排在前面的较新
   var activexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
   for(var i=0; i<activexName.length; i++){
    try{
     xmlhttp=new ActionXObject(activexName[i]);
     break;
    }catch(e){
    }
   }
   
  }
  //确认XMLHttpRequest对象创建成功（保证脚本的完整性，指开发的时候）
  if(!xmlhttp){
   alert("XMLHttpRequest对象创建视频！！");
   return;
  }else{
   alert(xmlhttp);
  }
  //2. 注册回调函数
  //只用函数名，不加括号，是因为该句只是把回调函数名注册给xmlhttp.onreadystatechange
  //如果加了括号，则是调用函数，然后把该函数的返回值注册了。
  //xmlhttp状态每次改变都会重新调用callback方法
  xmlhttp.onreadystatechange=callback;
  //3. 利用open方法设置与服务器的连接信息
  xmlhttp.open("Get","AjaxServer?name="+userName,true);//Post方法请自行google百度
  //4. 发送数据，开始和服务端进行交互
  //之所以send（null）是因为第3步中，数据信息都在url里了，如果是Post方法，send（具体数据）
  //第3步中最后一个参数如果false，则运行到该句中止，一直等到数据返回；为true则代码继续运行
  xmlhttp.send(null);
 }
 function callback(){
  //5. 接收响应数据（在回调函数中针对不同响应状态进行处理）
  //判断对象的状态是交互完成的
  if(xmlhttp.readystate==4){ //关于xmlhttp.readystate请自行google百度
   //判断http的交互是否成功
   if(xmlhttp.status==200){ //关于xmlhttp.status请自行google百度
    //获取服务器端返回数据
    var responseText=xmlhttp.responseText; //纯文本方式，关于其他方式请自行google百度
    //将数据显示在页面上
    //（1）通过Dom方式找到div标签对应的元素节点
    var divNode=document.getElementById("result");
    //（2）设置元素节点中的html内容
    divfNode.innerHTML=responseText;
   }else{//出错信息}
  }
 }
－－（2）XMLHttpRequest的一个特殊安全问题：跨域访问
 不同浏览器如何对待跨域问题：（1）IE，访问跨域页面时会给出提示，用户确认后会访问；（2）Mozillar FireFox及其他，不允许访问跨域页面。
 简单的说，html代码和server代码在一块的就是同域。
 以前没有XMLHttpRequest的时候，是用ifram来做的，但ifram也被利用干了不少坏事，例如用ifram挂木马（好像是用隐藏的空白ifram来挂的）
 
 在浏览器端的代码中，我们需要在调用open方法之前判断一下要连接的地址是不是以http开头的，如果是则认为要访问的是跨域的资源。首先要将当前url中的“?”变成“&”，因为将要连接的地址改为“Proxy?url=”+url以后，如果原来url地址中有参数的话，新的url地址中会有两个“?”，会导致服务端解析参数错误，“url=”之后的内容表示本来要访问的跨域资源地址。
 function convertURL(url){ //js示例代码
  if(url.substring[0,7)=="http://"){
   url=url.replace("?","&");
   url="Proxy?url="+url;
  }
  return url;
 }
 服务端代码比较麻烦，doGet，doPost要分别处理，因为java.net包里对这两个方式的处理不一样。。。

 

4、其他
－－有的js开发人员代码写得很极致，例如页面body里内容为空，页面内容全部都由js控制，这样写很不利于维护，而且导致代码分工不明确，js主要是负责数据和服务端交换处理的
－－数据读取时的延时处理，可以减轻服务器端压力，尽量回避用户的误操作。。
示例代码：var timeOutId=setTimeOut(function(){}); //时间单位是毫秒
－－还有缓存，中文显示等等问题，请自行google百度，或者下载传智播客公开视频http://www.itcast.cn/itcast_static/AJAXVideo.htm，或者亲自来传智播客聆听：）