likes
comments
collection
share

# Ajax 理解和应用

作者站长头像
站长
· 阅读数 66

Ajax 理解和应用

要运用一个知识到实际里去，首先要理解其原理是什么。

什么是Ajax？

Ajax是异步JavaScript和XML。

是用于创建快速的动态网页的一种技术。

和传统的页面相比（即不使用Ajax）如果需要更新内容的话，就必须重新加载整个页面。

有很多使用Ajax的应用案例：Google地图、新浪微博等等。

Ajax能让我们轻松实现网页与服务器之间的数据交互。

基本上，无论前端技术如何变化，由客户端发起的与服务器通信使用的最对的技术还是Ajax，有此可见Ajax在前端技术里面是多么的重要。

Ajax 不是新的编程语言，而是一种使用现有标准的新方法。

什么是同步请求（false），什么是异步请求（true：一般默认）？

同步请求是指当前发出请求后，浏览器什么都不能做， 必须得等到请求完成返回数据之后，才会执行后续的代码。

相当于在日常生活的排队里面，必须等待前一个人完成自己的事后，后面一个人才能接着办。 也就是说，当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面处于一个假死状态， 当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态。

默认异步异步请求就当发出请求的同时，浏览器可以继续做任何事请， Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，各干各的，互不影响。

一般默认值为true，异步。异步请求可以完全不影响用户的体验效果， 无论请求的时间或长或短，用户都在操作页面的其他内容，并不会有等待的感觉。

XMLHttpRequest对象

Ajax的一个核心技术就是XMLHttpRequest对象，简称XHR，目前市面上的大部分浏览器都支持原生的XHR。创建语法如下：

const xhr = new XMLHttpRuquest();

XMLHttpRequest用法

在Ajax向服务器发送请求的时候，我们一般要先创建一个XMLHttpRequest对象用于和服务器交换数据。并且需要将请求发送到服务器，就需要使用到以下两个方法：

  • open（）；
  • send（）；
方法描述
open（method，URL，async）规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POST ，url：文件在服务器上的位置 ， async：true（异步）或 false（同步）。
send(string)将请求发送到服务器。string：仅用于 POST 请求

收到响应之后，响应的数据会自动的对XHR对象的属性进行自动填充：

  • responseText：响应主体被返回的文本。
  • responseXML：如果响应内容类型是“text/xml”或者“application/xml”,这个属性将保存相应数据的XML DOM文档。
  • status：响应的HTTP状态。
  • statusText：HTTP状态说明。
  • responseType：传入数据时判断对象类型，一般类型为json等。

如果说是同步的请求，只需要对status进行状态监测就行，例如成功或者失败。

如果说是异步的请求，就必须要对XHR对象的readystate属性进行检查。

该属性表示请求和响应的过程阶段：

  • 0：未初始化，没有调用open（）。
  • 1：启动，已经调用open（），但没有调用send（）。
  • 2：发送，都调用，但没有收到响应。
  • 3：接收，接收到了响应的部分数据。
  • 4：完成，全部的数据都已经接收到了。

在默认的情况下XHR还会发送HTTP的头部信息，使用setRequestHeader()方法可以设置自定义请求头部信息。头部字段名称和头部字段值做为key，value形式作为参数。用户也可以自定义头部信息，这样在服务器收到请求后可以进行后续操作。

当然了，调用XHR对象的getResponseHeader()传入头部字段名称，或者调用getAllResponseHeaders()可以获取头部信息的字符串。

服务器状态

所有状态码的第一个数字代表了响应的五种状态之一：

  • 1xx    信息，表示临时响应并需要请求者继续执行操作。
  • 2xx    成功，操作被成功接收并处理。
  • 3xx    表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。
  • 4xx    客户端错误，请求包含语法错误或无法完成请求。
  • 5xx    这些状态代码表示服务器在尝试处理请求时发生内部错误。

一些常见的状态码：

  • 200：服务器响应正常，并正确返回。
  • 304：该目标资源在上次请求后没有任何修改（通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。
  • 400：无法找到请求的资源，可能原因： (1) 语义有误，当前请求无法被服务器理解。 (2) 请求参数有误。
  • 401：要访问的目标资源的权限不够，或者说当前请求需要用户验证。
  • 403：没有权限访问资源。
  • 404：找不到访问的对象，或者要访问的目标资源不存在。
  • 405：要访问的目标资源被禁止。
  • 414：请求的URL太长。
  • 500：服务器内部代码错误。

GET、POST

  • get（）请求，通常用于服务端资源，根据URL地址，从服务器获取图片、文字、数据资源等。
  • post（）请求，通常用于向服务器提交数据。

数据也是服务器对外提供的一种资源，只要是资源就必然要通过：请求--处理--响应的方法进行获取。

发送GET请求

let xhr = new XMLHttpRequest()
xhr.open('get', 'ex.json?query=4&em=0')
xhr.send()
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4) {
        if(xhr.status === 200){
            console.log(xhr.responseText);
        }
   }
}

发送POST请求

发送post（）的请求，和get（）方法类似，他们的区别就是数据的传递。post（）是把请求的数据放在请求体中，所以需要调用XHR对象上的setRequestHeader（）

let xhr = new XMLHttpRequest()
xhr.open('post', 'ex.json')
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('query=4&em=0')
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4) {
        if(xhr.status === 200){
            console.log(xhr.responseText);
        }
    }
}

JQuery早已对Ajax请求进行了成熟的封装,有点类似数据库的操作，在JQuery里面Ajax也具有增删改查的功能和操作。（先上图，还没学到，后续补充QAQ）

# Ajax 理解和应用

最后show一段课堂上练习的代码，展现Ajax大概的运行模式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="posts"></ul>
    <script>
        // 原生方式发送
         var url = "http://1.14.69.117:5000/posts"
        //  修改url测试
        //  new 对象
         var  xhr = new XMLHttpRequest();
        //  加监听
         xhr.addEventListener('load', function(){
            // 产生交互就会触发load，无论500or404
             if(xhr.status == 200){
                console.log("in loadEvent");
                console.log(xhr.response);
                //(1)大数据转化为对象
                var data = JSON.parse(xhr.response);
                // (2)遍历生产对应的li
                var liAll = "";
                for (var i=0; i<data.length; i++){
                    var oneLi = `<li>title:${data[i].title}
                        author:${data[i].author}</li>`
                        liAll += oneLi;
                }
                // (3)将生成的li加入到ul中
                document.querySelector("#posts").innerHTML = liAll;
            }else{
                //...
                console.log("其他错误情况",xhr.status);
            }
        })
        xhr.addEventListener('error', function(e){
            console.log("error event:",e);
        })
        //  初始化
         xhr.open("GET",url);
        //  默认异步，在url后面加false即为同步
         // 发送
         xhr.send(); 
         console.log("after send");
        //  如果这个位置先打印，表示异步
    </script>
    <!-- // 返回码：
    // 200-299 正常
    // 300-399 重定向
    // 400-499 客户端故障（找不到资源）
    // 500- 服务端问题 -->
</body>
</html>

# Ajax 理解和应用

自此本文结束，有很多欠缺，欢迎各位大佬补充和提议。

转载自:https://juejin.cn/post/7212500870764576826
评论
请登录