Ajax-note

来源：互联网发布：时时彩搭建源码编辑：程序博客网时间：2024/06/06 00:23

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>

1 0