11：AJax课程

最新推荐文章于 2021-07-03 23:49:22 发布

aogouqian7476

最新推荐文章于 2021-07-03 23:49:22 发布

阅读量130

点赞数

文章标签： json javascript php ViewUI

原文链接：http://www.cnblogs.com/windyet/articles/6811156.html

版权

学习ajax之前，必须得安装一些web服务器环境。我使用了xampp。请参考我的php学习部分。

json.org这个网站能够提供不少的资源，比如兼容性问题之类的包。

什么是Ajax：Asynchronous JavaScript and XML（异步JavaScript和XML) ——节省用户操作，时间，提高用户体验，减少数据请求，传输获取数据。

————其实就是不刷新页面的情况下与服务器通讯。用javascript异步操作xml。只能操作xml，进行数据交互（没有操作其他，如dom等。）。

JS是有内置这个ajax对象的。

————比如，你在百度注册的时候，为什么没有知道你的号码存在不存在呢？就是进行了ajax操作。

使用Ajax：使用ajax获取某一文本文件的内容

Ajax过程详解：创建对象XMLHttpRequest()

Date()对象：ActiveXObject(‘Microsoft.XMLHTTP’)

最简单的ajax例子：打开1.txt文件的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        window.onload = function(){
            var oBtn = document.querySelector('#btn');
            oBtn.onclick = function(){
                // 实例化ajax对象
                var xhr = new XMLHttpRequest();
                // 打开所在文件——(提交方式，文件，是否异步)
                xhr.open('get','1.txt',true);
                // 提交到服务器，
                xhr.send();
                // 等待服务器返回内容
                xhr.onreadystatechange = function(){
                    if ( xhr.readyState == 4 ) {
                        if ( xhr.status == 200 ) {
                            alert( xhr.responseText );　　//根据后端返回的值的类型进行不同的操作。
                        } else {
                            alert('出错了,Err：' + xhr.status);
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
    <input id="btn" type="button" name="" value="按钮" />
</body>
</html>

——以上的xhr.open('get','1.txt',true);这时候填true，则后续代码可以执行，填false，后续代码必须等ajax工作完成才可以继续执行。所以说，后面代码需要等前面的，那么就得用同步，填false。后面代码不需要ajax返回的，则填true。一般情况下用异步哦。

——ie6以下没有var xhr = new XMLHttpRequest()，所以要做判断，由于大家都放弃了ie6，不做介绍了。

——readyState : ajax工作状态：

　　　　　　0：（初始化）还没有调用open()方法

　　　　　　1：（载入）已调用send()方法，正在发送请求

　　　　　　2：（载入完成）send()方法完成，已收到全部响应内容

　　　　　　3：（解析）正在解析响应内容4：（完成）响应内容解析完成，可以在客户端调用了

——responseText : ajax请求返回的内容就被存放到这个属性下面，返回的一定是一个字符串，不过是类似于数组或者json，其实不是。

——on readystate change : 当readyState改变的时候触发

——status : 服务器状态，http状态码，比如404

——responseXML：返回XML形式的内容

if(){}else(){}和try(){}catch(){}的区别：if、else错误会报错，并影响后续代码的执行。try、catch错不错都不影响后面代码的执行，并且错误的时候，会返回错误信息。

url长度不能太长，所以一般我们都不采用get方式传递，都采用post方式传递，理论上无限制。post方式是由文件头传递的，所以没有缓存，并且传递的类型也比较多。

如何处理返回的值：

ajax采用responseText ，返回的一定是一个字符串，不过是类似于数组或者json，其实不是。所以得把字符串转成json。转化的方法：采用JSON

JSON下有两个方法：1、stringify=》将数组转化为字符串；2、parse=》将字符串转化为数组/json格式。举例如下：

1、数组转字符串：

var arr = [1,2,3];
alert(JSON.stringify(arr));        //[1,2,3]  字符串类型

2、json转字符串：

var json = {
    'name':'linfneg',
    'age':'32',
}
alert(JSON.stringify(json));        //{'name':'linfneg','age':'32',}  字符串类型

3、字符串转数组：

ar str = '[100,200,300]';        //加了单引号，是个字符串格式
alert(JSON.parse(str));    //100,200,300    object

4、字符串转json：——请注意：以下的字符串需要采用标准格式，也就是键需要采用双引号。

var str2 = '{"name":"linfeng","age":32}';
alert(JSON.parse(str2).name);    //linfeng    object

接下来，演示一下ajax获取数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03</title>
    <script type="text/javascript">
        window.onload = function(){
            var oBtn = document.querySelector('#btn');
            oBtn.onclick = function(){
                // 实例化ajax对象
                var xhr = new XMLHttpRequest();
                // 打开所在文件——(提交方式，文件，是否异步)
                xhr.open('get','getNews.php',true);
                // 提交到服务器，
                xhr.send();
                // 等待服务器返回内容
                xhr.onreadystatechange = function(){
                    if ( xhr.readyState == 4 ) {
                        if ( xhr.status == 200 ) {
                            // alert( xhr.responseText );
                            var data = JSON.parse(xhr.responseText);
                            var oUl = document.querySelector('#ul');
                            var html = '';
                            for (var i = 0; i < data.length; i++) {
                                html += '<li><a href="" title="">'+ data[i].title +'[<span>'+ data[i].date +'</span>]</a></li>'
                            }
                            oUl.innerHTML = html;
                        } else {
                            alert('出错了,Err：' + xhr.status);
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
    <input id="btn" type="button" name="" value="按钮" />
    <ul id="ul">
    </ul>
</body>
</html>

getNews.php代码如下：

<?php 
header("Content-type: text/html; charset=utf-8");

$news = [
    ['title'=>'青年是国家的希望','date'=>'2014-1-6'],
    ['title'=>'《青年成长指南》','date'=>'2014-1-7'],
    ['title'=>'"云氏家族"','date'=>'2014-1-8'],
    ['title'=>'第二位国家领导人','date'=>'2014-1-9'],
    ['title'=>'逝世前有过一次豪捐','date'=>'2014-1-11'],
    ['title'=>'法撒旦法师','date'=>'2014-1-12'],
    ['title'=>'黄金客户端发卡上','date'=>'2014-1-13'],
    ['title'=>'青年是国家的希望','date'=>'2014-1-6'],
    ['title'=>'《青年成长指南》','date'=>'2014-1-7'],
    ['title'=>'"云氏家族"','date'=>'2014-1-8'],
];

echo json_encode($news);

————以上，可以把ajax封装成一个函数。

进行改进，将ajax进行封装和改进：

前端部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04</title>
    <script type="text/javascript" src="ajax.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            var oBtn = document.querySelector('#btn');
            oBtn.onclick = function(){
                ajax('get','getNews.php','');
                // 每1秒获取一次数据。
                setInterval(function(){
                    ajax('get','getNews.php','');
                },1000);
            } 
        }
    </script>
</head>
<body>
    <input id="btn" type="button" name="" value="按钮" />
    <ul id="ul">
    </ul>
</body>
</html>

封装函数部分：

function ajax(method,url,data){
    // 实例化ajax对象
    var xhr = new XMLHttpRequest();
    // 打开所在文件——(提交方式，文件，是否异步)
    if (method == 'get' && data) {
        url += '?' + data;
    }
    xhr.open(method,url,true);
    // 提交到服务器
    if (method == 'get') {
        xhr.send();
    }else{
        xhr.setRequestHeader('content-type','application/applocation/x-www-form-urllencoded');
        xhr.send(data);
    }
    // 等待服务器返回内容
    xhr.onreadystatechange = function(){
        if ( xhr.readyState == 4 ) {
            if ( xhr.status == 200 ) {
                // alert( xhr.responseText );
                var data = JSON.parse(xhr.responseText);
                var oUl = document.querySelector('#ul');
                var html = '';
                for (var i = 0; i < data.length; i++) {
                    html += '<li><a href="" title="">'+ data[i].title +'[<span>'+ data[i].date +'</span>]</a></li>'
                }
                oUl.innerHTML = html;
            } else {
                alert('出错了,Err：' + xhr.status);
            }
        }
    }
}

————请注意，以上的服务器返回的内容也可以作为函数，每次传进去。

get方式的问题：

1、缓存问题：在url后面 + new Date().getTime()，这样每次都产生一个随机数。

2、乱码：编码进行解决——encodeURI('中文')

xhr.open('get','2.get.php?username='+encodeURI('刘伟')+'&age=30&' + new Date().getTime(),true);
        xhr.send();

post方式的问题：

1、数据放在send()里面作为参数发送，必须设置请求头。

//post方式，数据放在send()里面作为参数传递
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//申明发送的数据类型
        //post没有缓存问题
        //无需编码
        xhr.send('username=刘伟&age=30');

02 Ajax_实例：留言板、瀑布流

瀑布流：固定宽度，不固定高度。有分为固定列和动态列两种

原理就是设置4个li，设置浮动，并且往里面不断添加。数据不是之前display:none;而是通过ajax不断的请求过来的，每次请求20条数据之类的。

触发ajax加载新数据的条件：（li本身的高度+li到可视区顶部的距离） < （滚动条距离scrollTop+可视区高度）

————————跳过

转载于:https://www.cnblogs.com/windyet/articles/6811156.html