ajax笔记

2.1Ajax的关键元素
Ajax不是单一的技术，而是四种技术的集合。简要的介绍如下：
1.javascript:Ajax的应用程序是使用JavaScript编写的
2.CSS(层叠样式表):Ajax应用中，用户界面的样式可以通过CSS独立修改
3.DOM(文档对象模型):通过使用脚本修改DOM,Ajax应用程序可以在运行时改变用户界面，或者高效地重绘页面中的某一个部分
4.XMLHttpRequest对象：允许Web程序员从Web服务器以后台活动的方式获取数据

Ajax的四个主要组件：JavaScript定义了业务规则和程序流程。应用程序使用XMLHttpRequest对象以后台方式从服务器获得数据，通过DOM和CSS来改变界面的外观。这四种技术之中，CSS、DOM和JavaScript不是新面孔，它们以前在一起称作动态HTMl，简称DHTML，它可以为Web页面创建古怪的、交互性很强的界面，但它永远也无法克服需要完全刷新整个页面的问题。Ajax除了大量使用DHTML，还可以发送异步请求，这大大延长也Web页面的寿命。

2.2用JavaScript改善用户体验
JavaScript无疑是Ajax工具箱中的核心技术。它是弱类型的、解释型的和通用的脚本语言。
1.弱类型(looselytyped)意味着变量不需要明确声明了什么数据类型，同一个变量可以使用不同的类型数据赋值
2.解释型(interpreted)意味着不需要编译，源代码本身就是可以直接执行
3.通用(general purpose)意味着这种语言适用于大部分的算法和编程任务, 它支持数字、字符串、日期和时间、数组、用于处理文本的正则表达式，以及数学函数，还支持定义结构化的对象。
整个Ajax技术体系中，JavaScript就像胶水一样将所有的部分黏合在一起。

2.3用CSS定义应用的外观
一个样式规则由两部分组成：选择器(selector)和样式声明(style declaration).选择器表明要为哪一个元素设置样式，样式声明则表明要应用哪些样式属性。

2.3.1CSS选择器
选择器有几种类型：HTML标签类型、已声明类类型和唯一ID类型
1:标签类型。如对位于

标签中的

标签应用样式：
    div h1{color:red;}
2:定义样式类。
    .callout{border:solid blue 1px;background-color:cyan}
    .loud{color:orange}
   

一个元素可以分配多个样式类
3:唯一ID.只应用于页面的一个元素
    #close{color:red}
   

使用唯一ID样式
4:伪选择器(pseudo-selectors)
    :first-letter{}第一个字母的样式。
    :first-line{}第一行。
:active{}对象被用户激活(鼠标点击与释放之间发生)
:hover{}对象在鼠标悬停时(CSS2中，适用于任何对象)
a:link{}、a:visited{}、a:hover{}和a:active{}链接的样式
    这四种选择器，可以混合使用。如：
div.prose spn.highlight{backgroud-color:yellow}设置了prose样式的

标签中嵌套的，设置了highlight样式类的标签

2.3.2CSS样式属性
设置了visibility:hidden或display:none可以将元素隐藏起来，如果是相对定位，第一种情况下，元素会保留它在页面上的位置；而第二种情况下元素会消失得无影无踪。各元素属性请查看CSS帮助文档

2.3.3简单的CSS例子.略

2.4使用DOM组织视图
在Ajax应用中，用户界面的更新主要是使用DOM来完成的JavaScript引擎通过全局变量document公开当前web页面的根节点，这个变量是所有DOM操作的起点

2.4.1使用JavaScript操作DOM
DOM以树结构表现一个HTML文档，每一个元素表现HTML标记中的一个标签。例子：
window.onload=function(){
    var hello=document.getElementByIdx(‘hello’);
    hello.className=’declared’;
    //添加元素
    var empty=document.getElementByIdx(‘empty’);
    addNode(empty,’reader of’);
    addNode(empty,’Ajax in Action!’);
    //设置样式
    var children=empty.childNodes;
    for(var i=0;i
        children[i].className=’programmed’;
}
//设置样式2
empty.style.width=’200px’;
}
function addNode(el,text){
    var childEl=document.createElement(‘div’);
    el.appendChild(childEl);
    var txtNode=document.createTextNode(text);
    childEl.appendChild(txtNode);
}
2.4.2寻找DOM节点
1:document.getEllementById(‘hello’);//返回一个id为hello的元素
2:document.getElementsByTagName_r(‘UL’);//返回包含文档中所有

3: document.getElementsByName(‘word’);//返回包含文档中所有名为”word”的元素数组
4:遍历寻找
    var children=empty.childNodes;
    for(var i=0;i
2.4.3创建DOM节点
1:createElement();创建任何HTML元素，带有一个标签类型参数
2:createTextNode();创建代表一段文本的DOM节点
3:el.appendChild();加入到DOM文档中.
createElement()、createTextNode()和appendChild()为我们提供了向一个文档添加新的结构所需要的一切。

2.4.4.为文档增加样式
允许以编程方式修改元素的样式和改造定义在样式表中的结构
1:hello.className=’declared’;
2:empty.style.border=”solid green 2px”;

2.4.5捷径：使用innerHTMl属性
对于创建一个文档来说，createElement()和appendChild()提供的API相当冗长，所有流行的web浏览器的DOM元素都支持innerHTML属性，允许以非常简单的方式来为元素分配任意的内容。我们重写上面的addNode()函数
funciton addListItemUsingInnerHTML(el,text){
    el.innerHTML+=”

”+text+”

”;
}

2.5使用XML技术异步加载数据
最早尝试提供后台通信能力的是使用Iframe，后来XMLHttpRequest对象提供了更加清晰和强大的功能。

2.5.1Iframe(使用它可以局部刷新)
和其他DOM一样，Iframe可以在页面的HTML中声明，也可以使用document.createElement(‘iframe’)生成。我们可以使用一个不可见的Iframe来加载数据
window.onload=function(){
    var iframe=document.getElementByIdx(‘dataFeed’);
    var src=”datafeeds/mydata.xml”;
    loadDataAsynchronously(iframe,src);//这个方法书中没有给出实现
}

2.5.2XMLDocument和XMLHttpRequest对象
它们并不是Web浏览器中DOM的标准扩展，只是碰到多数浏览器的支持。它们都是源自微软私有的ActiveX组件，可以在IE浏览器中作为JavaScript对象来访问。它们执行的功能很相似，不过XMLHttpRequest可以更加精细地对请求进行控制。
1:
function getXMLDocument(){
    var xDoc=null;
    if(document.implementation && document.implementation.createDocument){
        xDoc=document.implementation.createDocument(“”,””,null);//Mozilla/Safari
}else if(typeof ActiveXObject !=’undefined’){
    var msXmlAx=null;
    try{
        msXmlAx=new ActiveXObject(‘Msxml2.DOMDocument’);//较新版本的IE
}catch(e){
    msXmlAx=new ActiveXObject(‘Msxm.DOMDocument’);//较老版本的IE
}
}
if(xDoc==null ||typeof xDoc.load==’undefined’){
    xDoc=null;
}
return xDoc;
}
2:
function getXMLHTTPRequest(){
    var xRequest=null;
    if(window.XMLHttpRequest){
        xRequest=new XMLHttpRequest();//Mozilla/Safari
}else if(typeof ActiveXObject !=’undefined’){
    xRequest=new ActiveXObject(‘Microsoft.XMLHTTP’);
}
return xRequest;
}

2.5.3向服务器发送请求
function sendRequest(url,params,HttpMethod){
    if(!HttpMethod){
    HttpMethod=’POST’;
}
var req=getXMLHTTPRequest();
if(req){
req.onreadystatechange = processReqChange;//IE和Mozilla都支持onreadystatechange回调函数
//回调函数，在读取过程的不同状态中(状态改变时)，都会执行这一个方法processReqChange()
    req.open(HttpMethod,url,true);
    req.setRequstHeader(“Content-Type”,”application/x-www-form-urlencoded”);
    req.send(params);
}
}
HTTP快速入门：大部分Web开发者都很熟悉GET，它是用来获得文档的；还有POST ，这是用来提交表单的；PUT用于向服务器上传文档；DELETE用来删除服务器上的文档；HEAD获取一个文件的首部信息。但是我们怎么知道请求完成了呢？
使用回调函数监视请求
function processReqChange(){
  var ready=req.readyState;//读取状态
  var data=null;
  if (ready==4){                //这个参数为4表示已经请求完成
    data=req.responseText;
//以文本的形式得到响应的数据。如果要从服务器返回结构化数据集，应使用responseXML属性
  }else{
    data="loading...["+ready+"]";
  }
  toConsole(data);
}
function toConsole(data){
  if (console!=null){
    var newline=document.createElement("div");
    console.appendChild(newline);
    var txt=document.createTextNode(data);
    newline.appendChild(txt);
  }
}
window.onload=function(){
  console=document.getElementByIdx('console');
  loadXMLDoc("data.txt");//从服务器读取”data.txt”文件
}