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 I

          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.getAttribute(attributeName);

n             获取文本节点
      elementNode.innerHTML;

  4. 改变文档的层次结构
       创建元素节点：document.createElement(“table”);//
       创建文本节点：document.createTextNode(text);
       添加节点：elementNode.appendChild(childNode);//

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

 

 

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

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

 

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

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

              cell.appendChild(textNode);