日期:2014-05-16  浏览次数:20970 次

AJAX学习心得分享----(一)AJAX初识+原生态AJAX

对于做web开发的朋友一定对Ajax这个名字一点也不陌生,那么Ajax到底是个什么呢?先从字面上进行解释。所谓的Ajax即是Asynchronous JavaScript + XML的简写,事实上,它是用Javascript来进行绑定和调用,通过使用XMLHttpRequest同服务器进行异步通信,用Dom模型来交互、动态的显示,最后再用CSS+XHTML来进行表示,通过这一些列技术的综合运用为用户提供良好的用户体验的一种技术

还是延续以往的作风吧,通过一个小的登录示例给大家先初步的讲解一下Ajax的具体应用。

该示例主要是用来模拟一个用户登录。

新建一个html页布局如下:

<body>

<table style="background-color:lightblue; margin-top:300px; margin-left:300px">

<tr>

<td><label>姓名:</label>

</td>

<td>

<input id="txtname" type="text" />

</td>

</tr>

<tr><td><label>密码:</label></td>

<td>

<input id="txtpwd" type="password" /></td></tr>

<tr><td>

<input id="btndl" type="button" value="登录" onclick="SayHello()" /></td>

<td>

<input id="btnqx" type="button" value="取消" /></td></tr>

</table>

</body>

如图:

然后在<head></head>里边添加如下的两个函数(该函数必须包含在<script></script>中):

<script type="text/javascript">

var xmlhttp = false;//全局xmlhttp对象

//作用:创建HttpRequest对象,该对象是Ajax的核心

function CreatHttpRequest() {

try {

xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");//新版本的IE创建IE兼容对象

} catch (e) {

try {

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//使用旧版本的IE创建IE兼容对象

} cat