2011-05-06
//Ajax学习笔记
ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
ajax 异步javascript和xml (asynchronous javascript and xml)
XMLHttpRequest是ajax的基础,它用于在后台与服务器交换数据
创建XMLHttpRequest对象
所有现代浏览器(ie7+、firefox、chrome、safari、opera)均内建XMLHttpRequest对象
var xmlhttp = new XMLHttpRequest();
老版本的Ie5-6使用ActiveX对象
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
应对所有浏览器创建XMLHttpRequest对象
var xmlhttp = null;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();//ie7+,firefox,chrome,etc
}
else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
用XMLHttpRequest对象的open()和send()方法将请求发送到服务器
xmlhttp.open("GET","do.jsp",true);
xmlhttp.send(null);
方法解释:
open(method,url,async)
method :请求的类型;通常是GET 或POST
url:文件在服务器上的位置
async:true(异步)或false(同步)
send(string)
string:仅用于POST请求
使用GET还是POST
与post相比,get更简单更快,大部分情况下使用
下面情况使用post请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据
发送包含未知字符的用户输入时,post更稳定和可靠
get请求实例:
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
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");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax/demo_get.asp",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" οnclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>
上面的例子可能得到的是缓存的结果,为了避免这种情况,向url添加一个唯一的id
xmlhttp.open("GET","do.jsp?t="+Math.random(),true);
xmlhttp.send();
通过get方法发送信息
xmlhttp.open("GET","do.jsp?name="+name,true);
xmlhttp.open();
post请求
如果想要想html表单那样post数据,则得用setRequestHeader()来添加HTTP头,然后在send()方法中规定您希望发送的数据:
xmlhttp.open("POST","do.jsp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=yn");
//
setRequestHeader(header,value):向请求添加HTTP头
header规定头的名称 value:规定头的值
POST请求实例:
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
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");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","/ajax/demo_post2.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" οnclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>
/
当使用异步模式时,必须规定onreadystatechange事件中的就绪状态时执行的函数:
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","do.jsp"true);
xmlhttp.send();
服务器响应:
使用XMLHttpRequest对象的responseText和responseXML属性
responseText 获取字符串形式的响应数据
responseXML 获取xml形式的响应数据
//
onreadystatechange事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务
每当readyState改变时,就会触发onreadystatechange事件
readyState属性存有XMLHttpRequest的状态信息
XMLHttpRequest对象的三个重要属性:
onreadystatechange 存储函数,每当readyState属性改变时,就会调用该函数
readyState 存有XMLHttpRequest的状态信息,
0 请求未初始化
1,服务器连接已建立
2,请求接收中
3,请求处理中
4,请求已完成,且响应已就绪
status 服务器返回信息 200 OK 404 未找到页面
//
最后一个代码
function showHint(str)
{
var xmlhttp;
if (str.length==0)//如果输入框为空 (str.length==0),则该函数清空 txtHint 占位符的内容,并退出函数
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}