入门到实操：AJAX：前后台数据交互搬运工

小咪咪 2023-05-28 14:22 30阅读 0赞

\*\*

## 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 : 表单的提交数据的方式

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”

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方法