您现在的位置:首页 >> 前端 >> 内容

Ajax-note

时间:2017/3/2 10:00:00 点击:

  核心提示:Ajax技术:允许浏览器与服务器通信而无需刷新当前页面的技术①在Web传统模型中,客户端向服务器发送一个请求,服务器返回整个页面,如此反复;②在Ajax模型中,数据在客户端与服务器之间独立传输,服务器...

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>

 

Tags:AJ JA AX XN 
作者:网络 来源:My_Tidy_Li