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对象。
XML：网络中的传输的数据格式，使用json替换了XML。
<数据>
<数据1>宝马1</数据1>
<数据2>宝马2</数据2>
<数据3>宝马3</数据3>
<数据4>宝马4</数据4>
</数据>var xmlHttp = new XMLHttpRequest();
onreadystatechange ：当异步对象发起请求，获取了数据都会触发这个事件。这个事件需要指定一个函数， 在函数中处理状态的变化。
btn.onclick = fun1()
function fun1(){
alert("按钮单击")；
}例如：
xmlHttp.onreadystatechange= function(){
处理请求的状态变化。
if(xmlHttp.readyState == 4 && xmlHttp.status == 200 ){
// 可以处理服务器端的数据，更新当前页面
var data = xmlHttp.responseText;
document.getElementById("name").value = data;
}
}4：异步对象把接收的数据处理完成后。
此时开发人员在4的时候处理数据。
在4的时候，开发人员做什么？更新当前页面！
异步对象的status属性：表示网络请求的状况的：200，404，500，需要是当status==200时，表示网络请求是成功的。
异步的方法open()
xmlHttp.open(请求方式get|post, "服务器端的访问地址", 同步|异步请求(默认是true，异步请求));
// 例如
xmlHttp.open("get", "loginServlet?name=zs&pwd=123",true);xmlHttp.send();
获取服务器端返回的数据，使用异步对象的属性responseText
使用例子：xmlHttp.responseText
回调：当请求的状态变化时，异步对象会自动调用onreadystatechange 事件对应的函数。
访问地址：使用get方式传递参数
http://localhost:8080/course_myajax/bmiPrint?name=李四&w=82&h=1.8
1、Ajax发起请求后会返回的一个json格式的字符串
{ name: "河北", jiancheng: "冀", "shenghui": "石家庄"}2、json分类：
名称: 值，也可以看做是key: value格式。// 基本格式：
[
{ name: "河北", jiancheng: "冀", "shenghui": "石家庄"},
{ name: "山西", jiancheng: "晋", "shenghui": "太原"}
]3、为什么要使用json
当然，下面是一个简单的Ajax示例，演示了如何使用JavaScript和XMLHttpRequest对象来执行异步HTTP请求，并更新网页内容。请注意，为了简化示例，我们假设服务器上存在一个名为example.txt的文件，它包含一些简单的文本内容。
<!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函数。当点击按钮时，这个函数会被调用。
此外，现代Web开发中，可能会更倾向于使用更高级的库（如jQuery的$.ajax方法）或现代的Fetch API来执行Ajax请求，因为它们提供了更简洁、更强大的功能，并且能更好地处理错误和跨域请求。
到此这篇关于Ajax使用异步对象发送请求简介的文章就介绍到这了,更多相关Ajax异步对象发送请求内容请搜索插件窝以前的文章或继续浏览下面的相关文章希望大家以后多多支持插件窝！