AJAX（Asynchronous JavaScript and XML）即异步的JavaScript与XML技术，指的是一套综合了多项技术的浏览器端网页开发技术。其实就是为了解决传统页面同步刷新，消耗过多带宽，用户界面效果不友好等问题提出的。而综合多项技术指的是：

运用XHTML+CSS来表达信息；

运用JavaScript操作DOM（DocumentObject Model）来运行动态效果；

运用XML和XSLT操作数据

运用XMLHttpRequest为Agent与网页服务器进行异步数据交换；

运用JavaScript技术来实现。

这篇博客从AJAX的基础XMLHttpRequest对象，微软提供的AJAX技术框架，和开源AJAXControlToolKit开发工具来初步了解！

一，XMLHttpRequest对象:

而XMLHttpRequest是AJAX的基础，可以提供不重新加载页面的情况下更新网页，在页面加载后在客户端向服务器请求数据，在页面加载后在服务器端接受数据，在后台向客户端发送数据。XMLHttpRequest对象提供了对 HTTP协议的完全的访问，包括做出 POST和 HEAD请求以及普通的GET请求的能力。XMLHttpRequest可以同步或异步返回 Web服务器的响应，并且能以文本或者一个 DOM文档形式返回内容。

XMLHttpRequest对象的出现分割了同步和异步。XMLHttpRequest出现之前是同步的，出现之后是异步的。

同步：页面请求实时传给服务器，导致必填数据没有填的时候，要回到页面上重新从头填写，耗时长、客户体验差。

异步：在页面必填项写上必填选项，不用通过传给服务器判断必填内容是否已经填写完整，耗时短、用户体验强。

1,创建：所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6使用 ActiveXObject），这也是我们实现异步更新的根本，下边看一下创建XMLHttpRequest对象：

  1. var xmlhttp;
  2. f (window.XMLHttpRequest)
  3. {// code for IE7+, Firefox, Chrome, Opera, Safari
  4. xmlhttp=new XMLHttpRequest();
  5. }
  6. lse
  7. {// code for IE6, IE5
  8. xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  9. }

2,请求服务器：创建了，客户端如何向服务器发送请求呢？利用XMLHttpRequest对象的open()和send()方法：

例如：

  1. xmlhttp.open("GET","test1.txt",true);
  2. xmlhttp.send();

3,响应： 而请求了，客户端该如何响应服务器呢？利用XMLhttpRequest对象的ResponseText（获得字符串形式的响应数据）或ResponseXML（获得XML形式的响应数据）属性。例如：

ResponseText:

  1. document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

ResponseXML:(这个例子稍微大一些，上下都涉及到了)

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function loadXMLDoc()
  5. {
  6. var xmlhttp;
  7. var txt,x,i;
  8. <%--创建XMLHttpRequest对象--%>
  9. if (window.XMLHttpRequest)
  10. {// code for IE7+, Firefox, Chrome, Opera, Safari
  11. xmlhttp=new XMLHttpRequest();
  12. }
  13. else
  14. {// code for IE6, IE5
  15. xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  16. }
  17. xmlhttp.onreadystatechange=function()
  18. {
  19. if (xmlhttp.readyState==4 && xmlhttp.status==200)
  20. {
  21. xmlDoc=xmlhttp.responseXML;
  22. txt="";
  23. x=xmlDoc.getElementsByTagName("title");
  24. for (i=0;i<x.length;i++)
  25. {
  26. txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  27. }
  28. document.getElementById("myDiv").innerHTML=txt;<%--//将获取的数据显示到指定的位置--%>
  29. }
  30. }
  31. xmlhttp.open("GET","/example/xmle/books.xml",true);<%--//请求打开XML文件books.--%>
  32. xmlhttp.send();<%--//发送请求--%>
  33. }
  34. </script>
  35. </head>
  36. <body>
  37. <h2>My Book Collection:</h2>
  38. <div id="myDiv"></div>
  39. <button type="button" onclick="loadXMLDoc()">获得我的图书收藏列表</button>
  40. </body>
  41. </html>

二，微软AJAX技术框架：上边是对XMLHttpRequest简单的了解，也是学习AJAX最基础的知识。在这里我还想提一下，微软为了方便用户使用，在asp.net平台中提供了AJAX扩展：

利用这些控件我们能够很方便快捷的实现很多异步通信的，而对于这些控件具体属性，方法的会在后边学习中提到！

三，  AJAX ControlToolKit扩展包：AJAX ControlToolKit是由开源社区向广大ASP.NET开发者奉献的一组Web控件，基本涵盖了Web页面开发最需要使用的功能，使用方便。AJAX ControlToolKit建构于微软AJAXExtension之上，充分展示了AJAX技术的强大威力。下载位置：http://www.asp.net/ajax ，安装过程：http://blog.csdn.net/seapen/article/details/8538282  对于具体使用，还需要后边的学习中实践。

AJAX初步学习的更多相关文章

  1. [置顶] Ajax 初步学习总结

    Ajax是什么 Ajax是(Asynchronous JavaScript And XML)是异步的JavaScript和xml.也就是异步请求更新技术.Ajax是一种对现有技术的一种新的应用,不是一 ...

  2. Ajax 初步学习总结

    Ajax是什么 Ajax是(Asynchronous JavaScript And XML)是异步的JavaScript和xml.也就是异步请求更新技术.Ajax是一种对现有技术的一种新的应用,不是一 ...

  3. 状态保持以及AJAX的初步学习

    嘿嘿,今天学习的有点迷茫哦,主要学习把验证码使用在登录页面时间的一些逻辑,学习这个时间并没有那么的迷惑哦,可是自己写程序时间倒是有点反应迟钝,不过还好总是在最后搞清楚啦,另外就是一步一步的学习是接近项 ...

  4. 第十九篇 jQuery初步学习

    jQuery 初步学习   jQuery可以理解为是一种脚本,需要到网上下载,它是一个文件,后缀当然是js的文件,它里面封装了很多函数方法,我们直接调用即可,就比方说,我们用JS,写一个显示与隐藏,通 ...

  5. ajax基础学习

    AJAX即"Asynchronous JavaScript and XML",意思是异步JavaScript和XML,是指一种创建交互式网页的网页开发技术. 虽然现在很少有人去自己 ...

  6. json2.js的初步学习与了解

    json2.js的初步学习与了解,想要学习json的朋友可以参考下. json2.js的初步学习与了解 1.)该js的下载地址是:http://www.json.org/json2.js 2.)在页面 ...

  7. 老周的ABP框架系列教程 -》　一、框架理论初步学习

    老周的ABP框架系列教程 -- 一.框架理论初步学习   1. ABP框架的来源与作用简介 1.1  简介 1.1.1       ABP框架全称为"ASP.NET Boilerplate ...

  8. 初步学习nodejs，业余用node写个一个自动创建目录和文件的小脚本，希望对需要的人有所帮助

    初步学习nodejs,业余用node写个一个自动创建目录和文件的小脚本,希望对需要的人有所帮助,如果有bug或者更好的优化方案,也请批评与指正,谢谢,代码如下: var fs = require('f ...

  9. EF Codefirst 初步学习（二）—— 程序管理命令 更新数据库

    前提:搭建成功codefirst相关代码,参见EF Codefirst  初步学习(一)--设置codefirst开发模式 具体需要注意点如下: 1.确保实体类库程序生成成功 2.确保实体表类库不缺少 ...

随机推荐

  1. Jhipster 学习（一）jhipster构建项目

    如何安装jhipster 第一步:下载jdk  自己安装的1.8版本  (安装.环境变量配置略) 第二步:1.下载Eclipse (luna版 eclipse-4.4.1) 第三步:下载maven ( ...

  2. Mysql创建索引

    1．索引作用 在索引列上,除了上面提到的有序查找之外,数据库利用各种各样的快速定位技术,能够大大提高查询效率.特别是当数据量非常大,查询涉及多个表时,使用索引往往能使查询速度加快成千上万倍. 例如,有 ...

  3. 浏览器调试js

    在Google Chrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因为FireFox有强大的Firebug,对于前端开发可谓神器. 在Chrome出来的时候,我 ...

  4. UML图中类之间的关系

    类图中的关系大致一下几种 l 泛化 l 关联 l 依赖 l 组合 l 聚合 泛化 泛化是子集和超集的关系,常使用继承和实现来表示: 继承:子类到超类的实线和空心三角箭头表示 实现:子类到超类的虚线和空 ...

  5. 只需几分钟跟小猫学前端（内含视频教程）：nodejs基础之用express、ejs、mongdb建设简单的网站

    开门见山视频教程 https://v.qq.com/x/page/d0645s79xrq.html 前 言: 这是小猫的第二篇node教程,第一篇教程是一个简单的试水,小猫的node教程面向对象为没有 ...

  6. 关于国际化时报org.springframework.context.NoSuchMessageException错，具体到No message found under code '你的键名' for locale 'zh_CN'.的解决方案

    使用IntelliJ IDEA开发工具解决方案: 总结原因,解决方案: 1,在使用messageSource.getMessage方法时,参数1的键名跟属性文件中键名不一致,比如Controller中 ...

  7. HashMap在高并发下如果没有处理线程安全会有怎样的安全隐患，具体表现是什么

    Hashmap在并发环境下,可能出现的问题: 1.多线程put时可能会导致get无限循环,具体表现为CPU使用率100%: 原因:在向HashMap put元素时,会检查HashMap的容量是否足够, ...

  8. Python 30分钟入门指南

    Python 30分钟入门指南 为什么 OIer 要学 Python? Python 语言特性简洁明了,使用 Python 写测试数据生成器和对拍器,比编写 C++ 事半功倍. Python 学习成本 ...

  9. JAVA中Sql时间格式与util时间格式转换

    关于时间格式转化: java.util.Date 与 java.sql.Date 互换 sql是子类 字符串转化成java.util.Date     SimpleDateFormat date =n ...

  10. php中获取用户登陆的IP地址以及常规处理

    本文为原创,转载请注明!  在我们开发多站点业务网站中,经常需要获取客户端的ip地址来给用户推荐其所在地址的信息的业务,用php获取客户端的ip地址,我们一般用到的PHP内置方法是$_SERVER[' ...