XMLHttpRequest 是 AJAX的基础,所有现代浏览器均支持 XMLHttpRequest对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
创建 XMLHttpRequest对象的语法:
variable=new XMLHttpRequest();
老版本的 Internet Explorer(IE5和 IE6)使用 ActiveX对象:
variable=new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有的现代浏览器,包括 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");
}
// 注释:onreadystatechange是一个事件句柄。它的值 (state_Change)是一个函数的名称,当 XMLHttpRequest对象的状态发生改变时,会触发此函数。状态从 0(uninitialized)到 4 (complete)进行变化。仅在状态为 4 时,我们才执行代码。
xhr.onreadystatechange = state_Change;
/*
为什么使用 Async=true?
我们的实例在 open()的第三个参数中使用了 "true"。
该参数规定请求是否异步处理。
True 表示脚本会在 send()方法之后继续执行,而不等待来自服务器的响应。
onreadystatechange事件使代码复杂化了。但是这是在没有得到服务器响应的情况下,防止代码停止的最安全的方法。
通过把该参数设置为 "false",可以省去额外的 onreadystatechange代码。如果在请求失败时是否执行其余的代码无关紧要,那么可以使用这个参数。
*/
xhr.open("GET",url,true);
xhr.send(null);//发送请求
案列:
以一个登录的效果为例。我使用的是mac电脑,需要在电脑上配置php环境,mac下配置php环境:http://blog.csdn.net/iosbird/article/details/62416585
hmtl的内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<div>
<div class="showinfo"></div>
<form id="form">
用户名:<input type="text" placeholder="输入用户名" name="username" id="username"> <br/>
密码: <input type="password" placeholder="输入密码" name="password" id="password"><br/>
<input type="button" value="登录" id="btn">
</form>
</div>
<script>
window.onload = function () {
var btn = document.getElementById('btn');
btn.onclick = function () {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
/* body... */
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else{
// xhr = new activeElement
}
var url = './test.php?username='+username+'&password='+password;
xhr.open('get',url,true);
xhr.onreadystatechange = function () {
if (xhr.readyState==4) {
if (xhr.status==200) {
var data = xhr.responseText;
if (data ==1) {
document.getElementById('showinfo').innerHTML='用户名或密码错误';
}
else{
document.getElementById('showinfo').innerHTML='登录成功';
}
}
}
}
xhr.send(null);//发送请求
}
}
</script>
</body>
</html>
test.php的代码也很简单,就几行:
<?php
header("Content-Type: text/javascript; charset=utf-8");
$username = $_GET['username'];
$password = $_GET['password'];
if($username == 'admin' && $password == '123'){
echo 2;
}else{
echo 1;
}
在电脑的输入用户名:123,密码:123,返回的data:1,登录失败
效果如下:
在电脑的输入用户名:admin,密码:123,返回的data:2,登录成功
效果如下: