创建XMLHttpRequest对象
xmlHttp = new XMLHttpRequest();
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');//IE
XMLHttpRequest对象相关方法
打开请求
XMLHttpRequest.open(传递方式,地址,是否异步请求)
准备就绪执行
XMLHttpRequest.onreadystatechange
获取执行结果
XMLHttpRequest.responseText
上手小实践
//文件名 index.php
<script type="text/javascript" src="ajax.js"></script>
<a href="#" onclick="funphp100('o')">o</a>
<a href="#" onclick="funphp100('t')">t</a>
<a href="#" onclick="funphp100('x')">x</a>
<div id="php100"></div>
//文件名 for.php
<?php
if(@$id=$_GET['id']){
for($i=1;$i<10;$i++){
echo $id;
}
exit();
}
?>
//文件名 ajax.js
var xmlHttp;
function S_xmlhttprequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function funphp100(url){
S_xmlhttprequest();
xmlHttp.open("GET","for.php?id="+url,true);
xmlHttp.onreadystatechange=byphp;
xmlHttp.send(null);
}
function byphp(){
if (xmlHttp.readyState == 4){
var byphp100=xmlHttp.responseText;
document.getElementByIdx_x('php100').innerHTML=byphp100;
}
}
==========================================================
AJAX+PHP用户名验证
index.php
<script type="text/javascript" src="ajax.js"></script>
<form name="myform" action="" method="post" enctype="text/plain">
用户名：
<input type="text" name="user" value="" onblur="funphp100('php100')"/>
<div id="php100"></div>
</form>
for.php
<?php
if($_GET[id]){
sleep(1);
$conn=mysql_connect('localhost','root','');
mysql_select_db('test',$conn);
$sql="SELECT * FROM `user` where `name`='$_GET[id]'";
$q=mysql_query($sql);
if(is_array(mysql_fetch_row($q))){
echo "<font color=red>用户名已经存在</font>";
}else
{
echo "<font color=green>可以使用</font>";
}
}
?>
ajax.js
var xmlHttp;
function S_xmlhttprequest() {
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
} else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function funphp100(name) {
var f=document.myform.user.value;
S_xmlhttprequest();
xmlHttp.open("GET","for.php?id="+f,true);
xmlHttp.onreadystatechange = byphp;
xmlHttp.send(null);
}
function byphp() {
if(xmlHttp.readyState == 1) {
document.getElementByIdx_x('php100').innerHTML = "<img src='loading.gif'>";
}
if(xmlHttp.readyState == 4 ){
if(xmlHttp.status == 200) {
var byphp100 = xmlHttp.responseText;
document.getElementByIdx_x('php100').innerHTML = byphp100;
}
}
}
=============================
Ajax+PHP打造等待进度条效果
方法XHR.readyState五种状态
XHR.readyState == 状态（0，1，2，3，4）
0：请求未初始化，还没有调用 open()。
1：请求已经建立，但是还没有发送，还没有调用 send()。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。
4：响应已完成；您可以获取并使用服务器的响应了。
方法XHR.status常见的几种状态
XHR.status == 200，300，404 等
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——成功
201——提示知道新文件的URL
300——请求的资源可在多处得到
301——删除请求数据
404——没有发现文件、查询或URl
500——服务器产生内部错误
index.php
<script type="text/javascript" src="ajax.js"></script>
<a href="#" onclick="funphp100('o')">o</a>
<a href="#" onclick="funphp100('t')">t</a>
<a href="#" onclick="funphp100('x')">x</a>
<br>
<div id="php100"></div>
for.php
<?php
for($i=1;$i<=3;$i++){
echo $i."$id<br>";
sleep(1);
}
?>
上节源文件ajax.js的修改
var xmlHttp;
function S_xmlhttprequest() {
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
} else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function funphp100(url) {
S_xmlhttprequest();
xmlHttp.open("GET","for.php?id="+url,true);
xmlHttp.onreadystatechange = byphp;
xmlHttp.send(null);
}
function byphp() {
if(xmlHttp.readyState == 1) {
document.getElementByIdx_x('php100').innerHTML = "loading....";
}
if(xmlHttp.readyState == 4 ){
if(xmlHttp.status == 200) {
var byphp100 = xmlHttp.responseText;
document.getElementByIdx_x('php100').innerHTML = byphp100;
}
}
}