入门到实操：AJAX：前后台数据交互搬运工-蒲公英云

AJAX Asynchronous JavaScript and XML‘’数据传输格式‘’ （异步JavaScript和XML数据传输格式）

AJAX的优势
：节省用户操作，时间，提高用户体验，减少数据请求传输获取数据

这里提到的同步和异步，是和现实生活中截然不同的：

**同步：**阻塞，当前程序运行，必须等前一个程序运行完毕以后，才能运行

**异步：**非阻塞，当前程序运行，和前面程序的运行没有任何关系。（所以我们常用异步处理）

数据传输的两种格式

1.XML （大型门户网站，网易，新浪等）

优点：
1.种类丰富
2.传输量非常大
缺点：
1.解析麻烦
2.不太适合轻量级数据（数据比较多）

2.JSON (95%移动端应用使用的json，常用于移动端)

优点：
1.轻量级数据
2.解析轻松
解析：1.JSON.pare()
2.JSON.stringify()
缺点：（相对概念）
1.数据种类比较少
2.传输数据量比较小
JSON的使用方法如下：
比如我们要去买一个家具，我们选好家具后需要在运输过程中将其拆卸运输，运送到家后再进行组装

所以JSON中提供JSON.stringify（） JSON.parse() 将原函数中的数据转化为字符串进行传输传输到了后再转换为数据的结构

宜家（买）        运输        我家
        装好的           拆掉         装好
    前端                                运输                后端
数据结构（数组，对象）     字符串            数据结构
                    XML/JSON                XML/JSON 
              JSON.stringify（）      JSON.parse()

JSON.stringify（）数据结构转换为字符串
JSON.parse() 字符串 =》数据结构

注意在服务器PHP端中也有两个转换方法

json_encode() 将数据结构转换成字符串

json_decode() 将字符串转换成对应的数据结构

ajax下载数据语法步骤（get方法）

1.创建ajax对象

var xhr =new XMLHttpRequest();

XMLHttpRequest IE8一下不兼容
IE8以下声明ajax的方法是

ActiveXObject("Microsoft.XMLHTTP");

所以我们需要写成兼容模式

var xhr =null;   //兼容模式
                try{ 
                    xhr = new XMLHttpRequest();
                }catch(error){ 
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }

2.调用open（默认get方法）

xhr.open("get","1.txt",true);

第一个参数：请求方式 get post
第二个参数： url
第三个参数：是否异步
true：异步
false 同步

3.调用send 发送

xhr.send();

4.等待数据响应

xhr.onreadystatechange = function(){ 
                    if(xhr.readyState == 4){ 
                        alert(xhr.responseText);
                    }
                }

这里需要注意一个函数：
responseText ：返回以文本形式存放
responseXML : 返回XML形式的内容
xhr.readyState 发生错误的时候调用（请求状态）
0 (初始化)调用open方法之前
1 （载入）已调动send（）方法，正在发送请求
2 （载入完成）send方法完成，已收到全部响应
3 （解析）正在解析响应内容
4 （完成）响应内容解析完成，可以在客户端调用了

HTTP 状态码 ajax.status
AJAX 状态码说明：ajax.status == 200 表明HTTP状态正常
404代表错误等等，这里大家可以自己查一下。

对AJAX有了基本的认识，那么如何利用AJAX实现数据的收集，下载呢

form向服务器上传数据

1.GET方法
get方法：是直接将数据拼接在url后面进行提交。通过？进行拼接，查询字符串

HTML标签如下：
action ： 点击sumbit以后跳转到的url

metgod : 表单的提交数据的方式

<form action="1.get.php" method="get">
     <input type="text" name='username' placeholder="用户名">
     <input type="text" name="age" placeholder="年龄">
     <input type="password" name="password" placeholder="请输入你的密码">
    <input type="submit">
</form>

PHP服务器设置如下：

<?php
    header('content-type:text/html;charset="utf-8"');
    error_reporting(0);
    //系统或者应用程序出错时弹出的，错误报告，编程人员根据这个报告的内容可以判断是那一段代码出错
    /* $_GET (全局的关联数组) 存放通过get提交 提交的所有数据 */
    $username= $_GET['username'];
    $age = $_GET['age'];
    $password = $_GET['password'];
    echo "你的名字：{ $username},你的年龄是{ $age},密码：{ $password}";
    ?>

执行结束后网页为：
http://localhost/php/1.get.php?username=raoyangjun&age=22&password=123456
get方法
优点：
简单，直接在url中修改就可以重新提交
缺点：
1.不安全
2.地址栏中的数据最大2kb
3.没法实现上传

POST方法：
post的提交方法：post提交通过浏览器内部进行提交
action ：点击sumbit以后跳转到的url
metgod : 表单的提交数据的方式

HTML:注意：使用post方法form标签属性应添加enctype=“application/x-www-form-urlencoded”

<form action="1.post.php" method="POST" enctype="application/x-www-form-urlencoded">
         <input type="text" name='username' placeholder="用户名">
         <input type="text" name="age" placeholder="年龄">
         <input type="password" name="password" placeholder="请输入你的密码">
        <input type="submit">
  </form>

PHP：

<?php
    header('content-type:text/html;charset="utf-8"');
    error_reporting(0);
    //系统互殴应用程序出错时弹出的，错误报告，编程人员根据这个报告的内容可以判断是那一段代码出错
    /* $_POST (全局的关联数组) 存放通过POST提交 提交的所有数据 */
    $username= $_POST['username'];
    $age = $_POST['age'];
    $password = $_POST['password'];
    echo "你的名字：{ $username},你的年龄是{ $age},密码：{ $password}";
    ?>

执行结束后的url：http://localhost/php/1.post.php
好处：
1.安全
2.理论上没有上限
3.上传
缺点：比get复杂（底层）;

2.从服务器下载数据

AJAX_GET 方法：

服务器数据：

$username= $_GET['username'];
$age = $_GET['age'];
$password = $_GET['password'];
echo "你的名字：{ $username},你的年龄是{ $age},密码：{ $password}";

HTML页面请求下载

oBtn.onclick = function(){ 
                var xhr =null;
                try{ 
                    xhr = new XMLHttpRequest();
                }catch(error){ 
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xhr.open("get","1.get.php?username=yyy&age=19&password=123abc",true);
                xhr.send();
                xhr.onreadystatechange = function(){ 
                    if(xhr.readyState == 4){ 
                        //判断本次下载的状态码是多少
                        if(xhr.status==200){ 
                            alert("下载成功");
                            alert(xhr.responseText);
                        }else{ 
                            alert("Error"+xhr.status);
                        }
                    }
          }

AJAX_POST 方法

服务器数据：

$username= $_POST['username'];
$age = $_POST['age'];
$password = $_POST['password'];
echo "你的名字：{ $username},你的年龄是{ $age},密码：{ $password}";

HTML页面请求下载

oBtn.onclick = function(){ 
                var xhr =null;
                try{ 
                    xhr = new XMLHttpRequest();
                }catch(error){ 
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xhr.open("post","1.post.php",true);
                //设置send请求格式
                xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
                /* post提交的数据，需要通过send方法进行提交 ？name1=value&name2=value2 search name1=value&name2=value2 querystring */
                xhr.send("username=yyy&age=19&password=123abc");
                xhr.onreadystatechange = function(){ 
                    if(xhr.readyState == 4){ 
                        //判断本次下载的状态码是多少
                        if(xhr.status==200){ 
                            alert("下载成功");
                            alert(xhr.responseText);
                        }else{ 
                            alert("Error"+xhr.status);
                        }
                    }
                }

注意GET 与 POST 方法下载数据的不同语法之处

GET方法中：

open的方法

xhr.open("get","1.get.php?username=yyy&age=19&password=123abc",true);

send的方法

xhr.send();

POST 方法中

open的方法

xhr.open("post","1.post.php",true);

send方法，需要先设置send请求格式，写在send方法前

xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

send方法

xhr.send("username=yyy&age=19&password=123abc");

ajax框架函数

学习到这里我们对AJAX的整体都有一定的了解了，其实在实际开发中我们常常将AJAX的方法进行函数封装，使用时只需调用该函数即可：

框架如下：（大家还是要自己分析哦）

框架中的函数：
method get/post
url 1.get.php / 1.post.php
data 数据
success 数据下载成功以后执行的函数
error 数据下载失败后执行的函数

function $ajax({ method = "get", url ,data,success,error}){ 
            var xhr =null;
            try{ 
                xhr = new XMLHttpRequest();
            }catch(error){ 
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            if(data){ 
                data = querystring(data);
            }
            if(method == 'get' && data){ 
                url +="?"+data;
            }
            xhr.open(method,url,true);
            if(method == 'get'){ 
                xhr.send();
            }else{ 
                xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
                xhr.send(data);
            }
            xhr.onreadystatechange = function(){ 
                    if(xhr.readyState == 4){ 
                        if(success){ 
                           /* 如何去处理数据操作不确定 使用回调函数: */
                            success(xhr.responseText);
                        }else{ 
                            if(error){ 
                            error('Error'+xhr.status);
                            }
                        }
                    }
                }
        }
        function querystring(obj){ 
             var str = '';
             for(var attr in obj){ 
                str +=  attr +"="+obj[attr]+"&";
             }
             return str.substring(0,str.length-1);
         }