ajax实验Word文件下载.docx
《ajax实验Word文件下载.docx》由会员分享，可在线阅读，更多相关《ajax实验Word文件下载.docx（10页珍藏版）》请在冰点文库上搜索。
$v"
）;
//键:
值
}
echo"
{"
.$a."
}"
//json数组
>
在浏览器地址栏输入“http:
//localhost/a.php?
a=1$b=2”，观察浏览器是否正确显示了请求参数。
浏览器输出了以键值对的形式输出了URL传的参数，$_REQUEST是一个数组，从URL中取得数据，然后循环读取，$k代表数组的键$v代表数组的值。
2准备一个ajax辅助类
编写一个javascript程序文件ajax.js，内容如下。
if（!
window.Ajax）{//避免重复加载
Ajax=function（）{//构造函数，闭包
varr;
//局部变量，请求对象
functiongetXHR（）{//获取新的请求对象
r=undefined;
//销毁原有对象
if（window.XMLHttpRequest）{//W3C,IE8+
r=newXMLHttpRequest（）;
}elseif（window.ActiveXObject）{//IE
try{
r=newActiveXObject（"
Msxml2.XMLHTTP"
//IE
}catch（e）{
Microsoft.XMLHTTP"
//IE5-
throw"
浏览器不支持Ajax"
//抛出异常
}
//GET方式发送请求
//参数url：
不包含参数的服务器页面地址
//参数data：
请求参数，字符串，格式：
"
名=值&
名=值"
//参数func：
收到服务器返回的数据时的回调函数
//参数asyn：
true-异步方式，false（默认）-同步方式
this.get=function（url,data,func,asyn）{//chrome支持参数自定义默认值，IE不支持参数自定义默认值
getXHR（）;
if（func）r.onreadystatechange=function（）{//请求对象状态改变
if（r.readyState==4&
&
r.status==200）{//收到服务器返回数据，HTTP状态正常
func（r.responseText）;
//调用回调函数，传递返回文本
if（data）url+="
+data//将请求参数添加到URL
r.open（"
GET"
encodeURI（url）,asyn）;
//设置工作方式，chrome可以直接处理汉字名和汉字值，IE必须编码URL才能处理汉字，
r.send（）;
//发送请求
//同步方式下进入阻塞状态，直到收到服务器返回数据后，代码往后执行
//异步方式下，代码继续执行
returnr.responseText;
//同步方式下返回收到的数据
};
//POST方式发送请求
this.post=function（url,data,func,asyn）{
if（func）r.onreadystatechange=function（）{
r.status==200）{
POST"
//设置内容类型，post方式必须如此设置
r.setRequestHeader（"
Content-Type"
"
application/x-www-form-urlencoded"
r.send（data）;
//发送请求参数
分析：
窗口体发起ajax请求，首先如果页面已经存在请求则忽略当前请求，如果请求为空则发起新请求。
定义AJAX函数，指定变量r为请求对象。
首先建立一个新的get请求。
如果r已经为发起请求的对象，则销毁对象r。
重新指定r建立http响应（判断了浏览器是否支持AJAX）。
建立get请求，指定相应参数，url请求链接，data发送请求时的参数，func为请求后的回调函数（即请求后执行的函数），asyn确认是否为异步请求。
发送请求，若存在请求数据则将数据记录在url后。
如果请求为200（即通过）则执行成功的回调函数返回得到的数据。
后续方法为post请求。
参数和执行函数相同，不同点：
post请求不显示传送的参数在url后，即post请求参数不可见。
3准备一个测试ajax功能的javascript应用程序
编写一个javascript程序文件a.js，内容如下。
try{
varf=function（r）{alert（"
return:
+r）;
};
//回调函数
vardata="
a=1&
b=2"
//请求参数
varajax=newAjax;
//同步GET方式
alert（ajax.get（"
a.php"
data,f,false））;
//异步GET方式
//ajax.get（"
data,f）;
//同步POST方式
//alert（ajax.post（"
//异步POST方式
//ajax.post（"
}catch（e）{
alert（e）;
//异常信息
定义回调函数f请求发送数据data新建一个ajax对象实现同步get和异步get请求同步post和异步post请求若有异常则客户端弹出异常窗口信息
4引入javascript代码
编写一个HTML文件a.htm，内容如下。
!
--引入ajax辅助库-->
scripttype="
text/javascript"
src="
ajax.js"
/script>
--引入ajax应用程序-->
a.js"
//localhost/a.htm”，观察运行情况，分析代码。
执行上述JS在浏览器界面出现键值对1:
12:
2
5采用ajax技术设计一个web登录程序。
DOCTYPEhtml>
html>
<
head>
metacharset="
utf-8"
/>
title>
登录界面<
/title>
js/jquery-3.2.1.min.js"
>
/head>
style>
div{
width:
100%;
height:
text-align:
center;
.id.pass{
size:
30px;
input{
400px;
margin:
30px0;
button{
60px;
/style>
body>
divclass="
login_tab"
h1>
请您先登录<
/h1>
id_input"
inputtype="
text"
class="
id"
name="
id="
placeholder="
请输入用户名"
/>
/div>
pass_input"
password"
pass"
请输入密码"
but_input"
buttonclass="
login"
登录<
/button>
div>
/body>
script>
$（document）.ready（function（）{
$（"
#login"
）.click（function（）{
varid=$（"
#id"
）.val（）;
varpass=$（"
#pass"
if（!
id||!
pass）{
alert（"
请输入用户名和密码！
}else{
$.ajax（{
type:
post"
url:
Login.php"
async:
true,
data:
:
id,"
pass},
dataType:
json"
success:
function（msg）{
if（msg.status=="
true"
）{
location.href="
main.html"
用户名或密码错误"
}）;
/html>
if（$_POST）{
if（$_POST['
id'
]=="
admin"
$_POST['
pass'
]=="
123456"
$msg['
status'
false"
echojson_encode（$msg）;
die（）;
升级会员 