AJAX快速上手

创建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;

}

}

 

 

}