Ajax学习二
|
Ajax返回的数据格式有3种，text/xml/json 无刷新数据交换技术： flash,javaapplet,框架,iframe,ajax) json数据 ——一种原生态的数据、 ajax原理：使用XMLHTTPREQUEST异步传输获得数据，赋给占位符、 uajax在什么地方用的多 1动态加载数据，按需取得数据。【树形菜单、联动菜单.../省市联动】 2改善用户体验。【输入内容前提示、带进度条文件上传...】 3电子商务应用。 【购物车、邮件订阅...】 4访问第三方服务。 【访问搜索服务、rss阅读器】 5.数据的布局刷新 <?php ?> 其中?>的有无表示被包含于包含的关系。
?使用get方式发出请求，如果提交的用户名不变化，浏览器将不会真的发请求，而是缓存取数据.,url 解决方法 1.url后带一个总是变化的参数,比如当前时间 varurl="/ajax/registerProcess.php?mytime="+newDate()+"&username="+$("username").value; 2.在服务器回送结果时，禁用缓存. //这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式 header("Content-Type:text/xml;charset=utf-8"); //告诉浏览器不要缓存数据 header("Cache-Control:no-cache"); 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("Microsoft.XMLHTTP"); }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("get",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="post"> 用户名字:<inputtype="text"onkeyup="checkName();"name="username1"id="username"><inputtype="button"onclick="checkName();"value="验证用户名"> <inputstyle="border-width:0;color:red"type="text"id="myres"> <br/> 用户密码:<inputtype="password"name="password"><br> 电子邮件:<inputtype="text"name="email"><br/> <inputtype="submit"value="用户注册"> </form> <formaction="???"method="post"> 用户名字:<inputtype="text"name="username2"> <br/> 用户密码:<inputtype="password"name="password"><br> 电子邮件:<inputtype="text"name="email"><br/> <inputtype="submit"value="用户注册"> </form> </body> </html> registerpro.php <?php //这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式 header("Content-Type:text/xml;charset=utf-8"); //告诉浏览器不要缓存数据 header("Cache-Control:no-cache"); //接收数据 $username=$_GET['username']; if($username=="shunping"){ echo"用户名不可以用";//注意，这里数据是返回给请求的页面. }else{ echo"用户名可以用"; } ?> uajax的post方式请求 在前面案例我们修改一下： 关键代码 register.php varurl="/ajax/registerProcess.php"; //这个是要发送的数据 vardata="username="+$('username').value; //打开请求. myXmlHttpRequest.open("post",true); //还有一句话，这句话必须. myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //指定回调函数.chuli是函数名 myXmlHttpRequest.onreadystatechange=chuli; //真的发送请求,如果是get请求则填入null即可 //如果是post请求，则填入实际的数据 myXmlHttpRequest.send(data); registerPro.php关键码： $username=$_POST['username']; （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |