AJAX学习
-
概念
- AJAX简称Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),首先AJAX不是一门新的编程语言,只是一种现有的新的标准方法,最大的优点就是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分页面内容。
- 工作原理
- 相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。
- 创建AJAX实例步骤
- 加载org.json.jar文件
- 创建输入页面以接收任何文本或数字
- 创建服务器端页面以处理请求
- 在web.xml文件中提供条目
- XHR创建对象
-
XMLHttpRequest 对象可以在不向服务器提交整个页面的情况下,实现局部更新网页。用于客户端和服务器之间的异步通信。主要执行以下操作
- 1在后台从客户端发送数据
- 2 从服务器接受数据
- 3 更新网页不需要加载
-
创建XMLHttpRequest对象
-所有的现代浏览器(IE7+、Firefox、Chorme…)都内建 XMLHttpRequest 对象。var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
-
XMLHttpRequest对象的属性
-
XMLHttpRequest对象的方法
-
- XHR 请求
- 原理
1.用户从UI发送请求,JavaScript中调用XMLHttpRequest对象。
2.HTTP请求由XMLHttpRequest对象发送到服务器。
3.服务器使用JSP,PHP,Servlet,ASP.net等与数据库交互。
4.检索数据。
5.服务器将XML数据或JSON数据发送到XMLHttpRequest回调函数。
6.HTML和CSS数据显示在浏览器上。 - 向服务器发送请求
- 页面全部加载完毕后,客户端会通过 XMLHttpRequest 对象向服务器请求数据,服务器端接受数据并处理后,向客户端反馈数据。将请求发送到服务器,使用 XMLHttpRequest 对象的open()和send()方法:
xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send();
- async=“true(false)”: XMLHttpRequest 对象如果要用于 AJAX 的话,其open()方法的sync参数必须设置为 true, 通过 AJAX,JavaScript 无需等待服务器的响应,而是在等待服务器响应时执行其他脚本,然后当响应就绪后对响应进行处理。
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax_info.txt",true);//当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数 xmlhttp.send();
xmlhttp.open("GET","test1.txt",false);//不推荐使用 async=false,但是对于一些小型的请求,也是可以的。
- 页面全部加载完毕后,客户端会通过 XMLHttpRequest 对象向服务器请求数据,服务器端接受数据并处理后,向客户端反馈数据。将请求发送到服务器,使用 XMLHttpRequest 对象的open()和send()方法:
- XHR 响应
- 状态行
xhr.status状态码,如200,304,404等; - 响应主体
xhr.responseText与xhr.responseXML都表示响应主体。
responseText: 获得字符串形式的响应数据。
responseXML: 获得 XML 形式的响应数据。xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br>"; } document.getElementById("myDiv").innerHTML=txt;
- XHR readyState
- 当发送一个请求后,客户端需要确定这个请求什么时候会完成,XMLHttpRequest对象提供了onreadystatechange事件机制来捕获请求的状态,实现响应。每当readyState改变时,就会触发onreadystatechange事件。readyState属性存有 XMLHttpRequest 的状态信息。
- 0:请求未初始化
确认XMLHttpRequest对象是否创建,并为调用open()方法进行未初始化作好准备,值为0表示对象已经存在,否则浏览器会报错:对象不存在。 - 1:服务器连接已建立
对XMLHttpRequest对象进行初始化,即调用open()方法,根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。 - 2:请求已接收
接收服务器端的响应数据。但获得的还只是服务端响应的原始数据,并不能直接在客户端使用。值为2表示已经接收完全部响应数据,并为下一阶段对数据解析作好准备。 - 3:请求处理中
解析接收到的服务器端响应数据即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody,responseText或responseXML的属性存取的格式,为在客户端调用作好准备。状态3表示正在解析数据。 - 3:请求已完成,且响应已就绪
确认全部数据都已经解析为客户端可用的格式,解析已经完成。值为4表示数据解析完毕,可以通过的XMLHttpRequest对象的属性取得数据。
- XHR readyState
- 状态行
- 原理
-
总结
- AJAX主要的用处就是局部刷新,而且是异步的这样的话就会高效很多,与原来的请求的话原理也差不多,只不过这个是局部刷新而已。