10分钟学会——前端如何通过AJAX向后端发送请求

最新推荐文章于 2025-06-22 15:13:26 发布

30年后世界会是怎样

最新推荐文章于 2025-06-22 15:13:26 发布

阅读量3.5k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_40741855/article/details/88168770

本文介绍了前端如何利用AJAX与服务器进行异步数据交换，包括使用XMLHttpRequest对象，设置GET和POST请求，处理响应数据。通过实例演示了GET请求、异步请求以及带有回调函数的POST请求的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AJAX

基于现有的internet标准：

XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)

GET请求、异步请求、来自服务器的响应并非XML

使用方法（举例说明）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        //  创建XMLHttpRequest对象
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        // 创建XMLHttpRequest对象
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
}
</script>
</head>
<body>

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

</body>
</html>

创建XMLHttpRequest对象。

给XMLHttpRequest对象添加onreadystatechange事件处理函数（响应处于就绪状态时执行的函数）。

通过XMLHttpRequest对象的responseText属性获取数据库返回值。

通过XMLHttpRequest对象的open(method,url,async)方法打开链接，send(string)方法发送请求。

其中method是请求的类型，可以使GET或POST，url文件在服务器上的位置，async可是是true（异步）或false（同步）。

string仅用于POST请求，GET请求时不需要有参数。

GET请求、异步请求、来自服务器的响应为XML

使用方法（举例说明）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
  var xmlhttp;
  var txt,x,i;
  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)
    {
      xmlDoc=xmlhttp.responseXML;
      txt="";
      //解析XML，获得一个数组
      x=xmlDoc.getElementsByTagName("ARTIST");
      for (i=0;i<x.length;i++)
      {
        txt=txt + x[i].childNodes[0].nodeValue + "<br>";
      }
      document.getElementById("myDiv").innerHTML=txt;
    }
  }
  xmlhttp.open("GET",url,true);
  xmlhttp.send();
}
</script>
</head>

<body>

<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">获取我的 CD</button>
 
</body>
</html>

创建XMLHttpRequest对象。

给XMLHttpRequest对象添加onreadystatechange事件处理函数（响应处于就绪状态时执行的函数）。

通过XMLHttpRequest对象的responseXML属性获取数据库返回值并解析。

通过XMLHttpRequest对象的open(method,url,async)方法打开链接，send(string)方法发送请求。

其中method是请求的类型，可以使GET或POST，url文件在服务器上的位置，async可是是true（异步）或false（同步）。

string仅用于POST请求，GET请求时不需要有参数。

GET请求、异步请求、带有回调函数

使用方法（举例说明）：

<!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();
}

//按钮的点击事件处理函数，调用loadXMLDoc函数，
function myFunction()
{
	loadXMLDoc(url,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>

一个POST请求的例子（异步请求,请求数据不是普通的string，是像表单那样有格式的）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
  var xmlhttp;
  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("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
    xmlhttp.open("POST",url,true);
    //如果需要像 HTML 表单那样 POST 数据，使用 setRequestHeader() 来添加 HTTP 头。
    //然后在 send() 方法中规定要发送的数据
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("user=admin&pass=1234");
}
</script>
</head>
<body>

<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
 
</body>
</html>

//如果需要像 HTML 表单那样 POST 数据，使用 setRequestHeader() 来添加 HTTP 头。
//然后在 send() 方法中规定要发送的数据
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("user=admin&pass=1234");

这是需要注意的两行代码。