什么是Ajax？怎么使用？

文章目录

- 一、什么是Ajax
- 二、全局刷新和局部刷新
- 二、Ajax中使用XMLHttpRequest对象（Ajax核心步骤）
- - 1、创建异步对象
  - 2、给异步对象绑定事件
  - [3、异步对象的属性 readyState 表示异步对象请求的状态变化](#3、异步对象的属性 readyState 表示异步对象请求的状态变化)
  - 4、初始异步请求对象
  - 5、使用异步对象发送请求
  - 6、json使用

一、什么是Ajax

Ajax，全称Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。它不是一种新的编程语言，而是由多种技术组合而成的，包括HTML或XHTML、CSS、JavaScript、DOM、XML、XSLT，以及最重要的XMLHttpRequest。

Ajax的原理是通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。

使用Ajax技术的网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，从而节省网络带宽，提高网页加载速度，缩短用户等待时间，改善用户体验。

Ajax通过异步通信的方式，实现了在不刷新整个页面的情况下，对页面的局部进行更新，极大地提升了Web应用的交互性和性能。

二、全局刷新和局部刷新

全局刷新：整个浏览器被新的数据覆盖。在网络中传输大量的数据，浏览器需要加载，渲染页面。
局部刷新：在浏览器器的内部，发起请求，获取数据，改变页面中的部分内容，其余的页面无需加载和渲染。

网络中数据传输量越少，给用户的感受越好。

Ajax是用来做局部刷新的：局部刷新使用的核心对象：异步对象（XMLHttpRequest）。这个异步对象是存在浏览器内存中的，使用JavaScript语法创建和使用XMLHttpRequest对象。

Ajax包含的技术主要有：JavaScript、dom、css、xml等。
核心是：JavaScript 和 xml【被json代替】。
JavaScript：负责创建异步对象，发送请求，更新页面的dom对象。
Ajax是一种做局部刷新的新方法（2003），不是一种语言；

XML：网络中的传输的数据格式，使用json替换了XML。

xml 复制代码

<数据>
	<数据1>宝马1</数据1>
	<数据2>宝马2</数据2>
	<数据3>宝马3</数据3>
	<数据4>宝马4</数据4>
</数据>

二、Ajax中使用XMLHttpRequest对象（Ajax核心步骤）

1、创建异步对象

javascript 复制代码

var xmlHttp = new XMLHttpRequest();

2、给异步对象绑定事件

onreadystatechange ：当异步对象发起请求，获取了数据都会触发这个事件。这个事件需要指定一个函数，在函数中处理状态的变化。

javascript 复制代码

btn.onclick = fun1()

function fun1(){
    alert("按钮单击")；
}

例如：

javascript 复制代码

xmlHttp.onreadystatechange= function(){
    处理请求的状态变化。
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200 ){
        // 可以处理服务器端的数据，更新当前页面
        var data = xmlHttp.responseText;
        document.getElementById("name").value = data;

    }

}

3、异步对象的属性 readyState 表示异步对象请求的状态变化

0：创建异步对象时， new XMLHttpRequest();
1：初始异步请求对象，xmlHttp.open(请求方式，请求地址，true);
2：发送请求，xmlHttp.send();
3：从服务器端获取了数据，此时3是异步对象内部使用，获取了原始的数据。
4：异步对象把接收的数据处理完成后。此时开发人员在4的时候处理数据。

在4的时候，开发人员做什么？更新当前页面！

异步对象的status属性：表示网络请求的状况的：200，404，500，需要是当status==200时，表示网络请求是成功的。

4、初始异步请求对象

异步的方法open()

javascript 复制代码

xmlHttp.open(请求方式get|post, "服务器端的访问地址", 同步|异步请求(默认是true，异步请求));

// 例如
xmlHttp.open("get", "loginServlet?name=zs&pwd=123",true);

5、使用异步对象发送请求

xmlHttp.send();

获取服务器端返回的数据，使用异步对象的属性responseText

使用例子：xmlHttp.responseText

回调：当请求的状态变化时，异步对象会自动调用onreadystatechange 事件对应的函数。

访问地址：使用get方式传递参数

http://localhost:8080/course_myajax/bmiPrint?name=李四&w=82&h=1.8

6、json使用

1、Ajax发起请求后会返回的一个json格式的字符串

javascript 复制代码

{ name: "河北", jiancheng: "冀", "shenghui": "石家庄"}

2、json分类：

json对象格式：JSONObject，这种对象的格式名称: 值，也可以看做是key: value格式。
json数组格式：JSONArray，

javascript 复制代码

// 基本格式：  
[
	{ name: "河北", jiancheng: "冀", "shenghui": "石家庄"},
	{ name: "山西", jiancheng: "晋", "shenghui": "太原"} 
]

3、为什么要使用json

json格式好理解
json格式数据在多种语言中，比较容易处理。使用java， javascript读写json格式的数据比较容易。
json格式数据他占用的空间下，在网络中传输快，用户的体验好。
处理json的工具库：Gson（google）、Fastjson（阿里）、jackson、 json-lib。
在js中的，可以把json格式的字符串，转为json对象， json中的key，就是json对象的属性名。

当然，下面是一个简单的Ajax示例，演示了如何使用JavaScript和XMLHttpRequest对象来执行异步HTTP请求，并更新网页内容。请注意，为了简化示例，我们假设服务器上存在一个名为example.txt的文件，它包含一些简单的文本内容。

html 复制代码

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Ajax 示例</title>  
    <script>  
    function loadContent() {  
        // 创建一个新的XMLHttpRequest对象  
        var xhr = new XMLHttpRequest();  
          
        // 定义请求完成时的回调函数  
        xhr.onreadystatechange = function() {  
            if (xhr.readyState === 4 && xhr.status === 200) {  
                // 请求成功完成，服务器返回状态码200  
                // 更新页面内容  
                document.getElementById('content').innerHTML = xhr.responseText;  
            }  
        };  
          
        // 设置请求方法和URL  
        xhr.open('GET', 'example.txt', true);  
          
        // 发送请求  
        xhr.send();  
    }  
    </script>  
</head>  
<body>  
    <h1>Ajax 示例</h1>  
    <button onclick="loadContent()">加载内容</button>  
    <div id="content"></div>  
</body>  
</html>

在这个示例中，定义了一个名为loadContent的JavaScript函数。当点击按钮时，这个函数会被调用。

首先，我们创建一个新的XMLHttpRequest对象。
然后，我们定义了一个回调函数onreadystatechange，这个函数会在请求的状态改变时被调用。当请求完成（readyState === 4）并且服务器返回状态码为200（成功）时，我们更新页面上id为content的<div>元素的内容。
接着，我们使用open方法设置请求的方法和URL。在这个例子中，我们使用GET方法请求example.txt文件。
最后，我们使用send方法发送请求。
请注意，这个例子假设服务器上的example.txt文件是可访问的，并且与你的HTML文件在同一个域名下。如果文件位于其他位置，你需要修改xhr.open方法中的URL来指向正确的位置。

此外，现代Web开发中，可能会更倾向于使用更高级的库（如jQuery的$.ajax方法）或现代的Fetch API来执行Ajax请求，因为它们提供了更简洁、更强大的功能，并且能更好地处理错误和跨域请求。