随着互联网的发展,交互式的程序,现在越来越多的从C/S专项B/S ,也就是浏览器代替了客户端,这里面就有一个问题,如果我用户的请求很多,难道每一个请求都要进行一次完全刷新才能得到我想要的吗?No,当然不是。这里就要用到好用,众多浏览器支持的AJAX来解决这个问题。
概念
AJAX(AsynchronousJavaScript
and XML ),就是异步js和XML,它不属于新技术,更准确的来说是多种技术的融合,比如CSS、HTML、DOM、JS、XML。
CSS+HTML——网页的标准化;
DOM——动态修改文档的内容和结构;
XML——配置文件,进行数据的交换和处理;
JavaScript——简称JS,绑定上面的技术,使其可以协同工作,一会要讲其中一个非常重要的方法XMLHttpRequest。
如果不用和使用异步操作会怎样?
举个例子:
去图书馆借书,但是你想借的书已经被借出,你就有两种选择:
一种是,一直等待,直到书还了,你再借(相当于用户请求,完全刷新,相当于不用异步操作);
另一种,在图书馆预约,如果有还书,就通知你来借书,同时还可以继续借其他的书(用户请求,服务端进行响应,同时仍然接受用户的其他请求,使用了异步操作)。
利用AJAX最大的目标就是实现解决B/S中浏览器和服务器刷新,缺乏交互性的问题。。以下是AJAX实现交互的流程:
从图中可以看到分为客户端和服务端,用户触发一个事件,创建一个XMLHttpRequest对象,对象向服务端发送请求,请求发出后继续响应用户的其他请求,当服务端接受到请求后,执行返回结果。客户端调用callback()方法,对响应数据进行处理。
核心技术——XMLHttpRequest
要想实现异步操作,XMLHttpReuest是关键。了解一下它。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
XMLHttpRequest是在IE5的时候引进的,它可以实现异步操作,也就是我用这个对象向服务器提出请求和对响应结果进行处理,而且用户仍然可以照常操作,就达到了不完全刷新的效果。
创建XMLHttpRequest 对象
虽然很多浏览器都支持XHR对象,但是各个浏览器也有不同,主要是IE和其他浏览器的区别啦。。
为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :
<span style="font-size:18px;">var xmlhttp; function createXMLHttpRequest(){ if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } }</span>
解析:先声明一个全局变量xmlhttp,用来存放XHR对象,在createXMLHttpRequest()方法中完成创建过程,根据判断语句知道,如果window.XmlHttpRequest调用返回True,则是实例化一个XMLHttpRequest对象。否则,就证明是IE浏览器,那就通过传递“Microsoft.XMLHTTP”给ActiveObject()来创建XMLHttpRequest对象。。。
向服务器发送请求
向服务器发送请求使用XMLHttpRequest对象的Open()和send()方法。
例子:
<span style="font-size:18px;"><span style="font-size:18px;">xmlhttp.open("GET","test1.txt",true); xmlhttp.send();</span></span>
open(method,url,async)——规定请求的类型、URL 以及是否异步处理请求。
- method:请求的类型;GET 或 POST;
POST在一下三种情况下使用:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
GET比POST简单快速,除了上述三种情况,基本上都可以使用。
- url:文件在服务器上的位置;
- async:true(异步)或 false(同步);
send(string)——将请求发送到服务端
- string:仅用于 POST 请求
利用DOM对服务器响应进行处理
我们利用回调函数进行处理服务器响应的信息,我们要实现异步的效果就是,在服务器响应之后,要让页面无缝更新(不会出现像我们点刷新的时候,而整个页面重新执行),前面说到DOM这个文档对象模型就可以实现动态的对数据进行处理和交换。DOM对象把页面抽象成一个树型结构,它可以对其进行遍历和编辑等,并且将服务器的返回信息更新到相应的结点上,这样用户提交一个请求,根本就感觉不到已经刷新了页面或者刷新了部分页面。
学习完了以上的XHR原理,基本上就知道了是如何实现客户端和服务器异步操作的了。本篇偏向理论性,一个技术的掌握还需要多多实现,下一篇就是对AJAX进行一下练习。。