Ajax讲解Word文件下载.docx
- 文档编号:17589475
- 上传时间:2022-12-07
- 格式:DOCX
- 页数:19
- 大小:97.77KB
Ajax讲解Word文件下载.docx
《Ajax讲解Word文件下载.docx》由会员分享,可在线阅读,更多相关《Ajax讲解Word文件下载.docx(19页珍藏版)》请在冰豆网上搜索。
]
Ajax引擎对象中的方法
abort()停止当前请求
getAllResponseHeaders()作为字符串返回完整的headers
getResponseHeader("
headerLabel"
)作为字符串返回单个的header标签
open("
method"
"
URL"
[,asyncFlag[,"
userName"
[,"
password"
]]])
设置未决的请求的目标URL,方法,和其他参数
send(content)发送请求
setRequestHeader("
label"
"
value"
)设置header并和请求一起发送
Ajax引擎对象中的属性
onreadystatechange状态改变的事件触发器
readyState对象状态(integer):
0=未初始化
1=读取中
2=已读取
3=交互中
4=完成
responseText服务器进程返回数据的文本版本
responseXML服务器进程返回数据的兼容DOM的XML文档对象
status服务器返回的状态码,如:
404="
文件未找到"
、200="
成功"
statusText服务器返回的状态文本信息
◆ajax的运行原理分析
看一个需求:
◆ajax在什么地方用的多
1动态加载数据,按需取得数据。
【树形菜单、联动菜单.../省市联动】
2改善用户体验。
【输入内容前提示、带进度条文件上传...】
3电子商务应用。
【购物车、邮件订阅...】
4访问第三方服务。
【访问搜索服务、rss阅读器】
5.数据的无分页刷新
◆经典的案例
使用ajax与服务器通信的的步骤
1创建一个XMLHttpRequest对象
2创建url,data,通过xmlHttpRequest.send()
3服务器端接收ajax的请求,做相应处理(操作数据库),然后返回结果(echo语句)
4客户端通过xmlHttpRequest的属性reponseText,responseXML取的数据,然后就完成局部刷新当前页面任务
1.使用ajax完成用户名的验证
register.php
<
html>
head>
title>
用户注册<
/title>
metahttp-equiv="
content-type"
content="
text/html;
charset=utf-8"
/>
scripttype="
text/javascript"
>
//创建ajax引擎
functiongetXmlHttpObject(){
varxmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest对象方法不一样
if(window.ActiveXObject){
xmlHttpRequest=newActiveXObject("
}else{
xmlHttpRequest=newXMLHttpRequest();
}
returnxmlHttpRequest;
}
varmyXmlHttpRequest="
;
//验证用户名是否存在
functioncheckName(){
myXmlHttpRequest=getXmlHttpObject();
//怎么判断创建ok
if(myXmlHttpRequest){
//通过myXmlHttpRequest对象发送请求到服务器的某个页面
//第一个参数表示请求的方式,"
get"
/"
post"
//第二个参数指定url,对哪个页面发出ajax请求(本质仍然是http请求)
//第三个参数表示true表示使用异步机制,如果false表示不使用异步
varurl="
/ajax/registerProcess.php?
mytime="
+newDate()+"
&
username="
+$("
username"
).value;
//打开请求.
myXmlHttpRequest.open("
url,true);
//指定回调函数.chuli是函数名
myXmlHttpRequest.onreadystatechange=chuli;
//真的发送请求,如果是get请求则填入null即可
//如果是post请求,则填入实际的数据
myXmlHttpRequest.send(null);
//回调函数
functionchuli(){
//window.alert("
处理函数被调回"
+myXmlHttpRequest.readyState);
//我要取出从registerPro.php页面返回的数据
if(myXmlHttpRequest.readyState==4){
//取出值,根据返回信息的格式定.text
//window.alert("
服务器返回"
+myXmlHttpRequest.responseText);
$('
myres'
).value=myXmlHttpRequest.responseText;
//这里我们写一个函数
function$(id){
returndocument.getElementById(id);
/script>
/head>
body>
<
formaction="
?
method="
用户名字:
inputtype="
text"
onkeyup="
checkName();
name="
username1"
id="
button"
onclick="
value="
验证用户名"
inputstyle="
border-width:
0;
color:
red"
type="
myres"
br/>
用户密码:
br>
电子邮件:
email"
submit"
用户注册"
/form>
username2"
>
/body>
/html>
registerpro.php
php
//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
header("
Content-Type:
text/xml;
//告诉浏览器不要缓存数据
Cache-Control:
no-cache"
//接收数据
$username=$_GET['
username'
];
if($username=="
shunping"
){
echo"
用户名不可以用"
//注意,这里数据是返回给请求的页面.
}else{
用户名可以用"
◆ajax的post方式请求
在前面案例我们修改一下:
关键代码
/ajax/registerProcess.php"
//这个是要发送的数据
vardata="
+$('
//还有一句话,这句话必须.
myXmlHttpRequest.setRequestHeader("
Content-Type"
application/x-www-form-urlencoded"
myXmlHttpRequest.send(data);
registerPro.php关键码:
$username=$_POST['
使用get方式发出请求,如果提交的用户名不变化,浏览器将不会真的发请求,而是缓存取数据.
解决方法
1.url后带一个总是变化的参数,比如当前时间
2.在服务器回送结果时,禁用缓存.
//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
◆ajax如何处理返回的数据格式是xml的情况
//通过myXmlHttpRequest对象发送请求到服务器的某个页面
//第一个参数表示请求的方式,"
//第二个参数指定url,对哪个页面发出ajax请求(本质仍然是http请求)
//第三个参数表示true表示使用异步机制,如果false表示不使用异步
varurl="
if(myXmlHttpRequest.readyState==4){
服务器返回+myXmlHttpRequest.responseText);
//$('
//看看如果取出xml格式数据
//window.alert(myXmlHttpRequest.responseXML);
//获取mes节点
varmes=myXmlHttpRequest.responseXML.getElementsByTagName("
mes"
//取出mes节点值
//window.alert(mes.length);
//mes[0]->
表示取出第一个mes节点
//mes[0].childNodes[0]->
表示第一个mes节点的第一个子节点
varmes_val=mes[0].childNodes[0].nodeValue;
).value=mes_val;
regisgerProcess.php
//接收数据(这里要和请求方式对于_POST还是_GET)
$username=$_POST['
//这里我们看看如何处理格式是xml
$info="
$info.="
res>
mes>
用户名不可以用,对不起<
/mes>
/res>
用户名可以用,恭喜<
echo$info;
◆ajax如何处理json数据格式
1json的格式如下:
{属性名:
属性值,属性名:
属性值,....}"
因为json数据是原生态数据,因此这种数据格式很稳定,而且描述能力强,我们建议大家使用json格式
2json数据格式的扩展
如果服务器返回的json是多组数据,则格式应当如下:
$info="
[{"
属性名"
:
属性值"
...},{"
...},....]"
在xmlhttprequest对象接收到json数据后,应当这样处理
//转成对象数组
varreses=eval("
("
+xmlHttpRequest.responseText+"
)"
//通过reses可以取得你希望的任何一个值
reses[?
].属性名
3更加复杂的json数据格式
scriptlanguage="
JavaScript"
varpeople={
"
programmers"
[
{"
firstName"
Brett"
brett@newI"
},
Jason"
jason@"
],
writer"
[
{"
宋江"
age"
50"
},
吴用"
30"
}
],
"
sex"
男"
};
window.alert(people.programmers[0].firstName);
window.alert(people.programmers[1].email);
window.alert(people.writer[1].writer);
window.alert(people.sex);
◆小结:
当一个ajax请求到服务器,服务器可以根据需求返回三种格式的数据,那么我们应当选择哪一个?
1.如果你的项目经理没有特殊的要求,建议使用json
2.若应用程序不需要与其他应用程序共享数据的时候,使用HTML片段来返回数据时最简单的
3.如果数据需要重用,JSON文件是个不错的选择,其在性能和文件大小方面有优势
4.当远程应用程序未知时,XML文档是首选,因为XML是web服务领域的“世界语”
◆ajax的省市联动案例(如何动态的从服务器取得数据)
showCities.php页面
//创建ajax引擎
functiongetCities(){
myXmlHttpRequest=getXmlHttpObject();
if(myXmlHttpRequest){
varurl="
/ajax/showCitiesPro.php"
//post
vardata="
province="
sheng'
myXmlHttpRe
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Ajax 讲解