9.1 认识AJAX

作者: liufeisheng

创建时间: 2024-05-20 06:42:02

AJAX是杰西·詹姆斯·加勒特（Jesse James Garrett）创造的，是Asynchronous JavaScript And XML（异步JavaScript和XML）的缩写，由一组相互关联的Web开发技术（JavaScript、XML、CSS、DOM）组成，是用来创建交互式网页应用的网页开发技术。它通过在后台与服务器进行少量数据交换，能够使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，只对网页的部分内容进行更新，而且可以不用立刻得到结果，也不需要等待结果，实际处理这个调用的部件在完成处理后，通过状态、通知和回调函数等方式来通知调用者。

可以说，AJAX是“增强的JavaScript”，而且JavaScript提供了很多与AJAX技术相关的API，这样可以方便地实现AJAX功能。有很多使用AJAX的应用程序案例，如新浪微博、谷歌地图等。

在“Web 1.0时代”，多数网站都采用传统的开发模式，从Web 2.0开始，越来越多的网站采用AJAX开发模式。在这种模式下，首先页面中用户的操作将通过AJAX引擎与服务器端进行通信，然后将返回结果提交给客户端页面的AJAX引擎，最后由AJAX引擎将这些数据插入页面的指定位置。

AJAX是XMLHttpRequest对象和JavaScript、XML、CSS、DOM等多种技术的组合。其中XMLHttpRequest对象是较核心的技术，它是浏览器接口，开发者可以使用它发出HTTP和HTTPS请求，而且不需要刷新页面就可以修改页面的内容。它可以实现如下功能。

  • （1）在不重新加载页面的情况下更新网页。
  • （2）在页面已经加载后可以从服务器接收数据、请求数据。
  • （3）在后台向服务器发送数据。

9.1.1 XMLHttpRequest对象

XMLHttpRequest对象是AJAX的核心技术，它是一个具有API的JavaScript对象，能够使用HTTP连接服务器，在1999年由微软公司在IE 5.0中率先推出。

进行操作前，首先需要初始化这个对象，由于它不是一个W3C标准，所以对于不同的浏览器，初始化的方法是不同的。 通常情况下，初始化XMLHttpRequest对象时只需要考虑两种情况，一种是IE，一种是非IE，下面分别介绍。所有现代浏览器（IE 7+、火狐浏览器、Chrome浏览器、Safari浏览器以及Opera浏览器）都内建了XMLHttpRequest对象。

1.创建 XMLHttpRequest 对象

创建XMLHttpRequest对象比较简单，在标签中通过new关键字就可以创建XMLHttpRequest对象。 var xhr=new XMLHttpRequest( );

2.低版本IE的兼容问题

现代浏览器都可以直接通过关键字new的方式创建XMLHttpRequest对象。IE 5.0以下的浏览器会出现兼容性问题，可以通过下面的方法进行兼容性处理。 image.png

XMLHttpRequest对象提供了一些常用的属性，通过访问这些属性可以获取服务器的相应状态及响应内容。常用的属性如表9-1所示。

image.png

XMLHttpRequest对象提供了一些常用的方法，通过这些方法可以处理请求。常用的方法如表9-2所示。

image.png

9.1.4 AJAX请求

  • 一种请求数据的方式，不需要刷新整个页面
  • 核心是 XMLHttpRequest 对象

image.png 1. 创建对象

首先需要创建XMLHttpRequest对象。该对象的主要作用是在后台与服务器交换数据，这就意味着可以不重新加载整个页面，而实现对网页内容的局部更新。具体创建过程如下：

  1. 建立连接

通过XMLHttpRequest 对象的open()方法来建立连接，语法格式如下所示。

xhr.open(method,url,async); //发送请求使用open()方法设置请求方式和请求地址

其中，method用于设置请求的方式是GET还是POST，后面具体介绍这两者的区别。url 表示AJAX请求的资源地址，这个地址可以是绝对地址也可以是相对地址，在实际应用中，一般都使用相对地址。async用于设置请求方式是同步还是异步，取值为true或false，取值为true时，表示异步请求，脚本执行send()方法后不等待服务器的执行结果，继续执行脚本代码；取值为false时，表示同步请求，脚本执行send() 后等待服务器的执行结果。具体示例如下代码所示。

xhr.open("GET","example.jsp",true); //异步请求example.jsp资源

  1. 发送请求

采用XMLHttpRequest 对象的send()方法将请求发送到服务器，过程如下：

xhr.send(data);//发送数据

在不同的请求方式中，data的取值是有区别的。在第2步中我们讲到method用于设置AJAX的两种请求方式，主要有GET和POST，这两种请求方式在实际应用中是有区别的。

GET是AJAX请求中最常见的请求，一般用于查询信息。GET请求没有请求体，如果需要传递参数，可以将参数追加到URL的末尾，以“？”来引导，参数的格式为“参数名=参数值”，如果有多个参数值，中间需以“&”号分隔。这里发送的请求参数设置为null，具体形式如下所示：

xhr.open( “get", "example.jsp?name1=value1&name2=value2",true )； //发送GET请求
xhr.send(null);//发送GET请求，不需要参数

POST请求在AJAX请求中的使用频率仅次于GET请求，POST请求数据作为请求的主体向服务器提交，可以包含许多数据，格式不限。POST请求发送到服务器的数据是可以保存的。发送POST请求必须使用setRequestHeader()方法，为请求的HTTP头设置“Content-Type：application/x-form-www-urlencoded”，接下来使用send()方法发送请求，需要设置请求参数，如下。

xmlhttp.open("POST", "example.jsp", true); //发送POST请求
xmlhttp.setRequestHeader("Content-type", "application/x-www-form- urlencoded"); //对于POST请求需设置请求头
xhr.send(param); //设置参数
  1. 接收数据 当异步HTTP请求发送到服务器时，接下来就需要进行响应。使用xhr对象的onreadysta- techange来监听请求状态的变化，状态的变化主要通过readyState和status属性来表示，其具体数值如表9-1所示。当readyState值为4和status的值为200时，表示请求成功。

每当 readyState的值发生改变时，就会触发 onreadystatechange事件。readyState 属性用来表示XMLHttpRequest 的状态信息，当readyState的结果为4时代表请求已完成，且响应已就绪，此时若status的值为400，就可以获取响应的数据了。

AJAX接收的返回数据主要有文本数据、XML格式数据和JSON格式数据。AJAX使用XMLHttpRequest对象的responseText、responseXML接收这些数据，如下代码所示。

xhr.onreadystatechange =  function(){//等待数据
   if(xhr.readyState == 4 && xhr.status == 200){     
console.log(JSON.parse(xhr.responseText));
        }
    }

image.png

image.png

注意，在VSCode中右击运行，如图所示

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>读取个人信息</title>
</head>
<body>
    <p id="p1"></p>
    <input type="button" value="读取个人信息" onclick="readText()">

    <script>
        function readText(){
            var xhr =  new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    document.getElementById("p1").innerHTML = xhr.responseText;
                    console.log(xhr.responseText);
                }
            }
            xhr.open("get","content/1.txt",true);
            xhr.send(null);
        }
    </script>
</body>
</html>