个人笔记(AJAX篇)
来源:互联网 发布:西门子软件代理商 编辑:程序博客网 时间:2024/05/20 04:30
AJAX:创造动态性更强的应用程序。
作用:与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下进行数据传递与获取。
AJAX使用四部曲:
第一部:创建XMLHttpRequest对象。
代码:
var xmlhttp;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
代码解释:为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject 。
第二部:请求。
代码:
xmlhttp.open(method,url,async);xmlhttp.send(string);代码解释:
method:请求的类型:GET或POST
url:文件在服务器中的位置
async:true(异步)或false(同步)
string:仅用于POST请求
【-- PS:GET 还是 POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠--】
第三部:响应。
1)responseText属性;
代码例子:
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;代码解释:
如果来自服务器的响应并非 XML,请使用 responseText 属性。responseText 属性返回字符串形式的响应,
2)responseXML属性。
代码例子:
xmlDoc=xmlhttp.responseXML;txt="";x=xmlDoc.getElementsByTagName("ARTIST");for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br />"; }document.getElementById("myDiv").innerHTML=txt;代码解释:
如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性:请求 books.xml 文件,并解析响应
第四部:onreadystatechange事件解释:当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。
代码例子:
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }代码解释:
onreadystatechange:存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState:
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
status:
200: "OK"
404: 未找到页面
- 个人笔记(AJAX篇)
- ajax个人学习笔记
- 揭开AJAX神秘的面纱(AJAX个人学习笔记)
- [个人笔记]ajax使用步骤
- 个人笔记(第三篇)
- 个人笔记(第四篇)
- 个人笔记(第七篇)
- 个人笔记系列(第二篇)
- 个人bug笔记(个人保存)
- Ajax-个人学习记录(2)
- (个人笔记) java 查询
- (个人笔记) ssi整合
- OpenMp 个人笔记(一)
- (个人笔记)ID3DXAllocateHierarchy interface
- Error Log(个人笔记)
- 个人学习笔记(一)
- 个人小笔记(备忘)
- 个人工作笔记(orcale)
- Apache Shiro Authentication学习笔记
- 将 Smart 构件发布到 Maven 中央仓库
- 自定义导航栏字体、颜色
- iOS the file "xxx.app" couldn't be opened because you don't have permission to view it.
- 很好用的前台模板框架-
- 个人笔记(AJAX篇)
- 开源堡垒机GateOne的安装、配置笔记
- Linux内核分析 - 网络[九]:邻居表 ARP杂谈
- mysql长时间不用出现ERROR 2003 (HY000): Can't connect to MySQL server on 'localhost' (10061)
- Ubuntu下Xen的安装
- Spring声明式事务配置管理方法
- 【PAT】1081. Rational Sum (20)
- 使用Java的反射功能调用类中的方法
- 怎么把多张图片转成一篇PDF文档