Ajax及其应用

最新推荐文章于 2024-05-13 11:22:15 发布

须尽欢@《-_-》

最新推荐文章于 2024-05-13 11:22:15 发布

阅读量77

点赞数

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/qq_52461104/article/details/129680723

版权

Ajax及其应用

1.Ajax的简介：
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
Ajax = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
Ajax 不是新的编程语言，而是一种使用现有标准的新方法。
Ajax 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
Ajax不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行。
XMLHttpRequest 只是实现 Ajax 的一种方式。

2.Ajax工作原理：
在这里插入图片描述
Ajax的原理简单来说就是通过XmIHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。Ajax相当于在用户和服务器之间加了一个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，像—些数据验证和数据处理等都交给Ajax引擎自己来做，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
Ajax即Asynchronous Javascript And XML(异步JavaScript和XML）在2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的新方法，包括HTML或XHTML,CSS， JavaScript，DOM，XML，XSLT，以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载(刷新)整个页面，这使得程序能够更快地回应用户的操作。
Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。使用JavaScript向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest。通过这个对象，您的JavaScript可在不重载页面的情况与Web服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。
Ajax在浏览器与Web服务器之间使用异步数据传输(HTTP请求)，这样就可使网页从服务器请求少量的信息，而不是整个页面。

3.XMLHttpRequest对象的属性和事件
图1 XMLHttpRequest对象的ReadyState属性值列表

onreadystatechange事件

无论readyState值何时发生改变，XMLHttpRequest对象都会激发一个readystatechange事件。其中，onreadystatechange属性接收一个EventListener值-向该方法指示无论readyState值何时发生改变，该对象都将激活。

responseText属性

这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。

responseXML属性

此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应；此时，Content-Type头部指定MIME(媒体)类型为text/xml，application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。无论何时，只要readyState值不为4，那么该responseXML的值也为null。

其实，这个responseXML属性值是一个文档接口类型的对象，用来描述被分析的文档。如果文档不能被分析(例如，如果文档不是良构的或不支持文档相应的字符编码)，那么responseXML的值将为null。

status属性

这个status属性描述了HTTP状态代码，而且其类型为short。而且，仅当readyState值为3(正在接收中)或4(已加载)时，这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。

statusText属性

这个statusText属性描述了HTTP状态代码文本；并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。
XMLHTTPRequest的属性和方法
图2.标准XMLHTTPRequest操作
void open(string method, string url, boolean asynch, string username, string password)：这个方法会建立对服务器的调用。这是初始化一个请求的纯脚本方法。它有两个必要的参数，还有3个可选参数。要提供调用的特定方法（GET、POST或PUT），还要提供所调用资源的URL。另外还可以传递一个Boolean值，指示这个调用是异步的还是同步的。默认值为true，表示请求本质上是异步的。如果这个参数为false，处理就会等待，直到从服务器返回响应为止。由于异步调用是使用Ajax的主要优势之一，所以倘若将这个参数设置为false，从某种程度上讲与使用XMLHttpRequest对象的初衷不太相符。不过，前面已经说过，在某些情况下这个参数设置为false也是有用的，比如在持久存储页面之前可以先验证用户的输入。最后两个参数不说自明，允许你指定一个特定的用户名和密码。
void send(content)：这个方法具体向服务器发出请求。如果请求声明为异步的，这个方法就会立即返回，否则它会等待直到接收到响应为止。可选参数可以是DOM对象的实例、输入流，或者串。传入这个方法的内容会作为请求体的一部分发送。
void setRequestHeader(string header, string value)：这个方法为HTTP请求中一个给定的首部设置值。它有两个参数，第一个串表示要设置的首部，第二个串表示要在首部中放置的值。需要说明，这个方法必须在调用open()之后才能调用。
在所有这些方法中，最有可能用到的就是open()和send()。XMLHttpRequest对象还有许多属性，在设计Ajax交互时这些属性非常有用。
void abort()：顾名思义，这个方法就是要停止请求。
string getAllResponseHeaders()：这个方法的核心功能对Web应用开发人员应该很熟悉了，它返回一个串，其中包含HTTP请求的所有响应首部，首部包括 Content-
Length、Date和URI。
string getResponseHeader(string header)：这个方法与getAllResponseHeaders()是对应的，不过它有一个参数表示你希望得到的指定首部值，并且把这个值作为串返回。
除了这些标准方法，XMLHttpRequest对象还提供了许多属性，如3所示。处理XMLHttpRequest时可以大量使用这些属性。

图3标准XMLHttpRequest属性

4. 以JSONPlaceHolder为数据服务，编写案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=\, initial-scale=1.0" />
    <title>AJAX GET 请求</title>
  </head>
  <body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
      //获取button元素
      const btn = document.getElementsByTagName("button")[0];
      const result = document.getElementById("result");
      //绑定事件
      btn.onclick = function () {
        // 1.创建XMLHttpRequest对象
        const xhr = new XMLHttpRequest();
      };
      //2.初始化 设置请求方法和URL
      xhr.open("GET", "http://127.0.0.1:8000/server");
      //3.发送请求
      xhr.send();
      //4.事件绑定 处理服务器端返回的数据
      //on when 当什么时候
      //readystate 是xhr对象中的属性,表示状态0 1 2 3 4
      //change 事件,当状态发生变化时触发
      if (xhr.readyState == 4) {
        //判断状态码
        if (xhr.status >= 200 && xhr.status < 300) {
          //处理结果 行 头 空行 体
          //1.响应体
          /* console.log(xhr.status);//状态码
            console.log(xhr.responseText);//状态字符串
            console.log(xhr.getAllResponseHeaders());//所有响应体
            console.log(xhr.response);//响应体
        */
          //设置result的文本
          result.innerHTML = xhr.responseText;
        } else {
          console.log("请求失败");
        }
      }
    </script>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: 1px solid #90b;
      }SS
    </style>
  </body>
</html>

以get请求为例

图4 请求参数汇总

须尽欢@《-_-》

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax及其应用

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。Ajax = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。Ajax 不是新的编程语言，而是一种使用现有标准的新方法。Ajax 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。Ajax不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行。XMLHttpRequest 只是实现 Ajax 的一种方式。
复制链接

扫一扫