Ajax 技术:允许浏览器与服务器通信而无需刷新当前页面的技术
①在 web 传统模型中,客户端向服务器发送一个请求,服务器返回整个页面,如此反复;
②在 Ajax 模型中,数据在客户端与服务器之间独立传输,服务器不再返回整个页面。
(将请求与页面分离)
Ajax 并不是一种新的技术,而是一些传统技术的组合
服务器端语言:服务器需要向浏览器发送特定信息的能力 XML(可拓展标记语言): 是一种描述数据的格式,Ajax 程序需要某种格式化的格式来在服务器和客户端之间传递信息,XML 是其中一种选择 XHML(可拓展标记语言)和 CSS(级联样式表) : 标准化呈现 DOM 文档对象模型 :动态显示与交互 XMLHttpRequest : 异步数据读取 JavaScript: 绑定和处理所有数据
简单的 helloworld—-ajax
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>
- Insert title here
- </title>
- <script type="text/javascript">
- window.onload = function() { //1.获取a节点,并为其添加一个onclick响应函数 document.getElementsByTagName("a")[0].onclick = function(){ //3.建立一个XMLHttpRequest对象 var request = new XMLHttpRequest(); //4.准备发送的数据 url /*var url = this.href;*/ var url = this.href + "?time=" + new Date(); var method = "GET"; //5.调用XMLHttpRequest对象的open()方法 request.open(method, url); //6.调用XMLHttpRequest对象的send()方法 request.send(null); //7.为XMLHttpRequest对象添加onreadystatechange响应函数 request.onreadystatechange = function(){ alert(request.readyState); //8.判断响应是否完成:XMLHttpRequest对象的readyState属性值为4的时候 if(request.readyState == 4){ //9.再判断响应是否可用:XMLHttpRequest对象status属性值为200 if(request.status == 200 || request.status == 304){ //10.打印响应结果:responseText alert(request.responseText); } } } //2.取消a节点的默认行为 return false; /* * 小结:利用XMLHttpRequest实例与服务器进行通信, * 有以下三个关键部分: * 1).onreadystatechange() 事件处理函数 * 2).open() * 3).send() * ------------------ * onreadystatechange方法 * 该事件处理函数由服务器触发,而不是用户 * XMLHttpRequest对象的readystate属性可以作为服务器与客户端之间通信状态的标志 * readystate属性值的每次改变都会触发readystatechange事件 * * open方法 * 建立请求但是没有发送请求 * open(method,url) method:请求的方式 url:请求发送的地方 * 可以添加一个时间戳在URL参数后面,就能确保URL的唯一性,避免出现浏览器缓存结果 * * --------------------- * readyState表示ajax请求的当前状况 * 值: 0代表还未初始化,没有调用open方法 * 1代表正在加载,open方法已被调用,但是send方法还未被调用 * 2代表加载完毕,send方法已被调用,请求已经开始 * 3代表交互中,服务器正在发送响应 * 4代表完成,响应发送完毕 * * ------------------- * 在XMLHttpRequest中,服务器发送的状态码都保存在status属性中 * 通过将其值与200或304比较,以确保服务器是否发送了一个 成功的响应 * 常用状态码及其含义:404---->>>没有找到页面 403------>>>禁止访问 * 500---->>>内部服务器出错 * 200---->>>一切正常 304----->>>没有被修改 * * ---------------------- * respondseText * XMLHttpRequest的responseText属性包含了从服务器发过来的数据 * (只有当readystate的值为4时才能使用) * */ } }
- </script>
- </head>
- <body>
- <a href="helloAjax.txt">
- helloAjax
- </a>
- </body>
- </html>
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: http://www.92to.com/bangong/2017/03-12/18561999.html