ajax 笔记

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

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

JavaScript代码
  1. //兼容不同浏览器
  2. if(window.ActiveXObject && !window.XMLHttpRequest)
  3. {
  4. window.XMLHttpRequest = function()
  5. {
  6. var MSXML = ['Msxml2.XMLHTTP.5.0',
  7. 'Msxml2.XMLHTTP.4.0',
  8. 'Msxml2.XMLHTTP.3.0',
  9. 'Msxml2.XMLHTTP',
  10. 'Microsoft.XMLHTTP'];
  11. for(var i = 0; i < msxmls.length; i++)
  12. {
  13. try{
  14. return new ActiveXObject(msxmls[i]);
  15. }catch(e){}
  16. }
  17. return null;
  18. };
  19. }
  20. var xmlHttp = new XMLHttpRequest();//创建XMLHttpRequest对象

另一种方式:

JavaScript代码
  1. function createXMLHttpRequest()
  2. {
  3. var xmlHttp;
  4. try{
  5. xmlHttp = new XMLHttpRequest();
  6. }catch(e){
  7. var MSXML = new Array( “MSXML2.XMLHTTP.6.0″,
  8. “MSXML2.XMLHTTP.5.0″,
  9. “MSXML2.XMLHTTP.4.0″,
  10. “MSXML2.XMLHTTP.3.0″,
  11. “MSXML2.XMLHTTP”,
  12. “Microsof.XMLHTTP”);
  13. for(var i=0; i<MSXML.length && !xmlHttp; i++)
  14. {
  15. try{
  16. xmlHttp = new ActiveXObject(MSXML[i]);
  17. }catch(e){}
  18. }
  19. }
  20. if(!xmlHttp)
  21. alert(“Ajax Error!”);
  22. else return xmlHttp;
  23. }
  24. 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代码
  1. function startAjaxRequest(type)
  2. {
  3. requestType = type; //动作类型参数
  4. xmlHttp = new XMLHttpRequest();//创建XMLHttpRequest对象
  5. xmlHttp.onreadystatechange = handleStateChange;
  6. xmlHttp.open(“GET”, “http://127.0.0.1/DIY_lib/XML/clients.xml”, true);
  7. xmlHttp.setRequestHeader(“If-Modified-Since”,“0″); //禁止缓存
  8. xmlHttp.send(null);
  9. }
  10. function handleStateChange()
  11. {
  12. if(requestType == “clear”)
  13. {
  14. clearInfo();
  15. }else if(requestType == “show”)
  16. {
  17. showInfo();
  18. }
  19. }
  20. function clearInfo()
  21. {
  22. info.innerHTML = “”;
  23. }
  24. function showInfo()
  25. {
  26. if(xmlHttp.readyState==4 && xmlHttp.status == 200)
  27. {
  28. info.innerHTML = xmlHttp.responseText;
  29. }
  30. }

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

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

JavaScript代码
  1. function clearInfo()
  2. {
  3. document.getElementById(‘info’).innerHTML = “”;
  4. }
  5. function showInfo()
  6. {
  7. if(xmlHttp.readyState==4 && xmlHttp.status == 200)
  8. {
  9. document.getElementById(‘info’).innerHTML = xmlHttp.responseText;
  10. }
  11. }

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

XML/HTML代码
  1. <datetime>
  2. <date>
  3. <state>2008-1-1</state>
  4. <state>2008-2-2</state>
  5. </date>
  6. <time>
  7. <state>11:11:11</state>
  8. <state>22:22:22</state>
  9. </time>
  10. </datetime>

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

js中读取DOM部分代码

JavaScript代码
  1. var xmlDoc = xmlHttp.responseXML;
  2. var userDoc = xmlDoc.getElementsByTagName(‘datetime’)[0];
  3. var data = userDoc.getElementsByTagName(‘date’)[0];
  4. var data1 = userDoc.getElementsByTagName(‘time’)[0];
  5. var info_date = data.getElementsByTagName(’state’)[0].childNodes[0].nodeValue;
  6. var info_time = data1.getElementsByTagName(’state’)[0].childNodes[0].nodeValue;

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

最后两行修改为

JavaScript代码
  1. var info_date = data.getElementsByTagName(’state’)[1].childNodes[0].nodeValue;
  2. 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代码
  1. function addTableRow(date, time) //添加新行
  2. {
  3. var row = document.createElement(“tr”); //创建tr元素,返回行对象
  4. var cell = createCellWithText(date); //调用函数,创建文本
  5. row.appendChild(cell); //把文本添加到行对象
  6. cell = createCellWithText(time);
  7. row.appendChild(cell);
  8. document.getElementById(“table1″).appendChild(row); //把行对象添加到指定元素中
  9. }
  10. function createCellWithText(text) //创建文本内容
  11. {
  12. var cell = document.createElement(“td”); //创建td元素,返回cell对象
  13. var textNode = document.createTextNode(text); //创建文本节点
  14. cell.appendChild(textNode); //添加到cell对象
  15. return cell;
  16. }

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

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

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

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

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

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

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

将JSON数据赋值给变量(例):

JavaScript代码
  1. var company =
  2. { “employees”: [
  3. { "firstName": "Brett", "lastName":"McLaughlin", "email": brett@newInstance.com" },
  4. { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
  5. { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
  6. ]
  7. };

获取第一个雇员的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代码
  1. var requestObj = new XMLHTTPRequest();
  2. var newData = “name=linvo&pwd=123″;
  3. requestObj.open(“POST”, “do.php”, true);
  4. requestObj.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded; charset=UTF-8′);
  5. requestObj.send(newData);

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

原文地址:https://www.cnblogs.com/Qinglong/p/1409175.html