Ajax

1.Ajax是什么

ajax是异步的js和xml

是7种技术的综合（js, xml, xstl, dom, xhtml xmlhttprequest,css）

ajax是一个与服务器端语言无关的技术（php/java ee/.net）

ajax可以给客户端返回三种格式的数据（文本格式， xml, json）

无刷新数据交换技术有以下：flash, java applet, 框架， iframe, ajax

onreadystatechange事件：

readystate:

0: 请求未初始化

1：启动。已经调用open方法，但没有调用send方法（服务器连接已建立）

2：发送。已经调用send方法，但尚未接到响应（请求已接收）

3：接收。已经接收到部分响应数据（请求处理中）

4：完成。已经接收到全部响应数据，而且已经可以再客户端使用了（请求已完成，且响应就绪）

第一种方式：通过get方式发出请求

 1 <script type="text/javascript">
 2     var xmlHttprequest;
 3         function getXmlHttpRequst() {
 4             // 不同浏览器获取对象xmlhttprequest方法不一样            
 5             if(window.ActiveXObject){
 6                 xmlHttprequest = new ActiveXObject();
 7             }
 8             else{
 9                 xmlHttprequest = new XMLHttpRequest();
10             }
11             return xmlHttprequest;
12         }
13         
14         function checkUser() {
15             var xmlHttprequest = getXmlHttpRequst();   // 一号线：创建对象
16             // 判断xmlHttprequest对象是否创建成功
17             if(xmlHttprequest) {
18                 // 通过xmlHttprequest对象发送请求到服务器
19                 var url = "/test1/a.php?username="+$("username").value;
20                 xmlHttprequest.open("get", url ,true);
21                 xmlHttprequest.onreadystatechange = chuli;  // 调用处理函数输出取得的值
22                  // 二号线：发送数据 
23                 xmlHttprequest.send(null);                                     
24             }
25             else{
26                 alert("创建失败");
27             }        
28         }
29         function $(id) {
30             return document.getElementById(id);
31         }
32         function chuli(){
33             if(xmlHttprequest.readyState == 4){
34                 // console.log(xmlHttprequest.responseText);
35                 $("myres").value = xmlHttprequest.responseText;
36             }
37         }
38     </script>

 1 <!-- a.php -->
 2 <?php
 3 // 接收数据
 4 $username = $_GET['username'];
 5 // echo $username;  // 3号线：接收并返回数据
 6 if($username == "huqingiqng") {
 7     echo "用户名正确";  // 注意，这里数据时返回给请求的页面，所以是在请求的地方输出
 8 }
 9 else{
10     echo "用户名错误";
11 }
12 ?>

第二种：通过post方式发送请求

 1 function checkUser() {
 2             var xmlHttprequest = getXmlHttpRequst();   // 一号线：创建对象
 3             // 判断xmlHttprequest对象是否创建成功
 4             if(xmlHttprequest) {
 5                 // 通过xmlHttprequest对象发送请求到服务器
 6                 var url = "/test1/a.php";
 7                 var data = "username="+$("username").value;
 8                 xmlHttprequest.open("post", url ,true);
 9                 xmlHttprequest.setRequestHeader("Content-type","application/x-www-form-urlencoded") // 这句话必须加上
10                 //指定回调函数
11                 xmlHttprequest.onreadystatechange = chuli;  // 调用处理函数输出取得的值
12                  // 二号线：发送数据 
13                 xmlHttprequest.send(data);                                     
14             }
15             else{
16                 alert("创建失败");
17             }        
18         }
19

 1 <?php
 2 // 接收数据
 3 $username = $_POST['username'];
 4 // echo $username;  // 3号线：接收并返回数据
 5 if($username == "huqingiqng") {
 6     echo "用户名正确";  // 注意，这里数据时返回给请求的页面，所以是在请求的地方输出
 7 }
 8 else{
 9     echo "用户名错误";
10 }
11 ?>