ajax 的基本原理
<!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 的基本原理的更多相关文章
- 浅谈AJAX的基本原理和原生AJAX的基础用法
一.什么是AJAX? AJAX,即"Asynchronous Javascript And XML",翻译为异步的JavaScript和XML,是一种创建交互式网页应用的网页开发技 ...
- 纯JavaScript实现异步Ajax的基本原理
Ajax实际就是XMLHttpRequest对象和DOM.(X)HTML和CSS的简称,用于概括异步加载页面内容的技术. Ajax实例 HTML代码如下,包含一个h5标题和一个按钮: JS代码如下 ...
- 面试题 —— Ajax的基本原理总结
Ajax 的全称是Asynchronous JavaScript and XML(异步的JavaScript 和 XML),其中,Asynchronous 是 异步 的意思,它有别于传统web开发中采 ...
- Ajax学习笔记——基本原理
Ajax(Asynchronous JavaScript + XML)不是语音,不是框架,也不能算是一种技术,而是一种模式.通过这种模式实现不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内 ...
- 逐渐深入地理解Ajax
Ajax的基本原理是:XMLHttpRequest对象(简称XHR对象),XHR为向服务器发送请求和解析服务器响应提供了流畅的接口.能够以异步方式从服务器获得更多信息.意味着用户不必刷新页面也能取得新 ...
- jquery学习之AJAX
1,关于AJAX的简单介绍 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准 ...
- java和Ajax
原博(实在太啰嗦了):https://netbeans.org/kb/docs/web/ajax-quickstart_zh_CN.html 1.Ajax的基本原理 Ajax 代表异步 JavaScr ...
- Ajax原理、优缺点及应用场景
前言 Ajax的全称为Asynchronous JavaScript And Xml,是一种web客户端与服务器端异步通信的技术,如今,可以说是web开发人员必须掌握的的一项技能了.本文讲述了Ajax ...
- 特定场景下Ajax技术的使用
ajax介绍 jax技术包含了几种技术:javascript.xml.css.xstl.dom.xhtml和XMLHttpRequest七种技术,所以ajax就像是粘合剂把七种技术整合到一起,从而发挥 ...
随机推荐
- iOS-iPhone系统版本号-iPhone App版本号
转载: http://blog.sina.com.cn/s/blog_7b9d64af0101bu9j.html 很多时候,我们需要获得用户iPhone版本号,或者App的当前版本号. 关心以下两个方 ...
- POJ 2488-A Knight's Journey(DFS)
A Knight's Journey Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 31702 Accepted: 10 ...
- Redis学习手册(事务)
一.概述: 和众多其它数据库一样,Redis作为NoSQL数据库也同样提供了事务机制.在Redis中,MULTI/EXEC/DISCARD/WATCH这四个命令是我们实现事务的基石.相信对有关系型数据 ...
- 多线程读写共享变量时,synchronized与volatile的作用
在<effective java>中看的的知识点,在工作中确实遇到了~ keywordsynchronized能够保证在同一时刻,仅仅有一个线程能够运行某一个方法,或者某一个代码块. 同步 ...
- 命令行修改weblogic用户名和密码
语法为:java weblogic.security.utils.AdminAccount <NewAdminUserName> <NewAdminPassword> dir ...
- ANT的安装和配置(windows)
1.下载:到ANT官方网站http://ant.apache.org/下载最新版本,解压后即可.2.配置环境变量:我的电脑----属性-----高级----环境变量 如:ANT_HOME:C ...
- 如何实现windows和linux之间的文件传输
2010-04-25 18:10 如何实现windows和linux之间的文件传输 如果想从windows中传送大量文件到Linux中,想必会难倒部分Linux初学者,尤其是文件很大时.我曾试过在li ...
- android应用版本更新功能---完整版
源码下载地址:csdn下载地址:http://download.csdn.net/download/csdn576038874/9526085 博客园下载地址:http://files.cnblogs ...
- Spring对Hibernate事务管理【转】
在谈Spring事务管理之前我们想一下在我们不用Spring的时候,在Hibernate中我们是怎么进行数据操作的.在Hibernate中我们每次进行一个操作的的时候我们都是要先开启事务,然后进行数据 ...
- freewrap——将tcl/tk脚本转变为可执行文件
FreeWrap可以把TCL/TK的脚本和二进制文件打包成应用程序,FreeWrap将所有的文件组合成一个单独的可执行文件. FreeWrap的原理是把脚本和tcl/tk解释器和库文件都打包 ...