菜鸟的Ajax笔记.docx
- 文档编号:29792831
- 上传时间:2023-07-27
- 格式:DOCX
- 页数:18
- 大小:21.76KB
菜鸟的Ajax笔记.docx
《菜鸟的Ajax笔记.docx》由会员分享,可在线阅读,更多相关《菜鸟的Ajax笔记.docx(18页珍藏版)》请在冰豆网上搜索。
菜鸟的Ajax笔记
菜鸟的Ajax笔记——简介
Ajax的主要作用就是不刷新页面更新页面的内容,也就是异步传输。
Ajax的XX百科。
用来显示Ajax响应的div。
Ajax听起来很厉害,但是用起来其实很简单。
下面就是一段使用Ajax的简单示例。
functionajaxRequest(){
varreq=false;
if(window.XMLHttpRequest){
varreq=newwindow.XMLHttpRequest();
}elseif(window.ActiveXObject){
varreq=newwindow.ActiveXObject('Microsoft.XMLHTTP');
}
if(!
req)returnfalse;
req.onreadystatechange=callback;
req.open('GET','ajax/ajaxTest.txt',true);
req.setRequestHeader('Accept-Language','zh-cn');
req.send(null);
functioncallback(){
switch(req.readyState){
case1:
//alert('Loading');
break;
case2:
//alert('loaded');
break;
case3:
//alert('Interactive');
break;
case4:
if(req.status&&req.status==200){
varstr=req.responseText;
document.getElementById('test').innerHTML=str;
}
break;
}
}
}
functionaddEventSimple(obj,evt,fn){
if(obj.addEventListener){
obj.addEventListener(evt,fn,false);
}elseif(obj.attachEvent){
obj.attachEvent('on'+evt,fn);
}
}
addEventSimple(document,'dblclick',ajaxRequest);
代码的最后部分给document添加一个双击的响应函数,当文档被双击的时候就调用ajaxRequest函数,也就是负责发送Ajax请求的函数。
ajaxRequest函数中,第一步就是创建一个XMLHttpRequest对象,代码如下,由于IE和其它浏览器支持的方式不太一样,所以会试图使用使用两个方法来创建这个对象。
varreq=false;
if(window.XMLHttpRequest){
varreq=newwindow.XMLHttpRequest();
}elseif(window.ActiveXObject){
varreq=newwindow.ActiveXObject('Microsoft.XMLHTTP');
}
if(!
req)returnfalse;
第二步是设置XMLHttpRequest对象的状态变化响应函数。
req.onreadystatechange=callback;
下面是发送Ajax请求了。
req.open('GET','ajax/ajaxTest.txt',true);
req.send(null);
最后就可以编写状态变化响应函数了:
functioncallback(){
switch(req.readyState){
case1:
//alert('Loading');
break;
case2:
//alert('loaded');
break;
case3:
//alert('Interactive');
break;
case4:
if(req.status&&req.status==200){
varstr=req.responseText;
document.getElementById('test').innerHTML=str;
}
break;
}
}
函数的作用就是将返回的字符串添加到页面开头id为test的div内。
双击这个文档就可以看到效果。
XMLHttpRequest对象
Ajax的核心就是XMLHttpRequest对象。
XMLHttpRequest对象的属性
readyState
表示XMLHttpRequest对象的当前状态,可取值为0-4,共5个状态。
∙0:
"未初始化"状态;此时,已经创建一个XMLHttpRequest对象,但是还没有初始化。
∙1:
"发送"状态;此时,代码已经调用了XMLHttpRequestopen()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
∙2:
"发送"状态;此时,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。
∙3:
"正在接收"状态;此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。
∙4:
"已加载"状态;此时,响应已经被完全接收。
onreadystatechange
当readyState属性变化的时候会调用的函数。
responseText
响应的文本内容。
当readyState值为0、1或2时,responseText包含一个空字符串。
当readyState值为3(正在接收)时,响应中包含客户端还未完成的响应信息。
当readyState为4(已加载)时,该responseText包含完整的响应信息。
responseXML
XML响应;Content-Type头部指定MIME(媒体)类型为text/xml,application/xml或以+xml结尾。
如果Content-Type头部并不包含这些媒体类型之一,那么responseXML的值为null。
status
HTTP状态代码。
仅当readyState值为3(正在接收中)或4(已加载)时,该属性才可用。
当readyState的值小于3时试图存取status的值将引发一个异常。
statusText
HTTP状态的文本;并且仅当readyState值为3或4才可用。
当readyState为其它值时试图存取statusText属性将引发一个异常。
XMLHttpRequest对象的方法
abort()
取消当前请求。
把XMLHttpRequest对象复位到未初始化状态。
open()
open(method,url,async,username,password)
方法初始化一个XMLHttpRequest对象。
method参数是必须提供的-用于指定你想用来发送请求的HTTP方法(GET,POST,PUT,DELETE或HEAD)。
url参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URL。
async参数为布尔值,指定请求是否异步,默认值为true,即异步。
该方法把XMLHttpRequest对象的readyState属性设置为1。
setRequestHeader()
setRequestHeader(header,value)
设置请求的头部信息。
必须在调用open()方法后调用这个方法(当readyState值为1时)。
send()
send([content])
把请求发送到服务器。
content函数可选,是要发送到服务器的内容,通常在POST方法的时候使用。
该方法把XMLHttpRequest对象的readyState属性的值设置为2。
getResponseHeader()
getResponseHeader(header,value)方法用于检索响应的头部值。
仅当readyState值是3或4
getAllResponseHeaders()
该getAllResponseHeaders()方法以一个字符串形式返回所有的响应头部。
处理Ajax响应1——innerHTML
学会了Ajax的核心,再来做几个例子,使用innerHTML将服务器响应的内容添加到页面,响应的格式是纯文本,也就是使用XMLHttpRequest对象的responseText属性。
效果如下,只要点击那几个按钮就可以分别向服务器发送三个不同的Ajax请求。
用Ajax请求段文字用Ajax请求一个table用Ajax从豆瓣取得封面图片
JavaScript代码分析
首先,这个需要发送三次请求,所以我们把可以重用的代码编写到一个函数中,这个函数的任务就是设置XMLHttpRequest对象,初始化必要的属性。
代码很大程度上参考了《Ajax基础教程》和《AdvancEDDOMScripting》。
functioncreateRequest(options){
varreq=false;
if(window.XMLHttpRequest){
varreq=newwindow.XMLHttpRequest();
}elseif(window.ActiveXObject){
varreq=newwindow.ActiveXObject('Microsoft.XMLHTTP');
}
if(!
req)returnfalse;
req.onreadystatechange=function(){
if(req.readyState==4&&req.status==200){
options.listener.call(req);
}
};
req.open(options.method,options.url,true);
returnreq;
}
createRequest只接受一个options参数,它是一个对象,返回XMLHttpRequest对象。
参数options可能是这样一个字面量对象:
varoptions={
url:
'ajax/strTest.txt',
listener:
callback,
method:
'GET'
}
url表示要请求的文件地址,listener会被作为onreadyStateChange,method作为open的参数。
这个对象比较简单,仅仅是“刚好够用”的程度,应该还需要扩展。
有了这个创建XMLHttpRequest对象的函数之后,我们的任务就只剩下send一下了。
本页有三个类似的函数,它们分别向服务器请求不同的三个文本文件:
functionajaxStr(){
varoptions={
url:
'ajax/strTest.txt',
listener:
callback,
method:
'GET'
}
varrequest=createRequest(options);
request.send(null);
}
functionajaxTable(){
varoptions={
url:
'ajax/tableTest.txt',
listener:
callback,
method:
'GET'
}
varrequest=createRequest(options);
request.send(null);
}
functionajaxImg(){
varoptions={
url:
'ajax/imgTest.txt',
listener:
callback,
method:
'GET'
}
varrequest=createRequest(options);
request.send(null);
}
callback函数会使用innerHTML将它们插入文档。
functioncallback(){
varstr=this.responseText;
document.getElementById('test').innerHTML=str;
}
最后的任务就是生成那几个调用函数的按钮了,这里就不给出代码了。
这次仍然使用innerHTML插入服务器响应的内容。
但是返回的服务器响应的格式从纯文本变为XML,也就是应用XMLHttpRequest对象的responseXML属性。
效果如下:
请选择语言的运行环境服务器端浏览器端
显示Ajax响应的div
JavaScript代码分析
仍然使用上一节的函数来创建XMLHttpRequest对象,这里就不写代码了。
发送请求的ajaxRequest函数也比较简单:
functionajaxRequest(){
varoptions={
url:
'ajax/ajaxXML.xml',
listener:
callback,
method:
'GET'
}
varrequest=createRequest(options);
request.send(null);
}
其中,ajaxXML.xml这个文件就是我们要请求的XML格式的文件,它的内容如下:
xmlversion="1.0"encoding="UTF-8"?
>
最后的响应函数callback才是关键:
functioncallback(){
varxmlDoc=this.responseXML;
varparent=document.getElementById('langSel');
varside=parent.options[parent.selectedIndex].value||"server";
vartarget=xmlDoc.getElementsByTagName(side)[0];
varstr="
- ";
- '+currentLang.childNodes[0].nodeValue+' ';
varlangs=target.getElementsByTagName("lang");
varcurrentLang=null;
for(vari=0;i currentLang=langs[i]; str+='
}
str+='
document.getElementById('test').innerHTML=str;
}
varxmlDoc=this.responseXML;通过XMLHttpRequest的responseXML属性获得请求的XML文件内容。
之后我们就可以使用“各种”方法来处理它了。
xmlDoc.getElementsByTagName(side)[0];side的值可能是'server'或者是'browser',当值为server的时候就取得了server标签。
再在它的基础上getElementsByTagName("lang");就取得了所有server标签下的lang,为一个类似数组的结构,我们再遍历这个数组就可以了。
Ajax请求参数,get与post
使用Ajax向服务器发送请求参数就可以向服务器“索取”不同的信息了,同一般的表格提交一样,用Ajax提交请求同样有GET与POST之分。
使用GET方法
使用GET方法想服务器床底参数的方法比较直接,就是将构建好的请求字符串添加到url后面。
例如下面的示意代码:
varname=document.getElementById('username').value;
vargender=document.getElementById('gender').value;
url='process.php';
query='?
name='+name+'&gender='+gender;
url+=query;
最后构成的字符串形如:
process.php?
name=xxx&gender=yyy。
POST方法
使用POST方法提交的时候,url不需要改变,而请求的参数要作为send的参数。
varname=document.getElementById('username').value;
vargender=document.getElementById('gender').value;
query='name='+name+'&gender='+gender;
//……构建XMLHttpRequest请求的代码……
request.send(query);
除了差一个问好之外query字符串就没有什么其它的区别了。
Ajax表单验证:
用户名是否存在
做一个表单验证里面最简单的例子,检查用户名是否存在,使用Ajax完成表单验证的正常步骤应该是:
1.客户端收集表单信息。
2.使用XMLHttpRequest对象提交到服务器。
3.服务器完成验证的逻辑,返回结果信息。
4.浏览器端根据服务器返回的信息对用户做出一定的提示。
不过由于我的空间不支持任何服务器段语言,所以把本应在服务器的逻辑搬到了浏览器,由JavaScript来做,服务器只负责提供一个用户名的列表。
最后的效果如下,试着输入test,cainiao8这些用户名,都会显示已注册。
用户名:
显示Ajax响应的div
JavaScript代码分析
首先,当文档载入完毕的时候,给表格设置change事件的响应函数ajaxValidate,代码如下:
addEventSimple(window,'load',function(){
vartest=document.getElementById('username');
addEventSimple(test,'change',ajaxValidate);
});
这样,当用户名文本框内的值改变之后,就会调用ajaxValidate函数,其代码如下:
functionajaxValidate(){
varoptions={
url:
'ajax/ajaxUsernames.xml',
listener:
callback,
method:
'GET'
}
varrequest=createRequest(options);
request.send(null);
}
它会使用之前介绍的createRequest函数初始化一个XMLHttpRequest对象,并且将它发送到服务器,请求ajaxUsernames.xml文件。
最后就是callback函数了:
functioncallback(){
varxmlDoc=this.responseXML;
varroot=xmlDoc.getElementsByTagName('root')[0];
varnodes=root.getElementsByTagName("username");
varcurrentNode=null;
varusername=document.getElementById('username').value;
for(vari=0;i currentNode=nodes[i]; if(username==currentNode.childNodes[0].nodeValue){ document.getElementById('test').innerHTML ='对不起! '+username+'已经被注册。 '; return; } } document.getElementById('test').innerHTML='用户名'+username+'可以使用! '; } callback函数在已经存在的用户名搜索当前用户输入的名字,判断是否已经存在。 Ajax请求header 如果我们在使用XMLHttpRequest对象的open方法的时候,把method参数设置为HEAD,就表示我们要忽略文件的具体内容,而只需要服务器返回头部。 用Ajax请求头部 显示Ajax响应的div JavaScript代码分析 仍然请求上一节的ajaxUsernames.xml文件,不过方法设置为了'HEAD'。 functionajaxHeader(){ varoptions={ url: 'ajax/ajaxUsernames.xml', listener: callback, method: 'HEAD' } varrequest=createRequest(options); request.send(null); } 这样,我们就只请求了文件的header部分,可以使用下面的函数将头部信息显示出来。 functioncallback(){ varstr='getAllResponseHeaders(): str+=this.getAllResponseHeaders()+' str+='getResponseHeader("Last-Modified"): ' +this.getResponseHeader("Last-Modified"); str+='getResponseHeader("Content-Type"): ' +this.getResponseHeader("Content-Type"); vartest=document.getElementById('test'); test.innerHTML=str; test.style.border='1pxsolidblack'; } Ajax级联下拉列表 经常可以在注册各种帐号的时候遇到这样的表单——要求在下拉列表中欧你选择自己所在的省、市。 而且通常情况下都是有两个下拉列表,通过用户对省的选择控制第二个市下拉列表的内容。 例如
';
';
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 菜鸟 Ajax 笔记