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就像是粘合剂把七种技术整合到一起,从而发挥 ...
随机推荐
- 关于sqlite数据库
firedac数据引擎可以支持sqlite数据库,这种方式是纯绿色的,发布时不需要带上官方的sqlite.dll动态链接库文件. 当然调用该动态链接库的API方法也是可以操作sqlite数据库的,这样 ...
- 说一说window.parent
<iframe>标签是很常用的,嵌在页面之中,可以做独立的加载和刷新.比如说,页面分左右或者上下结构,一般左侧和上侧是导航部分,右侧和下侧是目标页面的展示部分,只需要设置导航链接的targ ...
- HTTP POST发消息
业务需求:模拟TANX给DSP发消息,protobuf数据已弄好. 代码: def PostDataToDSP(self,url,postdata): headers = { #taobao文档规定 ...
- java 拦截器和过滤器区别（转载）
1.拦截器是基于java的反射机制的,而过滤器是基于函数回调 2.过滤器依赖与servlet容器,而拦截器不依赖与servlet容器 3.拦截器只能对action请求起作用,而过滤器则可以对几乎所有的 ...
- iOS中的字符串扫描类NSScanner
新建一个Category,命名为UIColor+Hex,表示UIColor支持十六进制Hex颜色设置. UIColor+Hex.h文件, #import <UIKit/UIKit.h> # ...
- Executing System commands in Java---ref
One of the nice features of Java language is that it provides you the opportunity to execute native ...
- JSTL-core核心代码标签库中的if,set,out等的功能
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- hdu1047(Java)大数相加
题目大意:输入n组数据,每组数据中又有若干长度不大于100的整数,以0结束每组数据的输入,求每组中数据之和.每两组数据输入之间有一行空格,输出也是如此. Integer Inquiry Time Li ...
- Java 实现顺序查找
package search; import java.util.Scanner; /*通常把查找过程中对关键字的平均比较次数,也叫平均查找长度(ASL)作为衡量一个查找算法效率优劣的标准: * AS ...
- C语言实现电话本 动态开辟 信息存储于文件
下面是我用C写的一个电话本小项目,实现的功能有:添加 删除 修改 查找 排序 清空 显示,功能还是比较全的,内存也是动态开辟的.能存储于本地,能从本地读出并显示 头文件部分代码,contact.h: ...