Ajax技术

AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML）。

AJAX 不是一种新的编程语言，而是一种使用现有标准的新方法。

AJAX 基于 JavaScript 和 HTTP 请求（HTTP requests）。

通过利用 AJAX，JavaScript 会通过 JavaScript 的 XMLHttpRequest 对象，直接与服务器来通信。

通过使用 HTTP 请求，web 页可向服务器进行请求，并得到来自服务器的响应，而不加载页面。

原生Ajax：

1. 创建请求对象
if(window.XMLHttpRequest){
　　　　// code for IE7+, Firefox, Chrome, Opera, Safari
　　　　xmlhttp=new XMLHttpRequest();
　　}else{
　　　　// code for IE6, IE5
　　　　xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
　　}

2. 设置回调函数（监听）
　　xmlhttp.onreadystatechange=函数名；
　　或
　　xmlhttp.onreadystatechange=function(){
　　　　函数体。。。
　　}

3. 初始化：
　　xmlhttp.open("GET","gethint.php?q="+str,true); //异步以get方式发送到gethint.php

4. 发送：
　　xmlhttp.send();


其中：xmlhttp请求对象：
　**属性：
　　*readyState //请求状态：0,1,2,3,4
　　*responseText//响应内容
　　responseXML //xml响应对象
　　*status //浏览器响应状态：200正常， 404 请求地址不存在 ,,
　　statusText //状态内容
　　*onreadystatechange //回调函数属性

　方法：
　　abort() //取消当前响应，关闭连接并且结束任何未决的网络活动。
　　getAllResponseHeaders() //把 HTTP 响应头部作为未解析的字符串返回。
　　getResponseHeader() //返回指定的 HTTP 响应头部的值
　　*open() //初始化 HTTP 请求参数
　　*send() //发送 HTTP 请求，使用传递给 open() 方法的参数
　　*setRequestHeader() //向一个打开但未发送的请求设置或添加一个 HTTP 请求。

　模拟POST提交代码：
　　xmlhttp.open("POST","ajax_test.php",true);
　　xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
　　xmlhttp.send("fname=Bill&lname=Gates");

实例：GET请求传值

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8"/>
 5         <title>Ajax实例</title>
 6     </head>
 7     <body>
 8         <h3>Ajax实例--GET请求传值</h3>
 9         <form action="2.php" name="myform" method="get" onsubmit="return doSubmit()">
10             数值1：<input type="text" name="m1"/><br/><br/>
11             数值2：<input type="text" name="m2"/><br/><br/>
12             结 果：<input type="text" name="res" readonly style="border:0px"/><br/><br/>
13             <input type="submit" value="求和"/>
14         </form>
15         <script type="text/javascript">
16             //执行Ajax加载
17             function doSubmit(){
18                 var m1 = document.myform.m1.value;
19                 var m2 = document.myform.m2.value;
20                 //1. 创建ajax请求对象（XMLHttpRequest对象）
21                 var xmlhttp;
22                 if(window.XMLHttpRequest){
23                     // code for IE7+, Firefox, Chrome, Opera, Safari
24                     xmlhttp=new XMLHttpRequest();
25                 }else{
26                     // code for IE6, IE5
27                     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
28                 }
29 
30                 //2. 设置请求回调函数
31                 xmlhttp.onreadystatechange=function(){
32                     //判断请求状态为4时，响应状态为200时
33                     if(xmlhttp.readyState==4){
34                         if(xmlhttp.status==200){
35                             //获取响应内容
36                             var str = xmlhttp.responseText;
37                             document.myform.res.value = str;
38                         }else{
39                             alert("ajax加载失败！");
40                         }
41                     }
42                     
43                 }
44                 
45                 //3. 初始化请求对象
46                 xmlhttp.open("GET","2.php?m1="+m1+"&m2="+m2,true);
47                 //其中第一个参数为发送方式;GET或POST两种，第二参数是发送地址：
48                 //第三参数表示是否异步：true异步，false表示同步
49                 
50                 //4. 执行发送
51                 xmlhttp.send();
52                 
53                 return false;
54             }
55         </script>
56     </body>
57 </html>
View Code

实例：POST请求传值

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8"/>
 5         <title>Ajax实例</title>
 6     </head>
 7     <body>
 8         <h3>Ajax实例--POST请求传值</h3>
 9         <form action="2.php" name="myform" method="get" onsubmit="return doSubmit()">
10             数值1：<input type="text" name="m1"/><br/><br/>
11             数值2：<input type="text" name="m2"/><br/><br/>
12             结 果：<input type="text" name="res" readonly style="border:0px"/><br/><br/>
13             <input type="submit" value="求和"/>
14         </form>
15         <script type="text/javascript">
16             //执行Ajax加载
17             function doSubmit(){
18                 var m1 = document.myform.m1.value;
19                 var m2 = document.myform.m2.value;
20                 //1. 创建ajax请求对象（XMLHttpRequest对象）
21                 var xmlhttp;
22                 if(window.XMLHttpRequest){
23                     // code for IE7+, Firefox, Chrome, Opera, Safari
24                     xmlhttp=new XMLHttpRequest();
25                 }else{
26                     // code for IE6, IE5
27                     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
28                 }
29 
30                 //2. 设置请求回调函数
31                 xmlhttp.onreadystatechange=function(){
32                     //判断请求状态为4时，响应状态为200时
33                     if(xmlhttp.readyState==4){
34                         if(xmlhttp.status==200){
35                             //获取响应内容
36                             var str = xmlhttp.responseText;
37                             document.myform.res.value = str;
38                         }else{
39                             alert("ajax加载失败！");
40                         }
41                     }
42                     
43                 }
44                 
45                 //3. 初始化请求对象
46                 xmlhttp.open("POST","2.php",true);
47                 //其中第一个参数为发送方式;GET或POST两种，第二参数是发送地址：
48                 //第三参数表示是否异步：true异步，false表示同步
49                 
50                 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
51 
52                 //4. 执行发送
53                 xmlhttp.send("m1="+m1+"&m2="+m2);
54                 
55                 return false;
56             }
57         </script>
58     </body>
59 </html>
View Code

实例：Ajax加载JSON格式数据

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8"/>
 5         <title>Ajax实例</title>
 6     </head>
 7     <body>
 8         <h3>Ajax实例--函数封装,加载JSON格式数据</h3>
 9         <div id="did" style="200px;height:150px;border:1px solid blue;"></div>
10         <button onclick="doLoad()">加载</button>
11         <script type="text/javascript">
12             
13             function doLoad(){
14                 myAjax("6.php","GET",null,function(data){
15                     //处理响应的json格式数据
16                     eval("var list="+data+";");
17                     //输出
18                     var str = "<ul>";
19                     for(var i=0;i<list.length;i++){
20                         str += "<li>";
21                         str += list[i].name+":"+list[i].age+":"+list[i].sex;
22                         str += "</li>";
23                     }
24                     str += "</ul>";
25                     document.getElementById("did").innerHTML = str;
26                 });
27             }
28             
29             
30             //自定义Ajax处理函数
31             function myAjax(url,method,param,fun){
32                 //1. 创建ajax请求对象（XMLHttpRequest对象）
33                 var xmlhttp;
34                 if(window.XMLHttpRequest){
35                     // code for IE7+, Firefox, Chrome, Opera, Safari
36                     xmlhttp=new XMLHttpRequest();
37                 }else{
38                     // code for IE6, IE5
39                     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
40                 }
41 
42                 //2. 设置请求回调函数
43                 xmlhttp.onreadystatechange=function(){
44                     //判断请求状态为4时，响应状态为200时
45                     if(xmlhttp.readyState==4){
46                         if(xmlhttp.status==200){
47                             //获取响应内容
48                             str = xmlhttp.responseText;
49                             fun(str);
50                         }else{
51                             alert("ajax加载失败！");
52                         }
53                     }
54                     
55                 }
56                 
57                 //3. 初始化请求对象
58                 xmlhttp.open(method,url,false);
59                
60                 //4. 执行发送
61                 if(method=="POST"){
62                     xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
63                     xmlhttp.send(param);
64                 }else{
65                     xmlhttp.send();
66                 }
67             }
68         </script>
69     </body>
70 </html>
View Code
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yexiang520/p/5720038.html