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就像是粘合剂把七种技术整合到一起,从而发挥 ...
随机推荐
- SAP 使用SQL Trace（ST05）
SAP 使用SQL Trace(ST05) SAP R/3 提供标准ABAP SQL 跟踪工具.使用T-Code:ST05 可以进入追踪设定画面: 在Trace Modes 区域中选 ...
- MariaDB-5.5.33a 编译安装
交代一下内核的信息 [root@localhost soft]# uname -r 2.6.32-71.el6.x86_64 创建mariadb用户组 [root@localhost mariadb- ...
- 微信开发第7章 通过accesstoken获取用户黑名单列表
获取黑名单列表可以查看文档 http://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1471422259_pJMWA&token=& ...
- 解决libcrypto.so.0.9.8: cannot open shared object file
文章解决的问题:安装nginx中需要libmysql.so.16包的支持,下面介绍如何安装,并建立lib的连接. 问题展示:error while loading shared libraries: ...
- J2EE 全面简介
原文地址:http://www.ibm.com/developerworks/cn/java/j2ee/ J2EE的概念 目前,Java 2平台有3个版本,它们是适用于小型设备和智能卡的Java 2平 ...
- localtunnel.me 原理流程浅析
本文採用知识共享署名-同样方式共享 4.0 国际许可协议进行许可. 近期公司的项目须要一个后台server,要求能将内网的WEBserver暴露在外网上.于是.就在网上到处搜开源项目.找到两个口碑 ...
- android92 aidl远程进程通信
05项目RemoteService.java package com.itheima.remoteservice; //05项目 import com.itheima.remoteservice.Pu ...
- CCLabelTTF 如何支持换行符和换行
参考自http://www.cocos2d-x.org/wiki/How_does_CCLabelTTF_support_line_breaks_and_wrapping 环境: cocos2d-x ...
- ls -l命令详解
输入: ls -l 输出: -rwxr-xr-x root root May : b 第一个字段(1个字符):文件类型 - :普通文件 d:目录文件 b:块设备文件(block) c:字符设备文件(c ...
- JAVA的instanceOf什么时候用啊
当你拿到一个对象的引用时(例如参数),你可能需要判断这个引用真正指向的类.所以你需要从该类继承树的最底层开始, 使用instanceof操作符判断,第一个结果为true的类即为引用真正指向的类. cl ...