ajax实验Word文件下载.docx

1、$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（）/构造函数，闭包 var r;/局部变量，请求对象 function getXHR（）/获取新的请求对象 r=undefi

2、ned;/销毁原有对象 if （window.XMLHttpRequest） /W3C,IE8+ r = new XMLHttpRequest（）; else if （window.ActiveXObject） /IE try r = new ActiveXObject（Msxml2.XMLHTTP/IE catch （e） Microsoft.XMLHTTP/IE5- throw 浏览器不支持Ajax/抛出异常 /GET方式发送请求 /参数url：不包含参数的服务器页面地址 /参数data：请求参数，字符串，格式：名=值&名=值 /参数func：收到服务器返回的数据时的回调函数 /参数asy

3、n：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

4、）,asyn）;/设置工作方式，chrome可以直接处理汉字名和汉字值，IE必须编码URL才能处理汉字， r.send（）;/发送请求 /同步方式下进入阻塞状态，直到收到服务器返回数据后，代码往后执行 /异步方式下，代码继续执行 return r.responseText;/同步方式下返回收到的数据 ; /POST方式发送请求 this.post=function（url,data,func,asyn） if（func）r.onreadystatechange=function（） r.status=200）POST /设置内容类型，post方式必须如此设置 r.setRequestHeade

5、r（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后

6、。如果请求为200（即通过）则执行成功的回调函数返回得到的数据。后续方法为post请求。参数和执行函数相同，不同点：post请求不显示传送的参数在url后，即post请求参数不可见。3 准备一个测试ajax功能的javascript应用程序编写一个javascript程序文件a.js，内容如下。try var f=function（r）alert（return:+r）;/回调函数 var data=a=1&b=2/请求参数 var ajax=new Ajax; /同步GET方式 alert（ajax.get（a.php,data,f,false）; /异步GET方式 /ajax.get（,da

7、ta,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辅助库-script type=text/javascript src=ajax.js/script-引入ajax应用程序-a.js/localhost/a.htm”，观察运行情况，分析代码。执

8、行上述JS 在浏览器界面出现键值对 1:1 2:25 采用ajax技术设计一个web登录程序。DOCTYPE htmlhtml meta charset=utf-8 /title登录界面js/jquery-3.2.1.min.js /headstyle div width: 100%; height: text-align: center; .id .pass size: 30px; input 400px; margin: 30px 0; button 60px;/stylebodydiv class=login_tabh1请您先登录id_inputinput type=text class

9、=id name= id= placeholder=请输入用户名/divpass_inputpasswordpass请输入密码but_inputbutton class=login登录div/bodyscript $（document）.ready（function（） $（#login）.click（function（） var id = $（#id）.val（）; var pass = $（#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（$_POSTid=admin$_POSTpass = 123456 $msgstatusfalse echo json_encode（$msg）; die（）;