jQuery 对Ajax的支持——从Ajax基本实现到jQuery对Ajax的封装

jQuery对Ajax的支持

在学习这块之前先得了解下Ajax。

一、Ajax

——Asynchronous JavaScript And XML

Ajax不是一种框架，而是多种技术组合而成的一种整体。主要用于异步更新网页内容。通过与后台的数据交换，Ajax可以只更新网页的部分内容而不会重新加载整个页面。

在学习jQuery对Ajax的支持之前，先了解下Ajax的原始实现。

结合代码说明起来比较方便：

ajaxtest.html:

<!DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>垂直居中</title>
 
<scriptsrc="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<scriptsrc="js/tempjs.js"></script>
<script>
 
functionajaxTest(id){
   //步骤一
   var xmlhttp = new XMLHttpRequest();
   //步骤二
   xmlhttp.onreadystatechange = function(){
      if(xmlhttp.readyState==4 &&xmlhttp.status==200){
         $(id).html(xmlhttp.responseText);
      }
   }
   //步骤三
   xmlhttp.open("GET","ajax/test.txt",true);
   xmlhttp.send();
}
</script>
 
<styletype="text/css">
#div_parent{
margin:100px50px 0px 50px;border:2px solid black;height:400px;border-radius:15px;
}
#div_child{
height:60px;width:130px;border:2pxsolid black;border-radius:15px;margin:0px auto;
}
</style>
</head>
<body>
<divid="div_parent" >
<buttononclick="ajaxTest('#div_child')">change</button>
<divid="div_child" >
<p>changetext</p>
</div>
</div>
</body>
</html>

按下按钮将会调用"ajax/test.txt"中的内容，原内容将被修改。

实现Ajax有几个步骤：

1、获取XMLHttpRequest对象(如果是上古时代的浏览器，如ie5，则应该获取ActiveXObject，这里不讨论它)。

var xmlhttp =new XMLHttpRequest();

2、为XMLHttpRequest对象配置属性

XMLHttpRequest对象一共有三个属性： onreadystatechange(全小写 )、 readyState、 status

更多相关文章

随机推荐