1 Ajax是什么
1.1 Asynchronous JavaScript and XML(异步的javascript和xml)
实质为:使用浏览器内置的一个对象(XmlHttpRequest)向服务器发送请求,服务器返回xml数据或文本数据给浏览器,然后在浏览器端,使用这些数据更新部分页面,在整个过程中,页面无任何刷新。
1.2 传统的等待—响应—等待
在传统的web应用中,比如注册,用户填写整个注册表单后提交,此时浏览器会将整个注册页面抛弃,等待服务器返回一个新的完整的页面。在等待过程中,用户不能够做其他操作。服务器生成新的页面发送给浏览器,浏览器需要重新解析这个页面生成相应的页面。
1.3 图示
① Ajax引擎(即XmlHttpRequest对象),首先为该对象注册一个监听器(该监听器是一个事件处理函数,对状态改变事件(readyStatechange)进行监听)
② 当用户对GUI做了某种操作(将产生对应的事件,如焦点失去事件等)
③ 一旦产生对应的事件,将触发事件处理代码
④ 在执行事件处理代码时,会调用Ajax引擎(XmlHttpRequest对象)
⑤ 发送请求:Ajax引擎被调用后,将独自向服务器发送请求(独立于浏览器之外)
继续其他操作:在Ajax引擎发送请求的同时,用户在浏览器还可以对GUI继续做其他操作,该请求是异步请求(Ajax引擎发送请求时,没有打断用户的操作)
⑥ 服务器的web组件对请求进行处理
⑦ 服务器可能会调用到数据库或者处理业务逻辑的Java类
⑧ 服务器将处理结果响应给(只返回部分数据,可以是xml或者文本)Ajax引擎
⑨ 监听器通过Ajax引擎获取响应数据(xml或者文本)
⑩ 监听器对GUI中的数据进行更新(局部更新,不是整个页面刷新)
整个过程中大部分是通过JS实现的,响应数据可能是xml,所以Ajax可以看做是多种技术的融合。
2 Ajax编程
第一步 获得XmlHttpRequest对象
该对象由浏览器提供,但是该类型并没有标准化。
ie和其他浏览器不同,其他浏览器都支持该类型,而ie不支持。
function getXmlHttpRequest(){ var xhr = null; if((typeof XMLHttpRequest) != 'undefined'){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiceXObject(Microsoft.XMLHttp); } return xhr; }
第二步 使用XmlHttpRequest向服务器发请求
a. 发送get请求
function change(v1) { var xhr = getXmlHttpRequest(); /*open(请求方式,请求地址,同步/异步) 请求方式:get/post 请求地址:如果是get请求,请求参数添加到地址之后 比如 get_comments.do?name=QQ 同步/异步:true表示异步 */ xhr.open("get", encodeURI("get_comments.do?name=" + v1), true); /*注册一个监听器(即当xhr的状态发生改变产生了readystatechange事件, 该事件会由一个函数f1来进行处理,这个函数里需要获得服务器返回的数据, 然后更新页面) */ xhr.onreadystatechange = f1; /*只有调用send方法之后,请求才会真正发送*/ xhr.send(null); }
b. 发送post请求
function change2(v1){ var xhr = getXmlHttpRequest(); xhr.open("post","get_comments.do",true); //必须添加一个消息头 content-type xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.onreadystatechange = f1; xhr.send("name=" + v1); }
第三步 在服务器端处理请求
第四步 在监听器当中,处理服务器返回的响应
xhr.onreadystatechange = f1; function f1(){ if(xhr.readyState == 4){ var txt = xhr.responseText; document.getElementById("d1").innerHTML = txt; } }
或者
xhr.onreadystatechange =function(){ //编写相应的处理代码 if(xhr.readyState == 4){ //只有readyState等于4,xhr才完整地接收到了服务器返回的数据 //获得文本数据 var txt = xhr.responseText; //获得一个xml dom 对象 var xml = xhr.responseXML; //dom操作 更新页面 document.getElementById("d1").innerHTML = txt; } }
关于Ajax的其他应用,可以参考网盘文件。
(1)关于get请求中,ie浏览器的缓存功能,使得并非每一次触发事件都发起请求的问题的解决
(2)关于get请求和post请求中,包含中文时的编码问题解决等。