ajax开发

1.Ajax核心工作机制:

 

1.       对象初始化并发出XMLHttpRequest请求

Ø         XMLHttpRequest 对象 整个Ajax开发的基础。提供客户端与服务器端异步通信的能力

Ø         IE5.0 XMLHttpRequest = new ActiveXObject("Msxm12.XMLHTTP");

Ø         IE5.5 XMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

Ø         其他不支持ActiveX控件的 XMLHttpRequest= new XMLHttpRequest()；

2.        

var httprequest;

if (window.XMLHttpRequest)

  {              // if Mozilla, Safari etc

    httprequest=new XMLHttpRequest()

    if (httprequest.overrideMimeType)  //使浏览器处理服务器包含XML mime-type头部信息//确保返回的内容包含text/xml信息

      httprequest.overrideMimeType('text/xml')

   }

   else if (window.ActiveXObject)

   {         // if IE

          try{

          httprequest=new ActiveXObject("Microsoft.XMLHTTP");

       }

       catch (e){}

     }

   }

3.       发送HTTP请求
httprequest.open(“GET”,url,true);
httprequest.onreadystatechange=processResponse;
httprequest.send(null);

4.       服务器接受请求并进行处理

5.       服务器返回响应数据

6.       客户端接受返回数据，依据相应数据修改客户端页面效果

function processResponse(){

if(httprequest.readyState==4)

if(httprequest.status==200){

}else{}

}

 

解释：

Ø         open(method,url,asynch,user,password): 开启网页

Ø         user 和password 为可选参数，指定请求的用户名和 密码，没有则省略。

Ø         post方式提交，必须设置请求头部为

XMLHttpRequest.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

Ø         send(string): 向服务器传送数据

Ø         onreadystatechange: 状态改变处理函数

Ø         readyState 判断请求状态 0,1,2,3,4

Ø         onreadystatechange 事件是在readyState状态改变的时候触发的，readyState反应了当前请求的状态:

0,表示状态开始建立，还未初始化，未调用open方法。

1,open 已经调用，还未用send.

2,send已用，数据未发送。

3,请求发送成功，正在接受数据。

4,数据已经接受成功，

Ø         status:请求结果的状态200 ,202 ,400 ,404 ,500

Ø         服务器返回的数据格式：

responseXML: 服务器返回的 XML 数据

responseText: 服务器返回的文字內容

接收到数据进行处理：

function handleResponse() {

  // 检查请求状态

  if(request.readyState == 4){

    // 检查 http 相应状态

    if(request.status == 200){

      // 读取数据

      var doc = request.responseText;

      // 取得网页上需被更新的结点位置

      var node = document.getElementById(“resp");

      // 設定該 node 的內容

      node.innerHTML =doc.documentElement.childNodes[0].nodeValue;

    }

  }

}

 

2.Ajax 开发的基础架构：DOM 文档对象模型

 

DOM模型主要包括3个部分，分别是核心,html,xml.

它定义了操作文档对象的接口，处理数据时，它首先加载整个文档在内存中，然后可以对文档中任意节点进行处理，并可对节点进行添加，修改，删除

1)        DOM中树的根节点：document

2)        节点类型：

1)      元素节点  <font  color=”red” size=”12px”>This is text!</font>

2)      属性节点

3)      文本节点

3)        处理DOM中的节点

n             使用document.getElementById()引用指定id 的节点

其它调用方式document.getElementsByTagName

document.getElementsByName（“”）

n             通过节点的childNodes集合属性引用子节点：element.childNodes[0];

其它应用方式 element.firstChild; element.lastChild

引用父节点：element.parentNode

引用兄弟节点：element.nextSibling,element.previousSibling

n             处理属性节点的方式：

elementNode.setAttribute(attributeName,attributeValue);

或elementNode. attributeName= attributeValue

elementNode.getAttribute(attributeName);

n             获取文本节点

elementNode.innerHTML;

  4. 改变文档的层次结构

创建元素节点：document.createElement(“table”);

创建文本节点：document.createTextNode(text);

添加节点：elementNode.appendChild(childNode);

// elementNode是父节点，childNode是子节点，只能将节点添加到所有节点之后。删除节点：elementNode.removeChild(childNode);

 

parentNode.insertBefore(newNode,referenceNode);// newNode是待 插入的新节点，

referenceNode是父节点parentNode中已经存在的 节点。

 

var cell = document.createElement("td");

              var textNode = document.createTextNode("java");

              cell.appendChild(textNode);