• 专注于网站建设,网络推广,关键词优化,SEO优化,专业的网站建设开发团队!

叶景网络之Ajax学习笔记

2015-06-13 17:29:36   来源:叶景网络

Ajax (Asynchronous JavaScript and XML)

学习Ajax之前必须要有JavaScript和DOM的基础

一、Ajax的介绍和优点

Ajax应用:1. 局部刷新 2. 按需取数据(Ajax采用是异步交互过程)
Ajax的优缺点:

 1.浏览器的兼容性比较麻烦

 2.后退功能失效(可以做缓存)

 3.对流媒体,手机PDA的支持不好
 

二、创建Ajax对象, 这是学习Ajax的第一步

 var request=new XMLHttpRequest();
    var d=new Date();

 创建对象过程比较复杂一点,但这些代码是固定的

 将创建XMLHttpRequest对象的过程写到一个函数中

 主要是把浏览器分成两种

 (1)是IE系列的浏览器(IE5.0 IE5.5 IE6.0, IE7 IE8)

 (2)是非IE浏览器(都是按W3C标准) FF Mozilla NetScape


三、使用Ajax请求服务器

四、通过Ajax获取服务器发送的数据

五、创建Ajax类简化Ajax的使用

六、Ajax的实例制作(唯一校验和无刷新分页)


new ActiveXObject("Microsoft.XMLHTTP");
new ActiveXObject("MSXML.XMLHTTP");
new ActiveXObject("'Msxml2.XMLHTTP.7.0'");
....

['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP']

Ajax引擎对象中的方法

abort()     停止当前请求

getAllResponseHeaders()   作为字符串返回完整的headers

getResponseHeader("headerLabel") 作为字符串返回单个的header标签

open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 设置未决的请求的目标 URL,方法,和其他参数

send(content)    发送请求

setRequestHeader("label", "value") 设置header并和请求一起发送


Ajax引擎对象中的属性

onreadystatechange 状态改变的事件触发器

readyState  对象状态(integer):

         0 = 未初始化 1 = 读取中 2 = 已读取 3 = 交互中 4 = 完成

responseText  服务器进程返回数据的文本版本

responseXML  服务器进程返回数据的兼容DOM的XML文档对象

status   服务器返回的状态码, 如:404 = "文件未找到" 、200 ="成功"

statusText  服务器返回的状态文本信息


//---------------------------------------------------------
 一个ajax对象ajax.js
//---------------------------------------------------------
function Ajax(recvType){
 var aj=new Object();
 aj.recvType=recvType ? recvType.toUpperCase() : 'HTML' //HTML XML
 aj.targetUrl='';
 aj.sendString='';
 aj.resultHandle=null;
 aj.createXMLHttpRequest=function(){
  var request=false; 
  //window对象中有XMLHttpRequest存在就是非IE,包括(IE7,IE8)
  if(window.XMLHttpRequest){
   request=new XMLHttpRequest();

   if(request.overrideMimeType){
    request.overrideMimeType("text/xml");
   }
  //window对象中有ActiveXObject属性存在就是IE
  }else if(window.ActiveXObject){
   
   var versions=['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];

   for(var i=0; i<versions.length; i++){
     try{
      request=new ActiveXObject(versions[i]);

      if(request){
       return request;
      }
     }catch(e){
      request=false;
     }
   }
  }
  return request;
 }
 aj.XMLHttpRequest=aj.createXMLHttpRequest();

 aj.processHandle=function(){
  if(aj.XMLHttpRequest.readyState == 4){
   if(aj.XMLHttpRequest.status == 200){
    if(aj.recvType=="HTML")
     aj.resultHandle(aj.XMLHttpRequest.responseText);
    else if(aj.recvType=="XML")
     aj.resultHandle(aj.XMLHttpRequest.responseXML);
   }
  }
 }
 aj.get=function(targetUrl, resultHandle){
  aj.targetUrl=targetUrl; 
  
  if(resultHandle!=null){
   aj.XMLHttpRequest.onreadystatechange=aj.processHandle; 
   aj.resultHandle=resultHandle; 
  }
  if(window.XMLHttpRequest){
   aj.XMLHttpRequest.open("get", aj.targetUrl);
   aj.XMLHttpRequest.send(null);
  }else{
   aj.XMLHttpRequest.open("get", aj.targetUrl, true);
   aj.XMLHttpRequest.send();
  }
  
 }
 aj.post=function(targetUrl, sendString, resultHandle){
  aj.targetUrl=targetUrl;

  if(typeof(sendString)=="object"){
   var str="";
   for(var pro in sendString){
    str+=pro+"="+sendString[pro]+"&"; 
   }
   aj.sendString=str.substr(0, str.length-1);
  }else{
   aj.sendString=sendString;
  }

  if(resultHandle!=null){
   aj.XMLHttpRequest.onreadystatechange=aj.processHandle; 
   aj.resultHandle=resultHandle; 
  }

  aj.XMLHttpRequest.open("post", targetUrl);
  aj.XMLHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  aj.XMLHttpRequest.send(aj.sendString); 
 }
 return aj;
}
//-------------------------------------------------------
  注册无刷新验证login.html
//-------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登录界面</title>
<style type="text/css">
 span{ font-size:12px; font-weight:500; margin-left:20px;}
</style>
<script src="ajax.js"></script>
<script>
function show(username){
 if(username==""){
  /*alert("用户名不能为空!");*/
  document.getElementById("userid").innerHTML="<font color='red'>用户名不能为空!</font>";
  return;
 }
 var ajax=Ajax();
 var userobj=document.getElementById("userid");
 ajax.post("form.php", {username:username}, function(data){
   userobj.innerHTML=data;
  });
 }
function showpw(password){
 if(password==""){
  document.getElementById("passwordid").innerHTML="<font color='red'>密码不能为空!</font>";
  return;
 }else if(password.length<6){
  document.getElementById("passwordid").innerHTML="<font color='red'>密码长度不能少于6位!</font>";
 }else{
  document.getElementById("passwordid").innerHTML="<font color='green'>可以使用!</font>";
 }
}
</script>
</head>

<body>
<form action="reg.php" method="post">
 username: <input type="text" onblur="show(this.value)" name="username"><span id="userid"></span><br>
 password: <input type="password" onblur="showpw(this.value)"><span id="passwordid"></span><br>
 <input type="submit" value="登录">
</form> 
</body>
</html>
//-------------------------------------------------------
 服务端PHP处理程序form.php
//-------------------------------------------------------

<?php
 header("Content-Type:text/html;charset=utf-8");

 $mysqli=new mysqli("localhost", "root", "", "ajax");

 $result=$mysqli->query("select * from user where username='{$_POST["username"]}'");

 if($result->num_rows > 0){
  echo "<font color='red'>用户名{$_POST["username"]}已经存在,不能使用</font>";
  exit();
 }else{
   echo "<font color='green'>用户名{$_POST["username"]}可以使用</font>";
 }
?>

叶景网络,网络推广,网站建设
特别推荐RECOMMEND
搜索引擎网站关键词seo优化的意义
视频推广怎么做
网站seo优化怎么做关键词排上首页?
SEO介绍什么叫搜索引擎网站关键词优化
seo优化怎样做提升关键词排名
热点图文Hot
没有加www域名打不开的解决方案 没有加www域名打不
叶景网络之CodeIgniter框架的学习 叶景网络之CodeIgni
叶景网络之Ajax学习笔记 叶景网络之Ajax学习
叶景网络之DIV+CSS学习笔记 叶景网络之DIV+CSS
关注排行RANKING
1

没有加www域名打不开的解决方案

没有加www域名打不开的解决方案 网站上线了,在做SEO时发现没带www的时候访问不了,是以前的域名绑定时没做好,这对se...

2

叶景网络之CodeIgniter框架的学习

叶景网络之CodeIgniter框架的学习 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网站建...

3

叶景网络之Ajax学习笔记

叶景网络之Ajax学习笔记 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网站建...

4

叶景网络之DIV+CSS学习笔记

叶景网络之DIV+CSS学习笔记 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网站建设...

5

叶景网络之SQL注入与安全学习笔记

叶景网络之SQL注入与安全学习笔记 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网站建...

6

叶景网络之Mysql常用命令学习笔记

叶景网络之Mysql常用命令学习笔记 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网站建...

7

叶景网络之Mysql优化的学习笔记

叶景网络之Mysql优化的学习笔记 通俗地理解三个范式,对于数据库设计大有好处。 第一范式:1NF是对属性的原子性...

8

叶景网络之Gvim编辑器的学习笔记

叶景网络之Gvim编辑器的学习笔记 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...

9

叶景网络之memcached 学习笔记

叶景网络之memcached 学习笔记 memcached 是一个高效的分布式的内存对象系统,他可以支持把各种php的数据放入...