ajax发起和收到服务器的信息

一、ajax发起对服务器的请求

注意：一定要写在服务器下，也一定要去输入路径格式去访问，不能点击页面，否则无效。(试验阶段)

【php代码】

1 <?php
2 
3 $fp=fopen("./02.txt","a");  //“a”代表追加方式打开02.txt文件（文件不存在将会自动创建）
4 fwrite($fp,"php0609");  //给文件写内容
5 fclose($fp);  //关闭文件

 

【html代码】

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <script type="text/javascript">
 7 function ck(){
 8 
 9 　　//利用ajax去请求02.php服务器端页面
10 
11 　　//1.创建ajax对象
12     var hh=new XMLHttpRequest();
13 
14 　　//浏览器方式请求：打开浏览器、输入请求地址、敲回车发送请求
15 
16 　　//2.创建新的http请求（并设置请求地址）
17 
18 　　//open（请求方式get/post,url请求地址）
19     hh.open('GET','./02.php');
20 
21 　　//3.发送请求
22 
23 　　//　　send(get-null/post-给服务器传递的信息)
24     hh.send(null);
25     }
26 
27 </script>
28 </head>
29 
30 <body>
31 <h2>ajax向服务器发送请求</h2>
32 <input type="button" value="触发" onclick="ck()" />
33 </body>
34 </html>

 

效果：会自动生成一个02.txt的文本框。我们点击几次“触发”，里面就会出现几次php0609，而页面其他内容不会改变。

 

 

二、ajax接收服务器端的返回信息

 

浏览器可以接收的信息，ajax都可以接收

ajax接受服务端返回的信息，需要结合readyState/onreadystatechange/responseText属性一并操作

 

 方法：

 属性：

readyState状态：

 onreadystatechange:事件，当ajax状态readyState发生变化的时候要触发执行

为了获得较多的状态，最好在创建好ajax对象后就设置

最多可以感知1/2/3/4 四种状态

 

下面我们来看一下代码实例：

【php代码】

1 <?php
2 
3 echo "<div style='color:green;'>恭喜注册成功！</div>";

 

【html代码】

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <script type="text/javascript">
 7 function ck(){
 8     var hh=new XMLHttpRequest(); //1.创建对象
 9     hh.onreadystatechange=function(){   //4.给ajax设置事件
10         if(hh.readyState==4){
11                document.getElementById('result').innerHTML=hh.responseText;   //把服务器端返回的信息显示到页面上
12             }
13         }
14     hh.open('GET','./03.php');   //2.创建新的HTTP请求
15     hh.send(null);                 //3.发送请求
16     
17 }
18 </script>
19 </head>
20 
21 <body>
22 <h2>ajax接收服务器端返回的信息</h2>
23 <input type="button" value="触发" onclick="ck()" />
24 <div id="result"></div>
25 </body>
26 </html>

 

显示效果图：（点击“触发”后）

 

posted on 2016-05-15 16:26  嗨_ck  阅读(147)  评论(0)  编辑  收藏  举报

导航