Web前端-Ajax基础技术(上)

谁践踏了优雅 2021-09-18 11:06 285阅读 0赞

![Web前端-Ajax基础技术][Web_-Ajax]

> `Web`前端-`Ajax`基础技术(上)

`ajax`是浏览器提供一套的`api`,用于向服务器发出请求，接受服务端返回的响应，通过`javascript`调用，实现通过代码控制请求与响应，实现网络编程。

`ajax`发送请求：

<!DOCTYPE html>
    <html lang="en">
    <head>
     <meat charset="UTF-8">
     <title>Ajax</title>
    </head>
    <body>
     <script>
      // ajax是一套api核心提供的类型：
      var xhr = new XMLHttpRequest();
      xhr.open();
      xhr.send();
      
      xhr.onreadystatechange = function(){
       if(this.readyState != 4) return
       // 获取响应的内容
       console.log(this.responseText);
      }
     </script>
    </body>
    </html>

// ajax创建一个XMLHttpRequest类型的对象，相当于打开一个浏览器
    var xhr = new XMLHttpRequest()
    // 打开一个网址之间的连接
    xhr.open('GET','##.php')
    // 通过连接发送一次请求
    xhr.send(null)
    // 指定xhr状态变化事件处理函数
    xhr.onreadystatechange = function() {
     // 通过xhr 的readyState判断请求的响应
     if(this.readyState === 4){
       console.log(this);
     }
    }

`http`协议：

// http
    // 设置请求报文的请求行
    xhr.open('GET', './###.php')
    // 设置请求头
    xhr.setRequestHeader('Accept', 'text/plain')
    // 设置请求体
    xhr.send(null)
    
    xhr.onreadystateChange = function() {
     if(this.readyState === 4) {
      // 获取响应状态码
      console.log(this.status)
      // 获取响应状态描述
      console.log(this.statusText)
      // 获取响应头信息 
     // 获取指定响应头
     console.log(this.getResponseHeader('Content-Type'))
     // 获取全部响应头
     console.log(this.getAllResponseHeader())
     // 获取响应体
     // 获取响应文本形式
     console.log(this.responseText) 
     // 获取xml形式
     console.log(this.responseXML)
      }
    }

进行初始化，建立连接，接收响应，响应体加载，加载成功！

// get请求
    var xhr = new XMLHttpRequest()
    xhr.open('GET', '.##.php?id=1')
    // 一般get请求无需设置响应体
    xhr.send(null);
    xhr.onreadystatechange = function(){
     if(this.readyState === 4) {
      console.log(this.responseText);
     }
    }

// post
    if(empty($_GE['id])) {
     $json = json_encode($data);
     echo $json;
    }else{
     foreach($data as $item) {
      if($item['id'] != $_GET['id'] continue;
     $json = json_encode($data);
     echo $json;
     }
    }

异步的 `JavaScript` 和 `XML`

AJAX = Asynchronous JavaScript and XML

用于创建快速动态网页的技术  
`XMLHttpRequest` 对象

var xhr;
    if (window.XMLHttpRequest){
      xhr=new XMLHttpRequest();
      }
    else{
      xhr=new ActiveXObject("Microsoft.XMLHTTP");
      }

向服务器发送请求

xmlhttp.open("GET","123.txt",true);
    xmlhttp.send();

请求类型，为`get`和`post`，`url`文件在服务器上的位置，`true`异步和`false`同步。

xhr.open("POST","###.asp",true);
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.send("name=da&age=12");

`onreadystatechange` 事件  
`XMLHttpRequest` 的状态信息，从0到4变化，0为请求未初始化，1为建立连接成功，2为请求已接收，3为请求处理中，4为请求完成。

xhr.onreadystatechange=function() {
      if (xhr.readyState==4 && xhr.status==200)  {
        }
      }

<ul id="list"></ul>
    
    var listElement = document.getElementById('list');
    
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '###。php?id=2');
    xhr.send(null)
    xhr.onreadystatechange = function() {
     if(this.readyState != 4) return
     // console.log(this.responseText)
     var data = JSON.parse(this.responseText)
     for(var i = 0; i<data.length; i++) {
      var liElement = document.createElement('li');
      liElement.innerHTML = data[i].name;
      listElement.appendChild(liElement);
     }
    }

xhr.onreadystatechange = function() {
     if(this.readyState != 4) return
     var data = JSON.parse(this.responseText)
     for(var i = 0; i<data.length; i++){
      var liElement = document.createElement('li')
      liElement.innerHTML = data[i].name;
      liElement.id=data[i].id
      listElement.appendChild(liElement);
      
      liElement.addEventListener('click', function() {
       var xhr1 = new XMLHttpRequest();
       xhr1.open('GET', '###.php?id=' + this.id)
       xhr1.send()
       xhr1.onreadystatechange = function() {
        if(this.readyState != 4) return
        var obj = JSON.parse(this.responseText)
        alert(obj.age)
       }
      }
     }
    }

`onreadystatechange`事件  
`readyState`返回当前请求的状态  
`responseBody`将回应信息文体  
`status`返回当前请求的状态码  
`statusText`返回当前请求的响应的状态  
`abort`取消当前请求  
`getAllResponseHeaders`获取响应指定的`http`头  
`open`创建一个新的`http`请求  
`send`发送请求到`http`服务器并接收回应  
`setRequestHeader`指定请求头

![效果][1240]

<?php
    if(empty($_POST['username']) || empty($_POST['password'])) {
     exit('请输入用户名和密码');
    }
    // 校验
    $username = $_POST['username'];
    $password = $_POST['password'];
    if($username === 'admin' && $password === '123') {
     exit('成功');
    }
    
    exit('失败');
    ?>

// jquery中的ajax
    $.ajax({
     type: 'GET',
     url: "###.php?id="+$('#id').val(),
     dataType: "json"
     success: function(data){
      $("jq").html();
     }else{
      $("jq").html();
     },
     error: function(jq) {
      alert();
     }
    })

$.ajax({ 
      type: "POST",
      url: "ajax.php", 
      dataType: "json", 
      data: {"username": "admin","password": 123}, 
      success: function(msg) { 
        console.log(msg) 
      }, 
      error: function() { 
        console.log("error") 
      } 
    })

> 响应数据

<?php
     header('Content-Type: application/xml');
    ?>
    
    <?xml version="1.0" encoding="utf-8"?>
    <person>
     <name>dashu</name>
     <age>16</age>
     <gender>男</gender>
    </person>

如何解析服务端的数据：

<table>
     <tbody id="content"></tbody>
    </table>
    
    <script>
     var xhr = new XMLHttpRequest()
     xhr.open('GET', '###.php')
     xhr.send()
     xhr.onreadystatechange = function() {
      if(this.readyState != 4) return
      var res = JSON.parse(this.responseText);
      
     var data = res.data
     for(var i = 0; i<data.length; i++) {
      var tr = document.createElement("tr");
      var td = document.createElement("td");
    
      td.innerHTML = data[i].id;
      
     }
     
     }
    </script>

兼容：

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

模板：

https//aui.github.io/art-template/

面试手写：

var xhr = new XMLHttpRequest();
    
    xhr.open('GET', '###.php');
    
    xhr.send(null);
    
    xhr.onreadystatechange = function() {
    
     if(this.readyState === 4){
      console.log(this);
     }
    
    }

实例：

![效果][1240 1]

实例：

## 结言 ##

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

**作者简介**

**达叔**，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。

![努力努力再努力Jeskson][Jeskson]

[Web_-Ajax]: /images/20210724/49ee2cf3ae154bc5a29149ef74d377fd.png
[1240]: /images/20210724/22b17d8a777648b7aacbb2a0c4e087ff.png
[1240 1]: /images/20210724/585231bc27f14a69b549223bfdf07984.png
[Jeskson]: /images/20210724/6836f3c456114cd4ba8b1916138a5b71.png