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请求方法:
- <script>
- function loadXMLDoc(){
- var xmlhttp;
-
- if (window.XMLHttpRequest){
-
-
- xmlhttp=new XMLHttpRequest();
- }else{
-
-
- xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
- }
-
- xmlhttp.onreadystatechange=function(){
- if (xmlhttp.readyState==4 && xmlhttp.status==200){
-
- document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
- }
- }
-
- xmlhttp.open("GET","/try/ajax/demo_get.php",true);
-
- xmlhttp.send();
- }
- </script>
5、以用户注册为例,以get方式发送请求实例:
register.php
- <html>
- <head>
- <title>用户注册</title>
- <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
- <script type="text/javascript">
-
- function getXmlHttpObject(){
- var xmlHttpRequest;
-
- if(window.ActiveXObject){
- xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
- }else{
- xmlHttpRequest=new XMLHttpRequest();
- }
- return xmlHttpRequest;
- }
- var myXmlHttpRequest="";
-
- function checkName(){
- myXmlHttpRequest=getXmlHttpObject();
-
- if(myXmlHttpRequest){
-
-
-
-
- var url="/ajax/registerProcess.php?mytime="+new Date()+"&username="+$("username").value;
-
- myXmlHttpRequest.open("get",url,true);
-
- myXmlHttpRequest.onreadystatechange=chuli;
-
-
- myXmlHttpRequest.send(null);
- }
- }
-
-
- function chuli(){
-
-
- if(myXmlHttpRequest.readyState==4){
-
-
- $('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
- <span style="font-size:18px;"><?php
-
- header("Content-Type: text/xml;charset=utf-8");
-
- header("Cache-Control: no-cache");
-
- $username=$_GET['username'];
- if($username=="shunping"){
-
- echo "用户名不可以用";
- }else{
- echo "用户名可以用";
- }
- ?> </span>
6、ajax发送post请求方法:
- <script>
- function loadXMLDoc(){
- var xmlhttp;
- if (window.XMLHttpRequest){
-
- xmlhttp=new XMLHttpRequest();
- }else{
-
- 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");