ajax知识点补充
读取服务器上的数据：
HTML：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="ajax.js"></script>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1'); oBtn.onclick=function ()
{
ajax('data.txt?t='+new Date().getTime(), function (str){
var arr=eval(str); for(var i=0;i<arr.length;i++)
{
var oLi=document.createElement('li'); oLi.innerHTML='用户名：<strong>'+arr[i].user+'</strong>密码：<span>'+arr[i].pass+'</span>'; oUl.appendChild(oLi);
}
}, function (){
alert('失败');
});
};
};
</script>
</head> <body>
<input id="btn1" type="button" value="读取" />
<ul id="ul1">
</ul>
</body>
</html> ajax，js：
function ajax(url, fnSucc, fnFaild)
{
//1.创建Ajax对象
if(window.XMLHttpRequest)
{
var oAjax=new XMLHttpRequest(); //非IE6浏览器
}
else
{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP"); //IE6浏览器
} //2.连接服务器
//open(方法, 文件名, 异步传输)
oAjax.open('GET', url, true); //3.发送请求
oAjax.send(); //4.接收返回
oAjax.onreadystatechange=function ()
{
//oAjax.readyState //浏览器和服务器，进行到哪一步了
if(oAjax.readyState==4) //读取完成
{
if(oAjax.status==200) //成功
{
fnSucc(oAjax.responseText);
}
else
{
if(fnFaild)
{
fnFaild(oAjax.status);
}
//alert('失败:'+oAjax.status);
}
}
};
}
data.txt：
[{user: 'blue', pass: '123456'},{user: '张三', pass: '654321'},{user: '李四', pass: '789456'},{user: '王五', pass: '7777'}]
eg：
ajax.js：
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);
}
}
}
}
HTML：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!--<script src="jquery.js"></script>-->
<script>
//$(function(){}) //阻塞 -> 同步 //非阻塞 - 异步
/*setTimeout(function() {
alert(1);
}, 2000); alert(2);*/ window.onload = function () { var oBtn = document.getElementById('btn'); oBtn.onclick = function () { var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
/*
1.缓存 在url？后面连接一个随机数，时间戳
2.乱码 编码encodeURI
*/
xhr.open('get', '2.get.php?username=' + encodeURI('刘伟') + '&age=30&' + new Date().getTime(), 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 type="button" value="按钮" id="btn"/>
</body>
</html>
HTML（post）：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!--<script src="jquery.js"></script>-->
<script>
//$(function(){}) //阻塞 -> 同步 //非阻塞 - 异步
/*setTimeout(function() {
alert(1);
}, 2000); alert(2);*/ window.onload = function () { var oBtn = document.getElementById('btn'); oBtn.onclick = function () { var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} xhr.open('post', '2.post.php', true);
//post方式，数据放在send()里面作为参数传递
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//申明发送的数据类型
//post没有缓存问题
//无需编码
xhr.send('username=刘伟&age=30'); xhr.onreadystatechange = function () { if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
} else {
alert('出错了,Err：' + xhr.status);
}
} } }
}
</script>
</head> <body>
<input type="button" value="按钮" id="btn"/>
</body>
</html>
ajax知识点补充的更多相关文章
- swagger知识点补充
1. swagger知识点补充 1.1. 概述 在swagger的使用过程中,除了网上常见的例子,还会有很多细节上的东西需要注意和改写,这里我列几点我使用过程中遇到的问题和改进方式 1.2. 知识点 ...
- set集合,深浅拷⻉以及部分知识点补充
set集合,深浅拷⻉以及部分知识点补充内容:1. 基础数据类型补充2. set集合3. 深浅拷⻉主要内容: ⼀. 基础数据类型补充⾸先关于int和str在之前的学习中已经讲了80%以上了. 所以剩下的 ...
- django基础之FBV与CBV，ajax序列化补充，Form表单
目录: FBV与CBV ajax序列化补充 Form表单(一) 一.FBV与CBV 1.什么是FBV.CBV? django书写view时,支持两种格式写法,FBV(function bases vi ...
- ajax参数补充
ajax参数补充 contentType 当我们使用form表单提交数据时,有一个enctype属性,默认情况下不写 此时我们提交数据时,会默认将数据以application/x-www-form-u ...
- Django 知识点补充
Django 知识点补充 1 Django如何在Model保存前做一定的固定操作,比如写一条日志 (1)利用Django的Model的Signal Dispatcher, 通过django.db.mo ...
- 从零开始的全栈工程师——html篇1.8（知识点补充与浏览器兼容性）
知识点补充 一.浏览器的兼容问题(关于浏览器的兼容问题 有很多大佬已经解释的很清楚了 这个得自己百度去多花点时间去了解 这里咱们只说一下前面的漏点) 浏览器兼容性问题又被称为网页兼容性或网站兼容性问题 ...
- python day4 元组/字典/集合类知识点补充
目录 python day4 元组/字典/集合类知识点补充 1. 元组tuple知识点补充 2. 字典dict的知识点补充 3. 基本数据类型set 4. 三元运算,又叫三目运算 5. 深复制浅复制 ...
- python 知识点补充
python 知识点补充 简明 python 教程 r 或 R 来指定一个 原始(Raw) 字符串 Python 是强(Strongly)面向对象的,因为所有的一切都是对象, 包括数字.字符串与 函数 ...
- java基础知识点补充---二维数组
#java基础知识点补充---二维数组 首先定义一个二维数组 int[][] ns={ {1,2,3,4}, {5,6,7,8}, {9,10,11,12}, {13,14,15,16} }; 实现遍 ...
随机推荐
- sql xml扩展字段 查询语句
[cms:sql query="SELECT ContentXML.value('/fields[1]/Address[1]','varchar(max)')AS valueForm FRO ...
- PHP队列的实现
队列是一种特殊的线性表,它只允许在表的前端,可以称之为front,进行删除操作:而在表的后端,可以称之为rear进行插入操作.队列和堆栈一样,是一种操作受限制的线性表,和堆栈不同之处在于:队列是遵循“ ...
- c++ 计算器 带括号 代码实现
我用了两个栈 一个用来存数字 一个用来存运算符 这里引入优先度的概念便于理解 不同的运算符有不同的优先度 当优先度高的符号进入栈中 所有比它优先度低的符号都要弹出 对 就是这么霸道 ( 没有优先度 没 ...
- CodeForces 879D Teams Formation
题意 将一个长度为\(n\)的数组重复\(m\)遍得到一个长度为\(n \times m\)的新序列,然后消掉新序列中连续\(k\)个相同的元素,不断重复这一过程,求最后剩下的序列的长度 分析 首先可 ...
- Android stadio butternife工具
http://www.androidchina.net/5068.html svn今天我对它有了更深的认识.我知道了有冲突了不能提交.但是可以update,updata之后就会有冲突的东西生成,如果你 ...
- 论如何入门地使用vscode
微软大法好啊 这货更像是个gedit 以下内容只适合Oiers使用 本文档只适合新手引导的阶段使用 下载 这个是链接 可见这东西是和Emacs一样跨系统的 不知道为什么下载速度贼快 配置 还记得我们用 ...
- VS Extension+NVelocity系列(一)——构建一个简单的NVelocity解析环境
一.前言 本节我们将实际实现一个简单的NVelocity解析环境,以便为以后的实例做一些基本工作,虽然NVelocity如何使用已经属于老掉牙的话题,但我只能专门挑出来一章来做铺垫.人生就是这样无奈啊 ...
- 剑指Offer - 九度1283 - 第一个只出现一次的字符
剑指Offer - 九度1283 - 第一个只出现一次的字符2013-11-21 21:13 题目描述: 在一个字符串(1<=字符串长度<=10000,全部由大写字母组成)中找到第一个只出 ...
- CodeIgniter学习笔记三：扩展CI的控制器、模型
一.扩展CI中的控制器 有时需要对CI中的控制器作统一操作,如进行登录和权限验证,这时就可以通过扩展CI控制器来实现. 扩展CI控制器只需要在application/core文件夹中建一个继承自CI_ ...
- 设计模式之第22章-组合模式(Java实现)
设计模式之第22章-组合模式(Java实现) “鱼哥,有没有什么模式是用来处理树形的“部分与整体”的层次结构的啊.”“当然”“没有?”“有啊.别急,一会人就到了.” 组合模式之自我介绍 “请问你是?怎 ...