自己对前端一窍不通,但是又想用异步提交表单来制作登陆的页面。所以学习了一下如何用 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" οnclick="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" οnclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>
这样子就明白多了。