php 中ajax get与post请求

最新推荐文章于 2021-03-28 06:19:40 发布

走向构架师

最新推荐文章于 2021-03-28 06:19:40 发布

阅读量757

点赞数

文章标签： php ajax 通信

1、使用ajax与服务器通信的的步骤:

① 创建一个XMLHttpRequest对象

② 创建url,data,通过 xmlHttpRequest.send()

③ 服务器端接收 ajax的请求,做相应处理(操作数据库)，然后返回结果(用 echo 语句返回结果)

④ 客户端通过xmlHttpRequest的属性 reponseText , responseXML 取的数据，然后就完成局部刷新当前页面任务

2、XMLHttpRequest 对象属性

属性	描述
onreadystatechange	存储函数（或函数的名称）在每次 readyState 属性变化时被自动调用。
readyState	存放了 XMLHttpRequest 的状态。从 0 到 4 变化： 0：请求未初始化 1：服务器建立连接 2：收到的请求 3：处理请求 4：请求完成和响应准备就绪
responseText	返回作为一个字符串的响应数据。
responseXML	返回作为 XML 数据响应数据。
status	返回状态数（例如 "404" 为 "Not Found" 或 "200" 为 "OK"）。
statusText	返回状态文本（如 "Not Found" 或 "OK"）。

3、XMLHttpRequest 对象方法

方法	描述
abort()	取消当前的请求。
getAllResponseHeaders()	返回头信息。
getResponseHeader()	返回指定的头信息。
open(method,url,async,uname,pswd)	规定请求的类型，URL，请求是否应该进行异步处理，以及请求的其他可选属性。 method：请求的类型：GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	发送请求到服务器。 string：仅用于 POST 请求
setRequestHeader()	把标签/值对添加到要发送的头文件。

4、ajax发送get请求方法：

[javascript]view plain copy 
   
 <script>  
 function loadXMLDoc(){  
     var xmlhttp;  
     //创建一个XMLHttpRequest对象  
     if (window.XMLHttpRequest){  
         // code for IE7+, Firefox, Chrome, Opera, Safari  
         //对于以上浏览器采用下面方法创建  
         xmlhttp=new XMLHttpRequest();  
     }else{  
             // code for IE6, IE5  
             //对于以上浏览器采用下面方法创建  
         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
     }  
     //每次readyState发生变化时执行以下函数  
     xmlhttp.onreadystatechange=function(){  
         if (xmlhttp.readyState==4 && xmlhttp.status==200){  
             //将ajax请求返回的值赋给id为 myDiv的元素  
             document.getElementById("myDiv").innerHTML=xmlhttp.responseText;  
         }  
     }  
     //规定请求的类型，URL，请求是否应该进行异步处理，以及请求的其他可选属性。   
     xmlhttp.open("GET","/try/ajax/demo_get.php",true);  
     //发送请求  
     xmlhttp.send();  
 }  
 </script>  

5、以用户注册为例，以get方式发送请求实例：

[php]view plain copy 
   
 <html>  
 <head>  
 <title>用户注册</title>  
 <meta http-equiv="content-type" content="text/html;charset=utf-8"/>  
 <script type="text/javascript">  
     //创建ajax引擎  
     function getXmlHttpObject(){  
         var xmlHttpRequest;  
         //不同的浏览器获取对象xmlhttprequest 对象方法不一样  
         if(window.ActiveXObject){  
             xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");  
         }else{  
             xmlHttpRequest=new XMLHttpRequest();  
         }  
         return xmlHttpRequest;  
     }  
     var myXmlHttpRequest="";  
     //验证用户名是否存在  
     function checkName(){  
         myXmlHttpRequest=getXmlHttpObject();  
         //怎么判断创建ok  
         if(myXmlHttpRequest){  
             //通过myXmlHttpRequest对象发送请求到服务器的某个页面  
             //第一个参数表示请求的方式, "get" / "post"  
             //第二个参数指定url,对哪个页面发出ajax请求(本质仍然是http请求)  
             //第三个参数表示 true表示使用异步机制,如果false表示不使用异步,即同步机制。  
             var url="/ajax/registerProcess.php?mytime="+new  Date()+"&username="+$("username").value;  
             //打开请求.  
             myXmlHttpRequest.open("get",url,true);  
             //指定回调函数.chuli是函数名  
             myXmlHttpRequest.onreadystatechange=chuli;  
             //真的发送请求,如果是get请求则填入 null即可  
             //如果是post请求，则填入实际的数据  
             myXmlHttpRequest.send(null);   
         }  
     }  
   
     //回调函数  
     function chuli(){  
         //window.alert("处理函数被调回"+myXmlHttpRequest.readyState);  
         //我要取出从registerPro.php页面返回的数据  
         if(myXmlHttpRequest.readyState==4){  
             //取出值,根据返回信息的格式定.text  
             //window.alert("服务器返回"+myXmlHttpRequest.responseText);  
             $('myres').value=myXmlHttpRequest.responseText;  
         }  
     }  
     //这里我们写一个函数  
     function $(id){  
         return document.getElementById(id);  
     }  
 </script>  
 </head>  
 <body>  
     <form action="???" method="post">  
     用户名字:<input type="text"  οnkeyup="checkName();"  name="username1" id="username"><input type="button" οnclick="checkName();"  value="验证用户名">  
     <input style="border-width: 0;color: red" type="text" id="myres">  
     <br/>  
     用户密码:<input type="password" name="password"><br>  
     电子邮件:<input type="text" name="email"><br/>  
     <input type="submit" value="用户注册">  
     </form>  
      <form action="???" method="post">  
     用户名字:<input type="text" name="username2" >  
      
     <br/>  
     用户密码:<input type="password" name="password"><br>  
     电子邮件:<input type="text" name="email"><br/>  
     <input type="submit" value="用户注册">  
     </form>  
   
 </body>  
 </html>  

registerpro.php

[php]view plain copy 
   
 <span style="font-size:18px;"><?php  
     //这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式  
     header("Content-Type: text/xml;charset=utf-8");  
     //告诉浏览器不要缓存数据  
     header("Cache-Control: no-cache");  
     //接收数据  
     $username=$_GET['username'];  
     if($username=="shunping"){  
         //注意，这里数据是返回给请求的页面.用echo语句返回  
         echo "用户名不可以用";  
     }else{  
         echo "用户名可以用";  
     }  
 ?>   </span>  

6、ajax发送post请求方法：

[javascript]view plain copy 
   
 <script>  
 function loadXMLDoc(){  
     var xmlhttp;  
     if (window.XMLHttpRequest){  
         // code for IE7+, Firefox, Chrome, Opera, Safari  
         xmlhttp=new XMLHttpRequest();  
     }else{  
         // code for IE6, IE5  
         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
     }  
     xmlhttp.onreadystatechange=function(){  
         if (xmlhttp.readyState==4 && xmlhttp.status==200){  
             document.getElementById("myDiv").innerHTML=xmlhttp.responseText;  
         }  
     }  
     xmlhttp.open("POST","/try/ajax/demo_post2.php",true);  
     //下面这句话必须有  
     //把标签/值对添加到要发送的头文件。  
     xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
     xmlhttp.send("fname=Henry&lname=Ford");  
     }  
 </script>  

7、使用get方式发出请求，如果提交的用户名不变化，浏览器将不会真的发请求，而是从缓存取数据、url

解决方法：

1、url 后带一个总是变化的参数,比如当前时间

varurl="/ajax/registerProcess.php?mytime="+new Date()+"&username="+$("username").value;

2、在服务器回送结果时，禁用缓存.

//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式

header("Content-Type:text/xml;charset=utf-8");

//告诉浏览器不要缓存数据

header("Cache-Control:no-cache");

走向构架师

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
php 中ajax get与post请求

1、使用ajax与服务器通信的的步骤:① 创建一个XMLHttpRequest对象② 创建url,data,通过 xmlHttpRequest.send()③ 服务器端接收 ajax的请求,做相应处理(操作数据库)，然后返回结果(用 echo 语句返回结果)④ 客户端通过xmlHttpRequest的属性 reponseText ,
复制链接

扫一扫