首页 > 代码库 > AJAX快速上手

AJAX快速上手

2024-07-09 00:23:41   223人阅读

创建XMLHttpRequest对象

xmlHttp = new XMLHttpRequest();
xmlHttp = new ActiveXObject(‘Microsoft.XMLHTTP‘);//IE
 
XMLHttpRequest对象相关方法
打开请求
XMLHttpRequest.open(传递方式,地址,是否异步请求)
准备就绪执行
XMLHttpRequest.onreadystatechange
获取执行结果
XMLHttpRequest.responseText
 
上手小实践
 
//文件名 index.php
<script type="text/javascript" src="http://www.mamicode.com/ajax.js"></script>
<a href="http://www.mamicode.com/#" onclick="funphp100(‘o‘)">o</a>
<a href="http://www.mamicode.com/#" onclick="funphp100(‘t‘)">t</a>
<a href="http://www.mamicode.com/#" 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="http://www.mamicode.com/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=http://www.mamicode.com/‘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="http://www.mamicode.com/ajax.js"></script>
 
 
<a href="http://www.mamicode.com/#" onclick="funphp100(‘o‘)">o</a>
<a href="http://www.mamicode.com/#" onclick="funphp100(‘t‘)">t</a>
<a href="http://www.mamicode.com/#" 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;
}
}
 
 
}


联系
我们