AJAX

概念:
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScriptXML标准通用标记语言的子集)。
AJAX 是一种用于创建快速动态网页的技术。
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。

小结:

ajax技术( 异步请求 )

局部无刷新技术: ajax技术 不需要 刷新页面 就能得到 服务器的结果,所以增强了体验。

请求: 发送一次网络连接。

目的: 是为了获取服务器的数据。

get, post就是发送请求----->刷新页面---->体验性不好( 网速慢的情况下: 有等待的时间,页面会有短暂的空白 )。

 

举例说明:使用ajax技术获取txt文件里面的内容。

1.新建ajax.html文件。代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>初识ajax</title>
    <script>
        window.onload = function(){
            var oBtn = document.querySelector("input");
            oBtn.onclick = function(){
            
                //第一步:要使用ajax技术, 必须要判断,获取浏览器的ajax对象
                //通过浏览器内置的XMLHttpRequest 就可以得到ajax对象
                var xhr = new XMLHttpRequest();

                //onreadystatechange: 监听服务器数据变化
                xhr.onreadystatechange = function(){
                    //通过xhr对象的属性 readyState的值 就可以判断出来
                    /*
                        1:相当于  xhr.open
                        2: 相当于  xhr.send
                        3: 接收到服务器的部分数据
                        4: 接受到服务端的完整数据
                    */
                    // alert( xhr.readyState );
                    if( xhr.readyState == 4 ){
                        // alert( xhr.responseText );
                        document.querySelector("div").innerHTML = xhr.responseText;
                    }
                }

                //第二步: 打开请求
                //open( 打开请求的方式, 请求的地址, true )
                xhr.open( 'GET', 'data.txt', true );

                //第三步: 发送请求
                //send使用发送数据的,GET方式一般发送null, 因为get方式的数据是通过url地址传递的
                xhr.send( null );
            }
        }
    </script>
</head>
<body>
   <input type="button" value="读取数据"> 
   <div></div>
</body>
</html>

 

2.新建data.txt文件。(文件内容如下)

hello world

 

3.运行ajax.html文件。(注意:①运行此文件需电脑安装phpStudy软件并启动服务(如下图1)。②ajax.html文件和data.txt文件需放在同一目录下(如图2)。③在浏览器地址栏运行此文件(文件地址要正确,如图3))

 

4.点击"读取数据"按钮,输出data.txt文件里面的hello world。

 

 

                       

 

 

posted @ 2017-08-05 14:44 Tom_Lo 阅读(...) 评论(...) 编辑 收藏