<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script src="ajax.js"></script>
    <script>
    window.onload = function() {

        var oBtn = document.getElementById('btn');

        oBtn.onclick = function() {

            /*ajax({
                url    :    'getNews.php',
                success : function(data) {
                    //...
                }
            });*/

            ajax('get', 'getNews.php', '', function(data) {
                var data = JSON.parse(data);

                var oUl = document.getElementById('ul1');
                var html = '';
                for (var i = 0; i < data.length; i++) {
                    html += '<li><a href="">' + data[i].title + '</a> [<span>' + data[i].date + '</span>]</li>';
                }
                oUl.innerHTML = html;
            });

            setInterval(function() {
                ajax('get', 'getNews.php', '', function(data) {
                    var data = JSON.parse(data);

                    var oUl = document.getElementById('ul1');
                    var html = '';
                    for (var i = 0; i < data.length; i++) {
                        html += '<li><a href="">' + data[i].title + '</a> [<span>' + data[i].date + '</span>]</li>';
                    }
                    oUl.innerHTML = html;
                });
            }, 1000);

        }
    }
    </script>
</head>

<body>
    <input type="button" value="按钮" id="btn" />
    <ul id="ul1"></ul>
</body>

</html>
function ajax(method, url, data, success) {
    var xhr = null;
    try {
        xhr = new XMLHttpRequest();
    } catch (e) {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    if (method == 'get' && data) {
        url += '?' + data;
    }

    xhr.open(method, url, true);
    if (method == 'get') {
        xhr.send();
    } else {
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send(data);
    }

    xhr.onreadystatechange = function() {

        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                success && success(xhr.responseText);
            } else {
                alert('出错了,Err：' + xhr.status);
            }
        }

    }
}

ajax 的基本原理的更多相关文章

  1. 浅谈AJAX的基本原理和原生AJAX的基础用法

    一.什么是AJAX? AJAX,即"Asynchronous Javascript And XML",翻译为异步的JavaScript和XML,是一种创建交互式网页应用的网页开发技 ...

  2. 纯JavaScript实现异步Ajax的基本原理

      Ajax实际就是XMLHttpRequest对象和DOM.(X)HTML和CSS的简称,用于概括异步加载页面内容的技术. Ajax实例 HTML代码如下,包含一个h5标题和一个按钮: JS代码如下 ...

  3. 面试题 —— Ajax的基本原理总结

    Ajax 的全称是Asynchronous JavaScript and XML(异步的JavaScript 和 XML),其中,Asynchronous 是 异步 的意思,它有别于传统web开发中采 ...

  4. Ajax学习笔记——基本原理

    Ajax(Asynchronous JavaScript + XML)不是语音,不是框架,也不能算是一种技术,而是一种模式.通过这种模式实现不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内 ...

  5. 逐渐深入地理解Ajax

    Ajax的基本原理是:XMLHttpRequest对象(简称XHR对象),XHR为向服务器发送请求和解析服务器响应提供了流畅的接口.能够以异步方式从服务器获得更多信息.意味着用户不必刷新页面也能取得新 ...

  6. jquery学习之AJAX

    1,关于AJAX的简单介绍 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准 ...

  7. java和Ajax

    原博(实在太啰嗦了):https://netbeans.org/kb/docs/web/ajax-quickstart_zh_CN.html 1.Ajax的基本原理 Ajax 代表异步 JavaScr ...

  8. Ajax原理、优缺点及应用场景

    前言 Ajax的全称为Asynchronous JavaScript And Xml,是一种web客户端与服务器端异步通信的技术,如今,可以说是web开发人员必须掌握的的一项技能了.本文讲述了Ajax ...

  9. 特定场景下Ajax技术的使用

    ajax介绍 jax技术包含了几种技术:javascript.xml.css.xstl.dom.xhtml和XMLHttpRequest七种技术,所以ajax就像是粘合剂把七种技术整合到一起,从而发挥 ...

随机推荐

  1. 问题-[VMware Workstation]断电后，重启电脑，之后就提示“内部错误”

    问题现象:突然断电后,重启电脑,再打开VMware Workstation,启动不了.之后就提示“内部错误”.问题原因:希望高人指点.问题处理:关闭VMware Workstation,在快捷方式上, ...

  2. android 获取当前版本号/修改自定义的应用程序的版本号

    1.获取当前版本号 PackageManager pm = getPackageManager(); PackageInfo pi = pm.getPackageInfo(getPackageName ...

  3. [三]SpringMvc学习-封装、乱码问题、重定向、转发

    1.对象属性自动封装 前台input 用对象的属性名,后台自动会封装为对象,类似struts 2.解决post乱码问题 在web.xml中配置过滤器 <filter> <filter ...

  4. 《机器学习实战》——K近邻算法

    三要素:距离度量.k值选择.分类决策 原理: (1) 输入点A,输入已知分类的数据集data (2) 求A与数据集中每个点的距离,归一化,并排序,选择距离最近的前K个点 (3) K个点进行投票,票数最 ...

  5. 结构体数组（C++）

    1.定义结构体数组 和定义结构体变量类似,定义结构体数组时只需声明其为数组即可.如: struct Student{ int num; char name[20]; char sex[5]; int ...

  6. ThinkPad E431怎样关闭触摸板

    ThinkPad E431怎样关闭触摸板 系统环境:win 7 旗舰版 1.下载驱动程序 到官方下载UltraNav驱动.參考例如以下图所看到的: Think Pad系列关闭触摸板须要安装专门的驱动程 ...

  7. 开发XMPP IM

    Openfire 是一个用Java 实现的XMPP 服务器,客户端可以通过IQ的方式与其进行通信(其实就是XML),客户端和服务器之间的通信是依靠底层Smack 库提供的各种功能来完成的.其实利用插件 ...

  8. 垂死挣扎还是涅槃重生 -- Delphi XE5 公布会归来感想

    Delphi 是一个基本上被我遗忘的工具, 要不是在使用RapidSql , 我是收不到Embarcadero 公司发出的邀请来參加Delphi XE5的公布会的. 有人可能要问为什么是Embarca ...

  9. careercup-递归和动态规划 9.3

    9.3 在数组A[0...n-1]中,有所谓的魔术索引,满足条件A[i]=i.给定一个有序整数数组,元素值给不相同,编写一个方法,在数组A中找出一个魔术索引,若存在的话. 进阶: 如果数组元素有重复值 ...

  10. Socket.io各个发送消息的含义

    // send to current request socket client socket.emit('message', "this is a test"); // send ...