Ajax及其应用

最新推荐文章于 2024-07-25 15:19:10 发布

m0_73545498

最新推荐文章于 2024-07-25 15:19:10 发布

阅读量796

点赞数 27

文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/m0_73545498/article/details/136516915

版权

一、Ajax工作原理

AJAX 即 Asynchronous Javascript And XML（异步JavaScript和XML），是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

工作原理：

Ajax在用户与服务器之间起到了一个中介的作用，实现了用户操作的异步化响应。这意味着，并非每次用户的操作都会立即触发服务器的请求。一些前端的数据验证和数据处理工作，Ajax引擎会自行处理。只有当需要获取服务器上的新数据时，Ajax引擎才会代为向服务器发起请求。

简而言之，Ajax通过XmlHttpRequest对象向服务器发送异步请求，以获取所需的数据。随后，利用JavaScript对DOM进行操作，实现页面的动态更新。其中，从服务器获取数据是这一过程的核心环节。为了深入了解Ajax的工作机制，我们有必要对XmlHttpRequest对象有所认识。

XmlHttpRequest是Ajax技术的核心，这一机制最初在IE5浏览器中得以应用，它支持异步请求技术。简单来说，它使得JavaScript能够迅速地向服务器发起请求并处理响应，而无需等待，从而避免了用户的操作被阻塞。这种机制为Web应用带来了无刷新的用户体验。

二、XMLHttpRequest对象

（1）XMLHttpRequest对象的属性

属性	具体用法
onreadystatechange	用于指定状态改变时所触发的事件处理器
readyState	用于获取请求状态的属性 0-未初始化;1-正在加载;2-已加载;3-交互中;4-完成
responseText	用户获取服务器相应的属性。当readyState的值为0、1、2时,responseText为空字符串;当readyState的值为3时,responseText 为还未完成的响应信息;当readyState的值为4时,responseText为响应信息
responseXML	用于当接收到完整的HTTP响应(readyState的值为4)时描述XML响应,若readyState 的值不为4,它取值为 null
status	用于描述HTTP状态代码的属性。仅当readyState的值为3或4时,status属性才可用
statusText	用于描述HTTP状态的代码文本。仅当readyState的值为3或4时,statusText属性才可用

（2）XMLHttpRequest对象的方法

方法	具体功能
open()	用于设置异步请求的URL、请求方法以及其他参数信息 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send()	用于向服务器发送请求。如果请求声明为异步,该方法将立即返回,否则将等到接收到响应为止
sendRequestHeader()	用于为请求的HTTP头设置值,该方法必须在open()方法调用之后使用
getRequstHeader()	以字符串的形式返回指定的HTTP头信息
getAllRequstHeader()	以字符串的形式返回完整的HTTP头信息

（3）XMLHttpRequest对象的事件

事件	具体功能
abort	当 request 被停止时触发，例如当程序调用 XMLHttpRequest.abort() 时。也可以使用 onabort 属性。
error	当 request 遭遇错误时触发。也可以使用 onerror 属性
load	XMLHttpRequest请求成功完成时触发。也可以使用 onload 属性。
loadend	当请求结束时触发，无论请求成功 (load) 还是失败 (abort 或 error )。也可以使用 on 属性。
loadstart	接收到响应数据时触发。也可以使用 onloadstart 属性。
progress	当请求接收到更多数据时，周期性地触发。也可以使用 onprogress 属性。
timeout	在预设时间内没有接收到响应时触发。也可以使用 ontimeout 属性。

三、AJAX应用

以JSONPlaceHolder为数据服务来编写案例，以进一步阐述Ajax及XMLHttpRequest对象的用法

应用场景一：基本的数据获取

假设我们要从JSONPlaceholder获取所有的用户数据，并展示在页面上。

var xhr = new XMLHttpRequest();  
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users', true);  
  
xhr.onload = function () {  
    if (xhr.status === 200) {  
        var users = JSON.parse(xhr.responseText);  
        users.forEach(function(user) {  
            var userElement = document.createElement('div');  
            userElement.textContent = 'ID: ' + user.id + ', Name: ' + user.name;  
            document.body.appendChild(userElement);  
        });  
    } else {  
        console.error('Request failed.  Returned status of ' + xhr.status);  
    }  
};  
  
xhr.onerror = function () {  
    console.error('There was a connection error of some sort');  
};  
  
xhr.send();

应用场景二：设置请求头

在某些情况下，你可能需要设置请求头，例如添加认证信息。你可以使用setRequestHeader方法来设置请求头。

var xhr = new XMLHttpRequest();  
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users', true);  
  
xhr.onload = function () {  
    if (xhr.status === 200) {  
        var users = JSON.parse(xhr.responseText);  
        users.forEach(function(user) {  
            var userElement = document.createElement('div');  
            userElement.textContent = 'ID: ' + user.id + ', Name: ' + user.name;  
            document.body.appendChild(userElement);  
        });  
    } else {  
        console.error('Request failed.  Returned status of ' + xhr.status);  
    }  
};  
  
xhr.onerror = function () {  
    console.error('There was a connection error of some sort');  
};  
  
xhr.send();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users', true);  
xhr.setRequestHeader('Authorization', 'Bearer your_token_here');

应用场景三：处理错误

当请求失败时，你可能希望执行一些特定的操作，例如显示错误消息。你可以使用onerror事件处理器来处理这种情况。

xhr.onerror = function () {  
    alert('An error occurred during the request.');  
};

应用场景四：发送POST请求

如果你需要向服务器发送数据（例如创建新用户），你可能需要使用POST请求。你可以使用XMLHttpReques的send方法来发送数据。

var xhr = new XMLHttpRequest();  
xhr.open('POST', 'https://jsonplaceholder.typicode.com/users', true);  
  
var user = {  
    "name": "John",  
    "username": "johndoe",  
    "email": "johndoe@example.com"  
};  
  
xhr.send(JSON.stringify(user));  
  
xhr.onload = function () {  
    if (xhr.status === 201) {  
        alert('User created successfully.');  
    } else {  
        console.error('Request failed.  Returned status of ' + xhr.status);  
    }  
};

应用场景五：从ASP文件返回数据

当用户在文本框内键入字符时网页如何与Web服务器进行通信

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showHint(str)
{
  var xmlhttp;
  if (str.length==0)
  { 
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<h3>在输入框中尝试输入字母 a:</h3>
<form action=""> 
输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>提示信息: <span id="txtHint"></span></p> 

</body>
</html>

应用场景六：从数据库返回数据

用AJAX网页如何获取数据库中的信息

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showCustomer(str)
{
  var xmlhttp;    
  if (str=="")
  {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<form action=""> 
<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<option value="APPLE">Apple Computer, Inc.</option>
<option value="BAIDU ">BAIDU, Inc</option>
<option value="Canon">Canon USA, Inc.</option>
<option value="Google">Google, Inc.</option>
<option value="Nokia">Nokia Corporation</option>
<option value="SONY">Sony Corporation of America</option>
</select>
</form>
<br>
<div id="txtHint">客户信息将显示在这...</div>

</body>
</html>

应用场景七：从XML文件返回数据

创建一个XMLHttpRequest从XML文件中检索数据并显示在一个HTML表格中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
</head>
<body>

<h1>XMLHttpRequest 对象</h1>

<button type="button" onclick="loadXMLDoc()">获取我收藏的 CD</button>
<br><br>
<table id="demo"></table>

<script>
function loadXMLDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xhttp.open("GET", "cd_catalog.xml", true);
  xhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Artist</th><th>Title</th></tr>";
  var x = xmlDoc.getElementsByTagName("CD");
  for (i = 0; i <x.length; i++) {
    table += "<tr><td>" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}
</script>

</body>
</html>

应用场景八：用callback函数

用一个callback函数创建一个XMLHttpRequest，并从一个TXT文件中检索数据。、

<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// IE7+, Firefox, Chrome, Opera, Safari 代码
  xmlhttp=new XMLHttpRequest();
  }
else
  {// IE6, IE5 代码
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
	loadXMLDoc("/try/ajax/ajax_info.txt",function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	});
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div>
<button type="button" onclick="myFunction()">修改内容</button>

</body>
</html>

内容参考：AJAX 教程 | 菜鸟教程 (runoob.com)
XMLHttpRequest - Web API 接口参考 | MDN (mozilla.org)

m0_73545498

关注

27
点赞
踩
23

收藏

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

即 Asynchronous Javascript And XML（异步JavaScript和XML），是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
复制链接

扫一扫