ajax 笔记

【日期】0:15 2008-6-16
===========================
Ajax的请求/响应模式

0、触发Ajax事件
1、新建XMLHttpRequest对象
2、open()方法：建立对服务器的调用
3、为onreadystatechange指定事件处理函数
4、send()方法：向服务器（CGI程序）发出请求
5、（请求返回到浏览器）
6、响应事件处理函数
—————————
新建XMLHttpRequest对象

JavaScript代码

//兼容不同浏览器
if(window.ActiveXObject && !window.XMLHttpRequest)
{
window.XMLHttpRequest = function()
{
var MSXML = ['Msxml2.XMLHTTP.5.0',
'Msxml2.XMLHTTP.4.0',
'Msxml2.XMLHTTP.3.0',
'Msxml2.XMLHTTP',
'Microsoft.XMLHTTP'];
for(var i = 0; i < msxmls.length; i++)
{
try{
return new ActiveXObject(msxmls[i]);
}catch(e){}
}
return null;
};
}
var xmlHttp = new XMLHttpRequest();//创建XMLHttpRequest对象

另一种方式：

JavaScript代码

function createXMLHttpRequest()
{
var xmlHttp;
try{
xmlHttp = new XMLHttpRequest();
}catch(e){
var MSXML = new Array( “MSXML2.XMLHTTP.6.0″,
“MSXML2.XMLHTTP.5.0″,
“MSXML2.XMLHTTP.4.0″,
“MSXML2.XMLHTTP.3.0″,
“MSXML2.XMLHTTP”,
“Microsof.XMLHTTP”);
for(var i=0; i<MSXML.length && !xmlHttp; i++)
{
try{
xmlHttp = new ActiveXObject(MSXML[i]);
}catch(e){}
}
}
if(!xmlHttp)
alert(“Ajax Error!”);
else return xmlHttp;
}
var xmlHttp = new createXMLHttpRequest();//创建XMLHttpRequest对象

———————————————————
open()方法

open(”method”, “url”, bool)
例：xmlHttp.open(”GET”, “http://127.0.0.1/clients.xml”, true);
——————————————————————
XMLHttpRequest属性：

onreadystatechange
每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数
…………………………………………………………………………………………
readyState
请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成
…………………………………………………………………………………………
responseText
服务器的响应，表示为一个字符串
…………………………………………………………………………………………
responseXML
服务器的响应，表示为XML。这个对象可以解析为一个DOM对象
…………………………………………………………………………………………
status
服务器的HTTP状态码（200对应OK，404对应Not Found（未找到），等等）
…………………………………………………………………………………………
statusText
HTTP状态码的相应文本（OK或Not Found（未找到）等等）
…………………………………………………………………………………………

【日期】0:56 2008-6-17
===========================
部分内容写成函数实现：

JavaScript代码

function startAjaxRequest(type)
{
requestType = type; //动作类型参数
xmlHttp = new XMLHttpRequest();//创建XMLHttpRequest对象
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open(“GET”, “http://127.0.0.1/DIY_lib/XML/clients.xml”, true);
xmlHttp.setRequestHeader(“If-Modified-Since”,“0″); //禁止缓存
xmlHttp.send(null);
}
function handleStateChange()
{
if(requestType == “clear”)
{
clearInfo();
}else if(requestType == “show”)
{
showInfo();
}
}
function clearInfo()
{
info.innerHTML = “”;
}
function showInfo()
{
if(xmlHttp.readyState==4 && xmlHttp.status == 200)
{
info.innerHTML = xmlHttp.responseText;
}
}

【日期】2008-8-18
===========================
操作DOM（一）：
document.getElementById(’html_id’)
返回HTML中标签id为html_id的元素对象

按W3C标准改写上面两个函数

JavaScript代码

function clearInfo()
{
document.getElementById(‘info’).innerHTML = “”;
}
function showInfo()
{
if(xmlHttp.readyState==4 && xmlHttp.status == 200)
{
document.getElementById(‘info’).innerHTML = xmlHttp.responseText;
}
}

使用responseXML方法处理XML响应信息：
XML文件示例

XML/HTML代码

<datetime>
<date>
<state>2008-1-1</state>
<state>2008-2-2</state>
</date>
<time>
<state>11:11:11</state>
<state>22:22:22</state>
</time>
</datetime>

PHP页面返回xml文档方法：
header(”Content-type: application/xml”);

js中读取DOM部分代码

JavaScript代码

var xmlDoc = xmlHttp.responseXML;
var userDoc = xmlDoc.getElementsByTagName(‘datetime’)[0];
var data = userDoc.getElementsByTagName(‘date’)[0];
var data1 = userDoc.getElementsByTagName(‘time’)[0];
var info_date = data.getElementsByTagName(’state’)[0].childNodes[0].nodeValue;
var info_time = data1.getElementsByTagName(’state’)[0].childNodes[0].nodeValue;

结果为：
info_date: 2008-1-1
info_time: 11:11:11

最后两行修改为

JavaScript代码

var info_date = data.getElementsByTagName(’state’)[1].childNodes[0].nodeValue;
var info_time = data1.getElementsByTagName(’state’)[1].childNodes[0].nodeValue;

结果为：
info_date: 2008-2-2
info_time: 22:22:22

【日期】2008-8-19
===========================
操作DOM（二）：
添加表格内容

新增两个函数

JavaScript代码

function addTableRow(date, time) //添加新行
{
var row = document.createElement(“tr”); //创建tr元素，返回行对象

var cell = createCellWithText(date); //调用函数，创建文本
row.appendChild(cell); //把文本添加到行对象
cell = createCellWithText(time);
row.appendChild(cell);

document.getElementById(“table1″).appendChild(row); //把行对象添加到指定元素中
}

function createCellWithText(text) //创建文本内容
{
var cell = document.createElement(“td”); //创建td元素，返回cell对象
var textNode = document.createTextNode(text); //创建文本节点
cell.appendChild(textNode); //添加到cell对象
return cell;
}

调用方法：
addTableRow(info_date, info_time);

注：html中表格需要用tbody标签
例：
<TABLE>
<tbody id=”table1″>
</tbody>
</TABLE>

【日期】2008-8-20
===========================
操作DOM（三）：
综合实例应用
参见项目card源码

备注：
document.getElementByTagName() 返回值类型：数组——————————————–
创建带格式文本内容

JavaScript代码

var flag = document.createElement(flag); //创建格式标签
flag.setAttribute(‘align’,‘center’); //设置标签属性
flag.innerHTML = text; //标签后的内容

生成XML的php文件若包含中文，需要用UTF-8格式保存

【日期】23:07 2008-9-1
===========================
JSON应用：

将JSON数据赋值给变量（例）：

JavaScript代码

var company =
{ “employees”: [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": brett@newInstance.com" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
{ "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
]
};

获取第一个雇员的firstName信息：company.employees[0].fristName

————————————————————-
JSON的接收（例）
1、服务器端返回JSON相应的文本表示
{“city” : “Hefei”, “province” : “Anhui”}

2、使用eval()函数将JSON文本转化为JavaScript对象
var response = eval(”(” + xmlHttp.responseText + “)”);

注：使用额外的圆括号可使eval()函数将来源输入无条件地视为表达式进行解析

3、从对象中取得相应的值
response.city
response.province

【Q&A】
======================
Q1：GET or POST?
A1：使用POST方法（例）

JavaScript代码

var requestObj = new XMLHTTPRequest();
var newData = “name=linvo&pwd=123″;
requestObj.open(“POST”, “do.php”, true);
requestObj.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded; charset=UTF-8′);
requestObj.send(newData);

Q2：为什么修改了XML文件的内容后，ajax获取来的还显示原来的内容？
A2：xmlHttp.setRequestHeader(”If-Modified-Since”,”0″); //禁止缓存