用 AJAX 异步提交表单——用 AJAX 向服务器提交数据

时间:2022-10-13 15:28:21

自己对前端一窍不通,但是又想用异步提交表单来制作登陆的页面。所以学习了一下如何用 AJAX 提交表单。

也就是在不刷新页面的情况下向服务器提交表单。

AJAX 可以在不刷新页面的情况下与服务器交换数据。这个应用在登陆页面上面非常方便。

先看一个简单的 AJAX 与服务器交换数据的例子

<html>  
<head>  
<script type="text/javascript">  
function loadXMLDoc()  
{  
var xmlhttp;  
if (window.XMLHttpRequest)  
  {// code for IE7+, Firefox, Chrome, Opera, Safari  
  xmlhttp=new XMLHttpRequest();  
  }  
else  
  {// code for 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("GET","/ajax/demo_get.asp",true);  
xmlhttp.send();  
}  
</script>  
</head>  
<body>  
  
<h2>AJAX</h2>  
<button type="button" onclick="loadXMLDoc()">请求数据</button>  
<div id="myDiv"></div>  
  
</body>  
</html>

创建  XMLHttpRequest 对象

首先,要创建一个  XMLHttpRequest 对象。

为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject

var xmlhttp;  
    if (window.XMLHttpRequest)  
      {// code for IE7+, Firefox, Chrome, Opera, Safari  
      xmlhttp=new XMLHttpRequest();  
      }  
    else  
      {// code for IE6, IE5  
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
      }

 

 

向服务器发送请求

接下来要向服务器发送请求。

将请求发送到服务器,我们需要使用 XMLHttpRequest 对象的 open() 和 send() 方法:

方法描述
open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。method:请求的类型;GET 或 POSTurl:文件在服务器上的位置async:true(异步)或 false(同步)
send(string)将请求发送到服务器。string:仅用于 POST 请求

var xmlhttp;  
xmlhttp.open("GET","test1.txt",true); //规定请求的类型、URL 以及是否异步处理请求。true 表示异步处理  
xmlhttp.send(); //将请求发送到服务器。

这就是一个简单的 GET 请求。

如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性描述
responseText获得字符串形式的响应数据。
responseXML获得 XML 形式的响应数据。

onreadystatechange 事件

当请求被发送到服务器时,我们需要执行一些基于响应的任务。

每当 readyState 改变时,就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性:

当请求被发送到服务器时,我们需要执行一些基于响应的任务。

每当 readyState 改变时,就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性:

属性描述
onreadystatechange存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成,且响应已就绪
status200: "OK"404: 未找到页面

在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时,表示响应已就绪:

var xmlhttp;  
xmlhttp.onreadystatechange=function()  
  {  
  if (xmlhttp.readyState==4 && xmlhttp.status==200)  
    {  
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;  
    }  
  }

现在我们再来看看一开始的例子:

<html>  
<head>  
<script type="text/javascript">  
function loadXMLDoc()  
{  
//创建 XMLHttpRequest 对象  
var xmlhttp;  
if (window.XMLHttpRequest)  
  {// code for IE7+, Firefox, Chrome, Opera, Safari  
  xmlhttp=new XMLHttpRequest();  
  }  
else  
  {// code for IE6, IE5  
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
  }  
//每当 readyState 改变时,就会触发 onreadystatechange 事件  
xmlhttp.onreadystatechange=function()  
  {  
   //当 readyState 等于 4 且状态为 200 时,表示响应已就绪  
  if (xmlhttp.readyState==4 && xmlhttp.status==200)  
    {  
     //处理服务器的响应  
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;  
    }  
  }  
//编辑请求信息,并且将请求发送到服务器  
xmlhttp.open("GET","/ajax/demo_get.asp",true);  
xmlhttp.send();  
}  
</script>  
</head>  
<body>  
  
<h2>AJAX</h2>  
//点击按钮后执行 loadXMLDoc() 函数  
<button type="button" onclick="loadXMLDoc()">请求数据</button>  
<div id="myDiv"></div>  
  
</body>  
</html>

这样子就明白多了。