AJAX
AJAX=异步javascript和XML。用于创建快速动态网页。
通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。意思是可以在不重新加载整个页面的情况下,对网页的某部份进行更新。
同步(sync):发出一个功能调用时,在没有得到结果前,该调用不不返回或继续执行后面的操作。具体过程:客户端提交请求-》等待服务器处理-》处理完毕返回,在这个过程中客户端不能做其他操作。
异步(async):当一个异步调用发出后,调用者在没有得到结果之前,就可以继续执行后续操作。当这个调用完成后,一般通过状态、通知和回调来通知调用者。具体过程:客户端发出AJAX请求-》服务端处理-》处理完成后执行客户端回调,在客户端发出请求后,仍然可以做其他操作。
XML:可扩展标识语言,被设计用来传输和数据存储;AJAX是核心技术;XMLHttpRequest对象(简称XHR)
XHR:用于在后台与服务器交换数据,意味着可以在不重新加载整个页面的情况下,对网页的某部份进行更新。
XMLHttpRequest是AJAX的基础
步骤:1、创建ajax核心对象。2、与服务器建立连接。3、向服务器发送请求。4、接收服务器响应的数据 。
创建XMLHttpRequest对象
//创建XHR对象语法:
variable=new XMLHttpRequest();
//老版本IE(IE5/IE6)使用ActiveX对象
variable=new ActiveXObject('Microsoft.XMLHTTP');
为了应对所有浏览器,包括IE5和IE6,首先检查浏览器是否支持XMLHttpRequest对象,如果支持则创建XMLHttpRequest对象,如果不支持,则创建ActiveXObject:
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
}
向服务器发送请求
如需将请求发送到服务器,使用XMLHttpRequest对象的open()和send()方法。
var xmlhttp=new XMLHttpRequest();
xmlhttp.open('GET','test.php',true);
xmlhttp.send();
open(method,url,async);//method:规定请求的类型.URL:文件在服务器上的位置。async:是否异步处理请求(true[异步]或false[同步])。
send(string);//将请求发送到服务器。string:仅用于post请求。
XMLHttpRequest对象如果用于AJAX的话,其open()方法的async参数必须设置为true。
使用GET还是POST?
与POST相比,GET更简单也更快,并且在大部分情况下都能用。然而在以下情况 中,需使用POST请求:
1、无法使用缓存 文件(更新服务器上的文凭或数据库)
2、向服务器发送大量数据(POST没有数据量限制)
3、发送包含未知字符的用户输入时,POST比GET更稳定也更可靠。
onreadystatechange事件
在onreadystatechange事件中,规定当服务器响应已做好被处理的准备时所执行的任务。
当请求被 发送到服务器时,需要执行一些基于响应的任务。每当readystate改变时,就会触发onreadystatechange事件.readystate属性存有XMLHttpRequest对象的三个重要属性:
onreadystatechange:存储函数(或函数名),每当readyState属性改变时,就会调用 该函数
readyState:存有XMLHttpRequest状态,从0到4发生的变化:
0:请求未初始化
1:服务器连接已建立
2:请求已接收
3:请求处理中
4:请求已完成,且响应已就绪
status:200:"OK" 404:未找到页面
Callback函数
是一种认参数形式传递给另一个函数的函数。
服务器响应
如需获得来自服务器的响应,主使用XMLHttpRequest对象的responseText或responseXML属性;
responseText:获得字符串形式的响应数据
responseXML:获得XML形式的响应数据
var xmlhttp=new XMLHttpRequest()
responseText属性:来自服务器的响应并非XML
例:document.getElementById('idname').innerHTML=xmlhttp.responseText;
responseXML属性:来自服务器的响应是XML,而且需要作为XML对象进行解析。
xmlDoc=xmlhttp.responseXML;//XMLDOM文档
txt='';
x=xmlDoc.getElementsByTagName('');//获取响应的XMLDOM文档
for (var i=0;i<x.length;i++) {
txt=txt + x[i].childNodes[0].nodeValue + "<br/>"
}
document.getElementById('mydiv').innerHTML=txt;//获取到的数据改变div内容
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#my{height: 100px;width: 100px;background: red;}
</style>
</head>
<body>
<div id='my'><p>ccacsas</p></div>
<script type="text/javascript">
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
}
console.log(xmlhttp);
xmlhttp.onreadystatechange=function() {
if (4 == xmlhttp.readyState && 200 == xmlhttp.status) {
console.log(xmlhttp.readyState);
document.getElementById('my').innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open('GET','1.txt',true);
xmlhttp.send();
//post
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
}
console.log(xmlhttp);
xmlhttp.onreadystatechange=function() {
if (4 == xmlhttp.readyState && 200 == xmlhttp.status) {
console.log(xmlhttp.readyState);
document.getElementById('my').innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open('POST','1.php',true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();
</script>
</body>
</html>