AJAX 异步交互基本总结

AJAX (Asynchronous JavaScript and Xml)

直译中文 - javascript和XML的异步

同步与异步的区别:
　　同步交互
　　　　执行速度相对比较慢
　　　　响应的是完整的HTML页面
　　异步交互
　　　　执行速度相对比较快
　　　　响应的是部分数据

Ajax 的核心对象：
　　XMLHttpRequest 对象
创建 XMLHttpReuqest 对象

     function getXhr(){
         // 声明XMLHttpRequest对象
         var xhr = null;
         // 根据浏览器的不同情况进行创建
         if(window.XMLHttpRequest){
             // 表示除IE外的其他浏览器
             xhr = new XMLHttpRequest();
         }else{
             // 表示IE浏览器
             xhr = new ActiveXObject('Microsoft.XMLHttp');
         }
         return xhr;
     }
     // 创建核心对象
     var xhr = getXhr();

Ajax 核心对象
　　属性：　　　　

　　　　* readyState
　　　　　　* 0 - (服务器端)尚未初始化
　　　　　　* 1 - (服务器端)正在接收
　　　　　　* 2 - (服务器端)接收完毕
　　　　　　* 3 - (服务器端)正在响应
　　　　　　* 4 - (服务器端)响应完毕
　　　　* status
　　　　　　* 200 - 请求成功
　　　　　　* 404 - 网页找不到(请求路径不正确)
　　　　　　* 500 - 服务器端错误

　　方法：
　　　　* open(method,url)方法
　　　　　　* 作用 - 与服务器端建立连接
　　　　　　* 参数
　　　　　　　　* method - 设置请求类型(GET或POST)
　　　　　　　　* url - 设置请求地址
　　　　* send()方法
　　　　　　* 作用 - 向服务器端发送请求参数

　　事件：
　　　　* onreadystatechange事件
　　　　　　* 作用 - 监听服务器端的通信状态改变

实现Ajax的异步交互步骤
　　1. 创建XMLHttpRequest核心对象
　　　　固定写法 - 独立编写
　　2. 与服务器端建立连接
　　　　使用XMLHttpRequest对象的open(method,url)方法
　　　　　　* method - 设置当前请求的类型
　　　　　　* url - 设置当前请求的地址
　　3. 向服务器端发送请求
　　　　使用XMLHttpRequest对象的send(请求参数)方法
　　　　　　* 请求参数的格式 - key=value
　　4. 接收服务器端的响应数据
　　　　* 使用XMLHttpRequest对象的onreadystatechange事件,监听服务器端的通信状态
　　　　* 使用XMLHttpRequest对象的readyState属性,判断服务器端的当前状态(0-4)
　　　　* 使用XMLHttpRequest对象的status属性,判断服务器端的状态码(200)
　　　　* 使用XMLHttpRequest对象的responseText属性,接收服务器端的响应数据

　　示例：

     // 实现Ajax的异步交互的步骤

     var btn = document.getElementById("btn");
     btn.onclick = function(){
         /*
          * 1. 实现Ajax主要依靠XMLHttpRequest对象
          *   * 创建XMLHttpRequest对象
          */
         var xhr = getXhr();
         /*
          * 2. 与服务器端建立连接
          *   * open(method,url,async)方法
          *     * method - 设置当前的请求类型(GET或POST)
          *     * url - 设置当前的请求地址
          *     * async - 设置是否异步(Boolean类型)
          *       * 默认值为true,表示异步
          *       * 官方认为使用XMLHttpRequest对象就是为了实现异步交互的
          */
         xhr.open("get","01.php?user=zhangwuji");
         /*
          * 3. 客户端向服务器端发送请求
          *   * send(请求参数)方法
          *     * 请求参数的格式 - key=value
          *   * 如果请求类型为GET方式的话
          *     * send()方法是不能向服务器端发送请求数据的
          *   * 注意
          *     * send()方法是不能被省略的
          *       * GET请求类型 - send(NULL);
          */
         xhr.send(null);
         /*
          * 4. 客户端接收服务器端的响应
          *   * 使用onreadystatechange事件
          *     * 监听服务器的通信状态
          *   * readyState属性
          *     * 得到服务器端当前通信状态
          *     * 备选项
          *       * 0 尚未初始化
          *       * 1 正在接收
          *       * 2 接收完成
          *       * 3 正在响应
          *       * 4 响应完成
          *   * status - 状态码
          *     * 200 OK
          *   * responseText属性
          *     * 接收服务器端的数据(HTML格式)
          */
         xhr.onreadystatechange = function(){
             // 保证服务器端响应的数据发送完毕
             if(xhr.readyState == 4){
                 // 保证这次请求必须是成功的
                 if(xhr.status == 200){
                     // 接收服务器端的数据
                     var data = xhr.responseText;
                     // 测试
                     console.log(data);
                 }
             }
         }
     }

     // 定义创建XMLHttpRequest对象的函数
     function getXhr(){
         // 声明XMLHttpRequest对象
         var xhr = null;
         // 根据不同浏览器创建
         if(window.XMLHttpRequest){
             // 其他浏览器
             xhr = new XMLHttpRequest();
         }else{
             // IE浏览器(8及之前)
             xhr = new ActiveXObject("Microsoft.XMLHttp");
         }
         // 返回XMLHttpRequest对象
         return xhr;
     }

<?php
    // 用于处理客户端的Ajax异步请求
    // 1. 接收客户端发送的请求数据
    $user = $_GET['user'];
    // 2. 向客户端进行响应
    echo $user.' get request succesful.';
?>

GET 与 POST 的区别：
　　GET请求类型
　　　　* send()方法不起作用,但是不能被省略
　　　　　　xhr.send(null);
　　　　* 请求参数 - 添加到URL?key=value
　　POST请求类型
　　　　* send()方法起作用
　　　　* 在send()方法被调用前,使用setRequestHeader()方法设置请求头信息
　　　　　　xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

实现Ajax的六步是什么?(不标准)
　　1. 创建XMLHttpRequest对象
　　2. 建立连接
　　3. 发送请求
　　4. 注册监听 - onreadystatechange事件
　　5. 获取服务器端的通信状态 - readyState
　　6. 获取服务器端的状态码

XML 解析

XML 语法
　　声明：
　　　　<?xml version="1.0" encoding="UTF-8" ?>
　　定义元素：
　　　　* 根元素
　　　　　　* 必须是起始标签
　　　　　　* 只能定义一个
　　　　* 定义元素
　　　　　　* 元素名可以自定义
　　　　　　* 分类
　　　　　　　　* 起始标签或单标签
　　定义属性

DOM 解析 XML
　　创建 XML 解析器：

         function parseXML(xml){
             // 声明解析XML后的DOM对象
             var xmlDoc = null;
             // 根据不同的浏览器
             if(window.DOMParser){
                 // 其他浏览器
                 var parser = new DOMParser();
                 xmlDoc = parser.parseFromString(xml,"application/xml");
             }else{
                 // IE浏览器
                 xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
                 xmlDoc.async = false;
                 xmlDoc.loadXML(xml);
             }
             return xmlDoc;
         }

　　　　解析 XML 与解析 HTML 一致

　　　　　　* 很少使用ById和ByName两个方法
　　　　* 注意
　　　　　　* 浏览器不允许读取外部的XML文件
　　　　　　* 浏览器解析符合XML格式的字符串

Ajax中的XML格式
　　* 请求的数据格式 - XML
　　　　* 客户端如何构建符合XML格式的数据
　　　　　　* 构建的数据类型 - 字符串(string)类型
　　　　　　* 字符串的内容符合XML格式的语法要求
　　　　* 服务器端如何接收符合XML格式的数据
　　　　　　* 接收客户端的请求数据 - 字符串(string)类型
　　　　　　* PHP集成了DOM的相关内容
　　　　　　　　* DOMDocument类
　　　　　　　　* DOMElement类
　　　　　　　　* DOMNode类

　　* 响应的数据格式 - XML

　　　　* 服务器端如何构建符合XML格式的数据
　　　　　　* 设置服务器端的响应头"Content-Type"值为"text/xml"
　　　　　　* 构建符合XML格式数据内容
　　　　　　　　* 手动方式构建字符串(string)内容
　　　　　　　　* DOMDocument对象的方法
　　　　　　　　　　* loadXML(符合XML格式的字符串);
　　　　　　　　　　* saveXML()方法进行响应

　　　　* 客户端如何接收符合XML格式的数据

　　　　　　* 使用XMLHttpRequest对象的responseXML属性接收
　　　　　　* 接收回来的就是XML DOM对象(不需要使用XML解析器进行解析)
　　　　　　* 直接使用DOM解析XML DOM对象即可

　　示例：

     /*
      * 创建DOM解析XML的解析器 - 目前
      * * IE浏览器
      *   new ActiveXObject("Microsoft.XMLDOM");
      * * 其他浏览器
      *   创建一个DOM的解析器
      *   var parser = new DOMParser();
      *   使用DOM解析器解析XML文件
      *   var xmlDoc = parser.parseFromString(xmlFile,"application/xml");
      *
      * 当前报错:
      * * 目前主流浏览器
      *   * 不允许读取本地文件
      *   * 不允许读取外部文件
      */
     function parseXML(xmlFile){
         // 创建解析XML后的DOM对象
         var xmlDoc = null;
         // 根据不同浏览器进行解析
         if(window.DOMParser){
             // 其他浏览器
             var parser = new DOMParser();
             xmlDoc = parser.parseFromString(xmlFile,"application/xml");
         }else{
             // IE浏览器
             var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
             xmlDoc.async = false;
             xmlDoc.loadXML(xmlFile);
         }
         return xmlDoc;
     }
     /*
      * 测试
      * 使用DOM的XML解析器 - 解析符合XML格式的字符串
      * <user>
      *   <name>zhangwuji</name>
      * </user>
      */
     var xmlDoc = parseXML("<user id='u' name='u'><name>zhangwuji</name></user>");
     //console.log(xmlDoc);
     /*
      * DOM解析XML与解析HTML没有任何区别
      * * 注意
      *   * DOM解析XML使用ById或ByName两个方式
      *   * 实际开发中只用getElementsByTagName()方法
      *   * 原因 - 属性值在XML格式中都是有效数据
      */
     var userEle = xmlDoc.getElementsByName("u")[0];
     console.log(userEle);

　　示例：

     var btn = document.getElementById("btn");
     btn.onclick = function(){
         // 实现Ajax的异步交互
         var xhr = getXhr();
         xhr.open("post","07.php");
         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
         /*
          * 如何构建符合XML格式的请求数据
          * * 注意
          *   * 请求数据的格式 - key=value 不能改变的
          * * 将value值构建成符合XML格式的数据
          *   * 数据类型 - 字符串(string)
          *   * 格式符合XML的语法要求
          * * 编写注意
          *   * 定义变量 - 专门构建XML格式的数据
          *   * 在send()方法进行拼串
          */
         var user = "<user><name>zhangwuji</name><pwd>123456</pwd></user>";
         xhr.send("user="+user);
         xhr.onreadystatechange = function(){
             if(xhr.readyState==4&&xhr.status==200){
                 // 接收服务器端的响应数据
                 var xmlDoc = xhr.responseXML;
                 var nameEle = xmlDoc.getElementsByTagName("name")[0];
                 var txtEle = nameEle.childNodes[0];
                 console.log(txtEle.nodeValue);
             }
         }
     }
     function getXhr(){
         var xhr = null;
         if(window.XMLHttpRequest){
             xhr = new XMLHttpRequest();
         }else{
             xhr = new ActiveXObject("Microsoft.XMLHttp");
         }
         return xhr;
     }

 <?php
     // 接收客户端发送的请求数据
     $user = $_POST['user'];//符合XML格式要求的string类型
     //var_dump($user);
     // 创建DOMDocument对象
     $doc = new DOMDocument();
     // 调用loadXML()方法
     $result = $doc->loadXML($user);
     //var_dump($doc);

     // 如何构建符合XML格式的数据
     /* 修改响应头的Content-Type值为"text/xml"
     header('Content-Type:text/xml');
     echo $user;// 符合XML格式的string类型
     */

     header('Content-Type:application/xml');
     echo $doc->saveXML();
 ?>

JSON (JavaScript Object Notation) 格式
　　JSON 数据格式源于 Javascript (JS原生支持)
　　JSON 的结构

　　　　* Array - 数组
　　　　* Object - 对象
　　　　* 支持的数据类型
　　　　　　* String字符串
　　　　　　* Number数值
　　　　　　* Boolean - true|false
　　　　　　* Object
　　　　　　* Array
　　　　　　* null　　

　　Ajax中的JSON格式
　　　　* 请求格式为JSON

　　　　　　* 客户端向服务器端发送请求为JSON格式的数据
　　　　　　　　* 构建符合JSON格式的字符串
　　　　　　　　* 保证定义字符串时,使用单引号(里面使用双引号)
　　　　　　* 服务器端接收JSON格式的数据
　　　　　　　　* 接收客户端的数据
　　　　　　　　* 使用json_decode()函数进行解析
　　　　　　　　　　json_decode($json,true)　　　

　　　* 响应格式为JSON
　　　　　　* 服务器端向客户端发送响应为JSON格式的数据
　　　　　　　　* 使用json_encode()函数将PHP变量(array)转换成符合JSON格式的字符串
　　　　　　* 客户端接收JSON格式的数据
　　　　　　　　* 使用XMLHttpRequest对象的responseText属性接收
　　　　　　　　　　* 没有responseJSON属性
　　　　　　　　　　* 使用eval()函数进行转换

　　示例：

     var btn = document.getElementById("btn");
     btn.onclick = function(){
         var xhr = getXhr();
         xhr.open("post","10.php");
         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
         /*
          * 在客户端如何构建JSON格式
          * * 构建符合JSON格式的字符串
          */
         var user = '{"name":"zhangwuji","pwd":"123456"}';
         xhr.send("user="+user);
         xhr.onreadystatechange = function(){
             if(xhr.readyState==4&&xhr.status==200){
                 var data = xhr.responseText;
                 /*
                  * 使用eval()函数进行转换
                  * * 使用"()"将其包裹,eval()函数强制将其转换为JSON格式(javascript代码)
                  * * 不使用"()"将其包裹,eval()函数将其识别为一个空的代码块
                  */
                 var json = eval("("+data+")");
                 console.log(json);
             }
         }
     }
     function getXhr(){
         var xhr = null;
         if(window.XMLHttpRequest){
             xhr = new XMLHttpRequest();
         }else{
             xhr = new ActiveXObject("Microsoft.XMLHttp");
         }
         return xhr;
     }

 <?php
     // 接收客户端发送的请求数据
     $user = $_POST['user'];
     // 就是一个JSON格式的string字符串
     //var_dump($user);

     $json_user = json_decode($user,true);

     //var_dump($json_user['name']);

     $json = '{"a":1,"b":2,"c":3,"d":4,"e":5}';
     //var_dump(json_decode($json));

     // 响应数据符合JSON格式的字符串
     // 1. 手工方式构建
     //echo '{"name":"zhouzhiruo","pwd":"123456"}';

     // 2. 使用json_encode()函数
     echo json_encode($json_user);
 ?>

HTML(文本格式)、XML格式及JSON格式的优缺点
　　* HTML格式
　　　　* 优点 - 简单
　　　　* 缺点 - 解析复杂
　　* XML格式
　　　　* 优点 - 易于构建复杂数据
　　　　* 缺点 - 构建、解析复杂
　　* JSON格式
　　　　* 优点 - 轻量级
　　　　* 缺点 - 可能转换失败