深入理解XMLHttpRequest

来源：互联网发布：excel数据随机排列编辑：程序博客网时间：2024/06/06 05:20

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>

<head>

<title>Document</title>

</head>

<body>

<div>

用户名：<input type="text" placeholder="输入用户名" name="username" id="username"> <br/>

密码： <input type="password" placeholder="输入密码" name="password" id="password"><br/>

</form>

</div>

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，登录成功

效果如下：

0 0