AJAX的原理

AJAX

什么是AJAX

1. AJAX= Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）；
2. AJAX 不是新的编程语言，而是一种使用现有标准的新方法；
3. 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

AJAX传输数据

$res = $conn->query($sql);
while($row = mysqli_fetch_assoc($res)) {
    $arr[] = $row;
}
echo json_encode($arr);//返回的是json类型的字符串
    // 返回到前端json,将数据转化为json对象发送到前台页面

AJAX如何使用

创建XMLHttpReauest对象

XMLHttoRequest是AJAX的基础。

var xhr;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xhr=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xhr=new ActiveXObject("Microsoft.XMLHTTP");
  }
// 选择一般只使用 xhr=new XMLHttpRequest();

xhr(XMLHttpRequest )的open方法

作用:创建一个新的http请求，并指定此请求的方法，URL以及验证信息（比如：用户名、密码）；

语法：xhr.open("get/post","test.txt",true); // 调用了open方法仅仅是设置好参数而已

1. 第一个参数是请求方式，一般使用get与post方法，与form标签的method类似；
   
   如果要使用post，需要添加请求头文件：

   xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");
   

2. 第二个参数是请求的URL；

   demo1:    xhr.open("get","getData.php",true)
   demo2:    xhr.open("get","getData.php?key=a",true)
   demo3:    xhr.open("get","getData.php?user=mike&pw=123",true)
   demo3:    xhr.open("post","getData.php",true)
   

3. 第三个参数是请求是同步还是异步进行，true表示异步。

xhr(XMLHttpRequest )的send方法

作用：调用了send方法后才会发出请求；

语法：xhr.send(data);

demo: xhr.send(“user=”+username+”&pw=”+pw); //以post方式传递时

//get方式发送请求时: xhr.send(null);

XMLHttpRequest 对象的三个重要的属性

属性	描述
onreadystatechange（事件属性）	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState属性	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化. (还没有调用 open 方法) 1: 服务器连接已建立 (open 方法已被调用，) 2: 请求已接收 (send 已被调用。请求已经开始) 3: 交互中 ( 服务器正在发送响应) 4: 请求已完成，且响应已就绪 （响应发送完毕）
status属性	200: "OK" 404: 未找到页面

xhrr(XMLHttpRequest )的responseText 属性

（1）获取服务器响应数据；

（2）responseText 属性返回字符串形式的响应。

创建回调函数

(1)当请求被发送到服务器时，我们需要执行一些基于响应的任务；

(2)readyState 属性存有 XMLHttpRequest 的状态信息, 每当 readyState 改变时，就会触发 onreadystatechange 事件。当 readyState 等于 4 且状态为 200 时，表示响应已就绪；

(3) 在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

xhr.onreadystatechange=function(){
  if (xhr.readyState==4 && xhr.status==200)
    {
       //接收服务器端响应数据，并用js进行处理，显示在客户端页面
       例：document.getElementById("myDiv").innerHTML=xhr.responseText;
    }
  }

xhr.abort()方法：停止当前请求

实际运用

js中

		btn.onclick = function() {
            var xhr = new XMLHttpRequest();
            xhr.open("get", "ajax.php", true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // console.log(xhr.responseText);
                    box.innerHTML = xhr.responseText;
                }
            }
        }

php中

<?php
    echo "成功了";
?>
    // 总结将打印内容返回到js中xhr的responseText属性中

总结

AJAX实质上也是遵循Request/Server模式，所以这个框架基本的流程是：

一、对象初始化

二、发送请求

三、服务器接收

四、服务器返回

五、客户端接收

六、修改客户端页面内容。

只不过这个过程是异步的。