第十三节 Ajax基础
什么是服务器：简单地，可以说服务器就是一个内存超大的计算机，可以存放很多数据和文件（当然，如果不需要太多的数据存储量，我们也可以用电脑、手机等一系列小型计算机作为服务器，只不过性能的差别而已）
网页浏览过程分析
如何配置自己的服务器程序（AMP）：（可以使用wamp一路“下一步”安装本地服务器，然后找到，安装目录中的“www”文件夹（自带内容没什么用，可以直接删除）把我们需要放服务器上的网页直接放在该文件夹中即可，安装过程“自行百度”）
什么是Ajax：
简单来说，就是可以让JS在不刷新页面的情况下读取服务器上的数据，即无刷新数据读取
用户注册、在线聊天室
异步、同步
如何使用Ajax
基础：请求并显示静态TXT文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>读取文本文件</title>
<script src="59-ajax.js"></script>
<script>
window.onload = function () {
var oBtn = document.getElementById('btn1'); oBtn.onclick = function () {
ajax('59.txt', function (str) { //其中str表示读取服务器文件成功时，返回文件中的内容，返回给str
alert(str); //当然，要读取的文件一定要有内容才能读取到内容，否则读取的也是空白。
}, function () { //一定要加上，读取失败的函数，否则可能运行不成功
alert("对不起，运行错误，未能成功读取文件！");
});
};
};
</script>
</head>
<body>
<button id="btn1">读取文件</button>
</body>
</html>
59.html
另外需要注意的是，运行上述代码，当我们需要获取文件内容时，必须搭建好本地服务器，并用在浏览器的地址栏输入“localhost/59.html”才能正确运行，否则运行失败。比如，在此编辑器中直接打开浏览器运行该文件，我们将获取不到文件，并提示“读取失败”。 当然如果我们在没搭建好服务器是运行的话，怎么运行都会失败，甚至不会弹出“读取失败”的提示！
//其中三个参数：
// URL：是我要从服务器上读取文件的路径（绝对和相对路径都行）
// fnSucc：是一个函数，即当读取文件成功的情况下执行的函数
// fnFaild：是一个函数，即当读取文件失败的情况下执行的函数
function ajax(url, fnSucc, fnFaild) {
//1.创建Ajax对象
if (window.XMLHttpRequest) {
var oAjax = new XMLHttpRequest();
} else {
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
} //2.连接服务器（打开和服务器的连接）
oAjax.open('GET', url, true); //3.发送
oAjax.send(); //4.接收
oAjax.onreadystatechange = function () {
if (oAjax.readyState == 4) {
if (oAjax.status == 200) {
// alert('成功了：'+oAjax.responseText);
//把文本内容返回出来……
fnSucc(oAjax.responseText);
} else {
fnFaild(oAjax.status);
}
}
}
}
59-ajax.js
文本随便写一个文本即可，只要命名为“59.txt”就好了
字符集编码：在开发网站时，要求编码要统一，包括HTML、CSS、JS、被读取的文本文件等必须是统一的编码方式。
缓存：缓存是当我们读取文件内容后，文件内容被修改，但是我们刷新一两次页面，读取的数据仍然是未修改文件前的内容，这也是缓存存在的弊端，像IE浏览器缓存更严重，必须关掉网页然后再打开才能读取到修改后的文本。
阻止缓存：组织缓存我们用的方法有很多，下面举一种，如下：
oBtn.onclick = function () {
// ajax('59.txt', function (str) { //其中str表示读取服务器文件成功时，返回文件中的内容，返回给str
ajax('59.txt?t='+new Date().getTime(), function (str) { //用该语句替换上面语句，在文件名后面加上一个“?t=”,来阻止缓存
alert(str); //当然，要读取的文件一定要有内容才能读取到内容，否则读取的也是空白。
}, function () { //一定要加上，读取失败的函数，否则可能运行不成功
alert("对不起，运行错误，未能成功读取文件！");
});
};
其中“?t=”，表示GET接收数据，其实“t”是没什么用的，不会被后台服务器接收识别，只是给浏览器看的，为了让url每次都不一样
动态数据：请求JS（或Json）文件
eval的使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>读取动态数据</title>
<script src="59-ajax.js"></script>
<script>
window.onload = function () {
var oBtn = document.getElementById('btn1'); oBtn.onclick = function () {
// ajax('60-arr.txt?t='+new Date().getTime(), function (str) {
// // alert(str); //虽然60.txt文件是一个数组形式的文件，但是返回的str任然是字符串，而非数组
// //此时返回的数据是“[1, 2, 3, 4, 5, 6, 7, 8]”，“str.length=24”，“typeof(str)为string”
// //那么我们如何把一个以字符串形式存储的数组，以数组的形式提取出来呢？
// //我们需要用到“eval()”函数，它是用来把一个语句里面的内容解析成一个JS可以识别的东西
// // alert(eval(str)); //返回值为“1, 2, 3, 4, 5, 6, 7, 8”此时就为一个数组了，如下：
// var arr = eval(str);
// alert(arr[3]); //返回值为 4 //我们再读取一个json类型的数据试试，看是什么样子？
ajax('60-json.txt?t'+new Date().getTime(), function (str) {
var arr = eval(str);
// alert(arr[0]); //返回值为“[object Object]”
alert(arr[0].a); //返回值为“5”，正确
}, function () { //一定要加上，读取失败的函数，否则可能运行不成功
alert("对不起，运行错误，未能成功读取文件！");
});
};
}; </script>
</head>
<body>
<button id="btn1">读取文件</button>
</body>
</html>
其中上面代码用到的“60-arr.txt”文件内容为“[1, 2, 3, 4, 5, 6, 7, 8]”；“60-json.txt”文件的内容为“[{a:5, b:7}, {a:8, b:12}]”
DOM创建元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>读取文本文件</title>
<script src="59-ajax.js"></script>
<script>
window.onload = function () {
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('ul1'); oBtn.onclick = function () {
ajax('61.txt?t='+new Date().getTime(), function (str) {
var arr = eval(str); //读取到的数据是一个数组
// alert(arr[0].a);
//现在我们想做到：点击“读取文件”按钮，系统自动添加<li>标签，便签内为“用户名：blue密码：123456”这种形式。 for (var i = 0; i < arr.length; i++) {
var oLi = document.createElement('li'); oLi.innerHTML = '用户名：<strong>'+arr[i].user+'</strong>密码：<span>'+arr[i].password+'</span>';
oUl.appendChild(oLi);
}
}, function () { //一定要加上，读取失败的函数，否则可能运行不成功
alert("对不起，运行错误，未能成功读取文件！");
});
};
};
</script>
</head>
<body>
<button id="btn1">读取文件</button>
<ul id="ul1">
<!--<li>用户名：<strong>blue</strong>密码：<span>123456</span></li>-->
</ul>
</body>
</html>
[{user: ‘blue’, password: ‘123456’}, {user: ‘张三’, password: ‘654321’}, {user: ‘李四’, password: ‘789456’}, {user: ‘王五’, password: ‘777777’},]
61.txt
局部刷新：请求并显示部分网页文件（为学习到！有待补充）
Ajax的原理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax原理</title>
</head>
<body>
<!--<form action="http://www...." method="post">-->
<form action="http://www...." method="post">
用户名：<input type="text" name="username"/>
密码：<input type="password" name="password"/>
<input type="submit"/>
</form>
</body>
</html>
填好用户名和密码后，点击提交按钮，在地址栏中会出现“http://www./?username=hahah&password=1231223”说明这些值都被传递过去了其实这就是get方式（也是默认方式：即当<form>标签中不放method="get"时，缺省情况下也存在“method="get"”）：放入url，其基本格式为：“名字=值&名字=值&...”；
下面我们换一种方式：“method="post"”然后运行程序，地址栏的结果为“http://www./”后面没有“?user...”这些东西，但是它确实也已经提交上去了，我们可以通过：右键->检查元素->Network/网络->Header查看到username和password
http请求方法：
GET——更适合用于获取数据（如：浏览帖子）
POST——更适合用于向服务器上传数据（如：用户注册）
GET、POST的区别：
①.get方式是通过网址传递数据的，而post是通过http content来传递数据的，这是它们最本质的区别；
②.由于网址不可能无限长（一般典型认为4K~10K的大小），所以get方式提交数据，容量有限，如果我们想提交一个图片，或者一个文件，get方式明显做不到，所以一般上传大文件是，不建议使用get方式; 而post一般的服务器可达到2G；其他更大的视频文件什么的，可以使用大文件上传控件，就不需要使用http了
③.GET是在URL里传数据：安全性差（几乎没什么安全性）、容量小，有缓存; 上传数据安全性好一点，但是也存在安全隐患，没有缓存（每一次post，都会向服务器提取新的数据）
编写Ajax四大步骤：
1. 创建Ajax对象：ActiveXObject("Microsoft.XMLHTTP") 和 XMLHttpRequest()
2. 连接服务器：open(方法, 被读文件名, 异步传输) //其中方法为“get”或“post”； 正常思维情况下，同步（多件事一起）和异步（事情一件一件来），但是在此“同步”表示 事情一件一件完成，而“异步”表示 多个事件一起完成。 但是需要注意的是，Ajax天生就是用来做异步（多个事件一起完成）操作的，因为这样在发送请求后，服务器响应请求期间，我们还可以做其他操作；如果是同步的话，我们只能等一个请求得到响应完成后才能做其他操作，这对人的耐性是一种考验。所以我们让open的第三个参数为“true”即可，表示异步传输。
3. 发送请求：send() （高速服务器需要哪些文件）
4. 接收返回值：onreadystatechange事件
请求状态监控：
readyState属性：请求状态
0 （未初始化）还没有调用open()方法，整个Ajax对象刚刚创建时，即在第一步；
1 （载入）已调用send()方法，正在发送请求，即第二、三步；
2 （载入完成）send()方法完成，已从服务器端收到全部响应内容，即第三步，但是此时还不能 使用 服务器返回的内容，因为载入完成的可能是一些是加密文件（保证安全，如https）、压缩文件（减小带宽的使用）等等原始文件，所以还需要进行 数据解析；
3 （解析）正在解析响应内容，即第三、四步之间；
4 （完成）响应内容解析完成，可以在客户端调用了，此时的数据就可以直接被使用了，即第四步。
statue属性：请求结果，是HTTP状态码，200表示成功，除了200以外基本表示失败，比如“404”更是表示失败，最常见
responseText：表示获取读取信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编写Ajax基础</title>
<script src="63-Ajax函数封装.js"></script>
<script>
//补充一点：
//许多全局变量，其实是window的一个属性，例如：
// var a = 12;
// alert(a); //相当于“window.alert(window.a);” //但是如果我们不定义全局变量a，而是直接alert
// alert(a); //系统报错，报“a is not defined”错误（可通过“检查元素查看”） //但是我们再加上一个window时直接alert
// alert(window.a); //系统不会报错，而是弹出“undefined” //上述说明：用没有定义的变量——报错；用没有定义的属性——undefined window.onload = function () {
var oBtn = document.getElementById('btn1'); oBtn.onclick = function () {
//1.创建Ajax对象（存在兼容问题）
// if (XMLHttpRequest) {
if (window.XMLHttpRequest) {
//只兼容 非IE6的浏览器
var oAjax = new XMLHttpRequest();
} else {
//在IE6浏览器中，我们使用以下方法来创建Ajax对象，其中ActiveX...表示插件的意思，但是IE6默认已经
//装上了，所以实际意义上ActiveXObject()算不上一个插件。但是其他浏览器都不支持！
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//上述IF语句并没有解决兼容问题，其实兼容问题已经解决，但是在IE6浏览器依然报错，影响运行，因为IE6把
//“if (XMLHttpRequest)”中的“XMLHttpRequest”当成了变量，所以会报“变量未定义”错误，我们改为
//“if (window.XMLHttpRequest)” 虽然是属性未定义，但是不会在IE6浏览器下报错，不影响程序运行。 // alert(oAjax); //返回“[object XMLHttpRequest]”，测试用 //2.连接服务器
//open(方法, 要读文件名, 异步传输);
oAjax.open('GET', '61.txt?t='+new Date().getTime(), true); //?t='+new Date().getTime()表示取消缓存 //3.发送请求
oAjax.send(); //4.接收返回
oAjax.onreadystatechange = function () { //onreadystatechange用于跟服务器交互的时候，发生的一个事件
//但是，跟服务器的交互是需要过程的，我们怎么知道完没完成交互呢？这时候我们需要用到readyState
// oAjax.readyState; //浏览器和服务器的交互进行到哪一步了？
//oAjax.readyState == 4表示整个交互已经完成，通信成功/读取完成
if (oAjax.readyState == 4) { //读取完成（并不一定是读取成功，就算文件传输出错，readyStatue也有可能等于4）所以我们需要进一步判断：
if (oAjax.status == 200) { //status是HTTP状态码，200表示成功，除了200以外基本表示失败，比如“404”更是表示失败
alert('成功！'+oAjax.responseText); //oAjax.responseText表示获取读取信息 } else {
alert('失败！');
}
}
}
};
};
</script>
</head>
<body>
<button id="btn1">读取</button>
</body>
</html>
Ajax编写步骤
把上述代码中的Ajax的使用封装成一个函数，方便之后的使用：
//其中三个参数：
// URL：是我要从服务器上读取文件的路径（绝对和相对路径都行）
// fnSucc：是一个函数，即当读取文件成功的情况下执行的函数
// fnFaild：是一个函数，即当读取文件失败的情况下执行的函数
function Ajax(url, fnSucc, fnFail) {
//1.创建Ajax对象
if (window.XMLHttpRequest) {
//只兼容 非IE6的浏览器
var oAjax = new XMLHttpRequest();
} else {
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
} //2.连接服务器
//open(方法, 要读文件名, 异步传输);
oAjax.open('GET', url+'?t='+new Date().getTime(), true); //?t='+new Date().getTime()表示取消缓存 //3.发送请求
oAjax.send(); //4.接收返回
oAjax.onreadystatechange = function () { //onreadystatechange用于跟服务器交互的时候，发生的一个事件
if (oAjax.readyState == 4) {
if (oAjax.status == 200) {
fnSucc(oAjax.responseText); //读取文本文件成功，返回文本内容
} else {
if (fnFail) {
fnFail(oAjax.status); //提示失败是的状态，
}
}
}
};
}
Ajax函数封装
其实上面“Ajax函数封装”与“59-ajax.js”文件，内容相同，只不过在此做了一些解释，和兼容性问题的处理
1 //简单调用封装好的Ajax函数
2 Ajax('61.txt', function () {
3 alert(str);
4 });
Ajax数据
数据类型：
什么叫数据类型——英语、中文
XML（基本已被淘汰，同等数据量，xml比json占用的存储空间大的多，所以传输时带宽占用量大）、Json（目前常用）
字符集：编程中，让所有文件字符集（字符编码）相同/统一
第十三节 Ajax基础的更多相关文章
- 风炫安全web安全学习第三十三节课 文件包含漏洞基础以及利用伪协议进行攻击
风炫安全web安全学习第三十三节课 文件包含漏洞基础以及利用伪协议进行攻击 文件包含漏洞 参考文章:https://chybeta.github.io/2017/10/08/php文件包含漏洞/ 分类 ...
- centos LNMP第一部分环境搭建 LAMP LNMP安装先后顺序 php安装 安装nginx 编写nginx启动脚本 懒汉模式 mv /usr/php/{p.conf.default,p.conf} php运行方式SAPI介绍 第二十三节课
centos LNMP第一部分环境搭建 LAMP安装先后顺序 LNMP安装先后顺序 php安装 安装nginx 编写nginx启动脚本 懒汉模式 mv /usr/local/php/{ ...
- centos 正则，grep，egrep，流式编辑器 sed，awk -F 多个分隔符 通配符 特殊符号. * + ? 总结 问加星 cat -n nl 输出文件内容并加上行号 alias放~/.bash_profile 2015-4-10 第十三节课
centos 正则,grep,egrep,流式编辑器 sed,awk -F 多个分隔符 通配符 特殊符号. * + ? 总结 问加星 cat -n nl 输出文件内容并加上行号 alias放~ ...
- (转)第二十三节 inotify事件监控工具
第二十三节 inotify事件监控工具 标签(空格分隔): Linux实战教学笔记-陈思齐 原文:http://www.cnblogs.com/chensiqiqi/p/6542268.html 第1 ...
- 史上最全的Ajax基础详解
同步请求和异步请求 先解释一下同步和异步的概念: 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯 ...
- 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】
一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...
- Ajax基础知识《一》
对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到.Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当 ...
- Ajax基础2
什么是服务器 网页浏览过程的分析 如何配置自己的服务器程序(AMP) 什么是Ajax 无刷新数据读取 异步,同步 Ajax基础(2) 使用Ajax 基础请求显示txt的文件 字符集编码 缓存,阻止缓存 ...
- ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列
AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ...
随机推荐
- 简化equals()方法的重写
实例说明 在定义类时,属性可以是基本类型也可以是引用类型.当重写equals()方法时一会要用“==”来比较基本类型,一会要用equals()比较引用类型,这样代码看着有些混乱.为此推荐使用Commo ...
- C语言复习0_准备工作
前言: 第一次接触C语言是大一下学期的时候,2013年上半年,那个时候的开发工具还是VS C++,今天了解了一下,常用的开发工具变成了CodeBlocks.决定趁着毕业到入职这一段CD时间,拾起这门语 ...
- js高级1
1.每一个元素身上的事件都是天生自带的,不需要我们去定义,只需要我们给这个事件绑定的方法,当事件触发的时候就会执行这个方法. 2.事件绑定的方法 1,div.onclick=function(){} ...
- JS数组循环的性能和效率分析（for、while、forEach、map、for of）
从最简单的for循环说起 for( 初始化:条件; ){} 条件为Trusy 值时候,可以继续执行for 循环,当条件变为Falsy 时跳出for循环.for循环常见的四种写法const person ...
- 从vue源码看Vue.set()和this.$set()
前言 最近死磕了一段时间vue源码,想想觉得还是要输出点东西,我们先来从Vue提供的Vue.set()和this.$set()这两个api看看它内部是怎么实现的. Vue.set()和this.$se ...
- vue中打包后vendor文件包过大
vue中webpack打包后vendor.xxx.js文件一般都特别大,其原因是因为我们引用的依赖都被压缩成一个js文件,这样会导致vendor文件过大.页面加载速度过慢,影响用户体验.所以我们就要把 ...
- SVN百度云服务器安装使用。
安装SVN客户端 此时,必须重启,否则经常出现用不了. 重启后,还是用不了的话,那么就重新安装系统. 网站地址: http://xiaomosheng.bceapp.com/ SVN代码服务器的地址: ...
- oracle_dataGuard_11G
[李红]--切记_从库只安装实例_不需要 dbca 创建数据库 但是 netca 创建监听看个人喜欢,我反正是创建了.[DataGuard_主数据库的参数配置]1.启用 force logging 功 ...
- 严重：one or more listeners failed. Full details will be found in the appropriate container log file
one or more listeners failed. Full details will be found in the appropriate container log file 这句话 ...
- struct与class的区别
C++中的struct是对C中struct的扩充,它已经不再只是一个包含不同数据类型的数据结构,因为其扩充了太多功能.总的来说,C++中struct和class极其相似,比如,struct能包含成员函 ...