Ajax-XMLHttpRequest对象

淡淡的烟草味﹌ 2021-09-14 07:04 452阅读 0赞

没有xmlhttprequest时，都是采用同步的做法，有了这个对象，进行了异步(比如在填写表单时，服务器会根据你填写的内容，进行马上的验证，而不是所有信息填写完后再验证)

![20171016132749237][]

一.创建XMLHttpRequest对象

1.实例化XMLHttpRequest对象

var request = new XMLHttpRequest(); (ie6一下就不支持)  
var request = new ActiveXObject("Microsoft.XMLHTTP"); //ie6,ie5

创建请求对象，兼容所有的浏览器 function createRequest(){ try{ request=new XMLHttpRequest();//ie7一下不兼容，其他兼容-XMLHttpRequest()创建请求对象 }catch(tryMS){ try{ request=new ActiveXObject("Msxm12.XMLHTTP");   //绝大多数的ie兼容-ActiveXObject是Microsoft特定的一种编辑对象 }catch(otherMS){ try{ request=new ActiveXObject("Microsoft.XMLHTTP");// 兼容IE6, IE5 }catch(failed){ request=null;//创建请求失败 } } } return request;//返回一个结果 }

二.XMLHttpRequest发送请求

要想把请求发送到服务器，我们就需要使用 open() 方法和 send() 方法

1.发送请求的方法：  
(1).open(method,url,async)  
规定请求的类型(get/post)、URL(文件在服务器上的位置) 以及是否异步处理请求（async值为true是异步，async值为false是同步）。  
(2).send(string)是发送请求

有参数时，仅限post请求。

列子如下：

![20171016132735193][]

2.GET 还是 POST？  
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。  
然而，在以下情况中，请使用 POST 请求：  
无法使用缓存文件（更新服务器上的文件或数据库）  
向服务器发送大量数据（POST 没有数据量限制）  
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

三.XMLHttpRequest取得响应

(1).XMLHttpRequest取得响应的值：
    1.responseText:获得字符串形式的响应数据
    2.responseXML：获得XML形式的响应数据
    3.status和statusText：以数字和文本形式返回HTTP状态码
    4.getAllResponseHeader()：获取所有的响应报头

5.getResponseHeader()：查询响应中的某个字段的值 
     
     四.ajax与页面整体的三步骤：
    1、运用HTML和CSS实现页面，表达信息；
    2、运用XMLHttpRequest和web服务器进行数据的异步交换； ①创建XMLHttpRequest对象 ②定义发送请求的类型 ③获取数据，以及请求头 ④发送请求 ⑤监听服务器是否响应 ⑥响应成功后的操作 var request = new XMLHttpRequest();//1.创建XMLHttpRequest对象 request.open("POST", "server.php");2.发送请求：请求的类型 var data = "name=" + document.getElementById("staffName").value + "&number=" + document.getElementById("staffNumber").value + "&sex=" + document.getElementById("staffSex").value + "&job=" + document.getElementById("staffJob").value; request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//请求头 request.send(data);//发送请求 request.onreadystatechange = function() { if (request.readyState===4) {//监听服务器是否响应 if (request.status===200) { document.getElementById("createResult").innerHTML = request.responseText;//响应成功后的操作 } else { alert("发生错误：" + request.status); } } }
     3、运用JavaScript操作DOM，实现动态局部刷新； 
     4.列子 server.php <?php //设置页面内容是html编码格式是utf-8 header("Content-Type: text/plain;charset=utf-8"); //header("Content-Type: application/json;charset=utf-8"); //header("Content-Type: text/xml;charset=utf-8"); //header("Content-Type: text/html;charset=utf-8"); //header("Content-Type: application/javascript;charset=utf-8"); //定义一个多维数组，包含员工的信息，每条员工信息为一个数组 $staff = array ( array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"), array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"), array("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理") ); //判断如果是get请求，则进行搜索；如果是POST请求，则进行新建 //$_SERVER是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用global关键字 //$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法 if ($_SERVER["REQUEST_METHOD"] == "GET") { search(); } elseif ($_SERVER["REQUEST_METHOD"] == "POST"){ create(); } //通过员工编号搜索员工 function search(){ //检查是否有员工编号的参数 //isset检测变量是否设置；empty判断值为否为空 //超全局变量 $_GET 和 $_POST 用于收集表单数据 if (!isset($_GET["number"]) || empty($_GET["number"])) { echo "参数错误"; return; } //函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。 //global 关键词用于访问函数内的全局变量 global $staff; //获取number参数 $number = $_GET["number"]; $result = "没有找到员工。"; //遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果 foreach ($staff as $value) { if ($value["number"] == $number) { $result = "找到员工：员工编号：" . $value["number"] . "，员工姓名：" . $value["name"] . "，员工性别：" . $value["sex"] . "，员工职位：" . $value["job"]; break; } } echo $result; } //创建员工 function create(){ //判断信息是否填写完全 if (!isset($_POST["name"]) || empty($_POST["name"]) || !isset($_POST["number"]) || empty($_POST["number"]) || !isset($_POST["sex"]) || empty($_POST["sex"]) || !isset($_POST["job"]) || empty($_POST["job"])) { echo "参数错误，员工信息填写不全"; return; } //TODO: 获取POST表单数据并保存到数据库 //提示保存成功 echo "员工：" . $_POST["name"] . " 信息保存成功！"; } index.html <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Demo</title> <style> body, input, select, button, h1 { font-size: 28px; line-height:1.7; } </style> </head> <body> <h1>员工查询</h1> <label>请输入员工编号：</label> <input type="text" id="keyword" /> <button id="search">查询</button> <p id="searchResult"></p> <h1>员工新建</h1> <label>请输入员工姓名：</label> <input type="text" id="staffName" /><br> <label>请输入员工编号：</label> <input type="text" id="staffNumber" /><br> <label>请选择员工性别：</label> <select id="staffSex"> <option>女</option> <option>男</option> </select><br> <label>请输入员工职位：</label> <input type="text" id="staffJob" /><br> <button id="save">保存</button> <p id="createResult"></p> <script> document.getElementById("search").onclick = function() { var request = new XMLHttpRequest(); request.open("GET", "server.php?number=" + document.getElementById("keyword").value); request.send(); request.onreadystatechange = function() { if (request.readyState===4) { if (request.status===200) { document.getElementById("searchResult").innerHTML = request.responseText; } else { alert("发生错误：" + request.status); } } } } document.getElementById("save").onclick = function() { var request = new XMLHttpRequest(); request.open("POST", "server.php"); var data = "name=" + document.getElementById("staffName").value + "&number=" + document.getElementById("staffNumber").value + "&sex=" + document.getElementById("staffSex").value + "&job=" + document.getElementById("staffJob").value; request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); request.send(data); request.onreadystatechange = function() { if (request.readyState===4) { if (request.status===200) { document.getElementById("createResult").innerHTML = request.responseText; } else { alert("发生错误：" + request.status); } } } } </script> </body> </html> 
    五.ajax简单封装 (1).ajax一般分为简单的四部：
    1.创建ajax对象（这里兼容ie的话要做一下处理）
    2.连接，即请求对象的open方法（get和post还有点不同，get参数要放在url后面，post要设置请求头）
    3.发送，即请求对象的send函数（post参数则放在send里面）
    4.接收，在onreadystatechange（存储函数或函数名，每当readyState属性改变时，就会调用该函数。）函数里面处理。
    还可以加上超时这些
     
     (2).onreadystatechange分析
    要先判断readyState的状态（有四个状态）
    ①： 0，请求未初始化；
    ②： 1，服务器连接已建立；
    ③： 2，请求已接收；
    ④： 3，请求处理中；
    ⑤： 4，请求已完成，且响应已就绪
    当readyState等于4时，你又要判断status的状态
    请求成功时status状态 200-300（不包括300） ，还有304（是缓存）（具体状态可以去参考文档）
    在成功（失败）的回掉函数里面将xhr.responseText的值返回出去。 
     (3).封装代码 'use strict';
    
    var $ = {};
    $.ajax = ajax;
    
    function ajax(options) {
    
      // 解析参数
      options = options || {};
      if (!options.url) return;
      options.type = options.type || 'get';
      options.timeout = options.timeout || 0;
    
      // 1 创建ajax
      if (window.XMLHttpRequest) {
    
        // 高级浏览器和ie7以上
        var xhr = new XMLHttpRequest();
      } else {
    
        //ie6,7,8
        var xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
      }
    
      // 2 连接
      var str = jsonToUrl(options.data);
      if (options.type === 'get') {
        xhr.open('get', `${options.url}?${str}`, true);
    
        // 3 发送
        xhr.send();
      } else {
        xhr.open('post', options.url, true);
    
        // 请求头
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    
        // 3 发送
        xhr.send();
      }
    
      // 接收
      xhr.onreadystatechange = function() {
    
        // 完成
        if (xhr.readyState === 4) {
    
          // 清除定时器
          clearTimeout(timer);
    
          if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
    
            // 成功
            options.success && options.success(xhr.responseText);
          } else {
            options.error && options.error( xhr.status );
          }
        }
      };
    
      
      // 超时
      if (options.timeout) {
        var timer = setTimeout(function(){ 
                alert("超时了");
                xhr.abort(); // 终止
            },options.timeout);
      }
    }
    
    
    // json转url
    function jsonToUrl(json) {
      var arr = [];
      json.t = Math.random();
      for(var name in json) {
        arr.push(name + '=' + encodeURIComponent(json[name]));
      }
      return arr.join('&');
    }

[20171016132749237]: /images/20210813/7e91b8738d134ef19440bed6fa21a9b7.png
[20171016132735193]: /images/20210813/ddd9e24896f94fb59292363180c25deb.png