从零开始学 Web 之 Ajax(三)Ajax 概述,快速上手
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新......
- github:https://github.com/Daotin/Web
- 微信公众号:Web前端之巅
- 博客园:http://www.cnblogs.com/lvonve/
- CSDN:https://blog.csdn.net/lvonve/
在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!
一、Ajax 概述
Ajax 全称:Asynchronous JavaScript and XML(异步 JavaScript 和 XML)。它不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。它可以在无需重新加载整个网页的情况下,能够更新部分网页的技术。而传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
还有为什么叫异步呢?
因为在加载的时候,页面的其他部分还是可以自由操作的,没有出现卡死的状态,所以是异步。
有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。
在此之前,我们可以通过以下几种方式让浏览器发出对服务端的请求,获得服务端的数据:
- 地址栏输入地址,回车,刷新
- 特定元素的 href 或 src 属性
- 表单提交
这些方案都是我们无法通过或者很难通过代码的方式进行编程(对服务端发出请求并且接受服务端返回的响应) 。
如果仔细观察一个Form的提交,你就会发现,一旦用户点击“Submit”按钮,表单开始提交,浏览器就会刷新页面,然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因,就会得到一个404页面。
这就是Web的运作原理:一次HTTP请求对应一个页面。
如果要让用户留在当前页面中,同时发出新的HTTP请求,就必须用JavaScript发送这个新请求,接收到数据后,再用JavaScript更新页面,这样一来,用户就感觉自己仍然停留在当前页面,但是数据却可以不断地更新。
最早大规模使用AJAX的就是Gmail,Gmail的页面在首次加载后,剩下的所有数据都依赖于AJAX来更新。
用JavaScript写一个完整的AJAX代码并不复杂,但是需要注意:AJAX请求是异步执行的,也就是说,要通过回调函数获得响应。
二、Ajax快速上手
使用 Ajax 的过程可以类比平常我们访问网页过程 :
// 1. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2. 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址
xhr.open("get", "checkusername.php?username=" + uname, true);
// 3. 通过连接发送一次请求 —— 相当于回车或者点击访问发送请求
xhr.send(null);
// 仅仅针对 post 请求
//xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 4. 指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
console.log(this.responseText);
}
}
};
1、创建对象
在IE6及以下的时候,是不支持 XMLHttpRequest 对象的,那么与之对应写法为:
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
所以为了兼容性,上面的创建对象的方式改为:
var xhr = null;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
2、open 方法
第一个参数是请求的方式,是 get 请求还是 post 请求。一般取决后端开发的php文件里面写的是 get 还是 post。
第二个参数是需要请求的地址。如果是 get 请求,需要在地址后面加上 ? 进行连接操作,连接的是需要请求的你内容。(参考下面验证用户名示例),如果是 post 请求,只需要写请求的地址就可以了,它的请求内容是写在 send 中的。
第三个参数是同步或者异步,一般可以不写,不写默认异步,false:同步,true:异步。
3、send 方法
对于 get 方式,参数为 null;
对于 post 方式,参数为请求的数据。
var param = "username=" + uname; // 和 get 地址后面 ? 链接请求内容一致
shr.send(param);
对于 post 请求,还需要设置下请求头(post请求才有)
// 仅仅针对 post 请求才有
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
4、onreadystatechange 回调函数
之所以是回调函数,这样不会阻塞当前的操作,什么时候服务器返回数据,什么时候使用。这就是异步。
status:服务器返回的状态码
this.status == 200:表示响应成功;404 表示没有找到请求的资源;500 表示服务器端错误。
readyState:
xhr对象的状态改变时,readyState的值也会相应的改变。具体数值的含义见下表:
readyState | xhr状态 | 说明 |
---|---|---|
0 | UNSENT | 代理(xhr)被创建,但尚未调用 open 方法 |
1 | OPENED | open 方法已经被调用,建立了连接 |
2 | HEADERS_RECEIVED | send 方法已经被调用,已经可以获取状态行和响应头 |
3 | LOADING | 响应体下载中,responseText 属性可能已经包含部分数据 |
4 | DONE | 响应体下载完成,可以直接调用 responseText 获取数据 |
详细解析代码:
var xhr = new XMLHttpRequest();
console.log(xhr.readyState);
// => 0
// 初始化 请求代理对象
xhr.open('GET', 'time.php');
console.log(xhr.readyState);
// => 1
// open 方法已经调用,建立一个与服务端特定端口的连接
xhr.send();
xhr.addEventListener('readystatechange', function () {
switch (this.readyState) {
case 2:
// => 2
// 已经接受到了响应报文的响应头
// 可以拿到头
// console.log(this.getAllResponseHeaders())
console.log(this.getResponseHeader('server'));
// 但是还没有拿到体
console.log(this.responseText);
break;
case 3:
// => 3
// 正在下载响应报文的响应体,有可能响应体为空,也有可能不完整
// 在这里处理响应体不保险(不可靠)
console.log(this.responseText);
break;
case 4:
// => 4
// 一切 OK (整个响应报文已经完整下载下来了)
// 这里处理响应体
console.log(this.responseText);
break;
}
});
当 readyState == 2 时,只获取到数据头,这时不能使用 responseText 获取,而是用 getResponseHeader 来获取数据头信息。
当 readyState == 3 时,可能已经获取部分数据体,但是处理数据是不可靠的,所以一般一般我们都是在 readyState 值为 4 时,执行响应的后续逻辑 。
其实,当 onreadystatechange 执行时 并且 readyState == 4 的时候,在 HTML5 中有了更加便捷的写法:
xhr.onload = function () {
console.log(this.readyState); // 4
console.log(this.readyState);
}
三、案例:点击按钮验证用户名是否存在
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<h1>用户注册</h1>
用户名:
<input type="text" name="username">
<input type="button" value="验证用户名" id="btn">
<span></span>
<br> 密码:
<input type="password" name="passwd">
<br>
<input type="submit" value="注册提交">
</div>
<script>
var spanObj = document.getElementsByTagName("span")[0];
document.getElementById("btn").onclick = function () {
// 获取用户名
var uname = document.getElementsByName("username")[0].value;
// 发送给服务器处理
var xhr = new XMLHttpRequest();
xhr.open("get", "checkusername.php?username=" + uname, true);
xhr.send(null);
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
spanObj.innerText = xhr.responseText;
if (xhr.responseText == "用户名已存在!") {
spanObj.style.color = "red";
} else {
spanObj.style.color = "green";
}
}
};
};
</script>
</body>
</html>
后台 PHP代码:
<?php
$user = $_GET["username"];
if($user == "lvonve") { // 这里仅仅只判断一个用户名,实际上是由数据库提供
echo "用户名已存在!";
} else {
echo "用户名可以使用!";
}
?>
从零开始学 Web 之 Ajax(三)Ajax 概述,快速上手的更多相关文章
- 从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 Ajax(二)PHP基础语法
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 Ajax(四)接口文档,验证用户名唯一性案例
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 Ajax(五)同步异步请求,数据格式
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 Ajax(六)jQuery中的Ajax
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 Ajax(七)跨域
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 Ajax(一)服务器相关概念
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 JavaScript(一)JavaScript概述
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 移动Web(三)Zepto
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- 考研部分概念和流程(若不全和错误可提示我补充,另考研帮app推荐)
上大学必须经过全国统一高考,而就读硕士研究生的途径相对而言要多一些,也更灵活一些.已经工作的人,除了放弃工作报考研究生以外,还可以不脱产申请攻读学位,或申请单独考试.不脱产申请攻读学位,通俗的讲,就是 ...
- java多线程系列9 高级同步工具(3) CyclicBarrier
CyclicBarrier 一个同步辅助类,它允许一组线程互相等待,直到到达某个公共屏障点 (common barrier point) 然后一再执行 public class CyclicBar ...
- 无网情况下linux安装django
创建虚拟环境~/project/hanqin/django> virtualenv monitor2~/project/hanqin/django/monitor2> cd bin~/pr ...
- Redis Sentinel 模拟故障迁移
什么是redis sentinel 参考文档:https://redis.io/topics/sentinel 简单的来说,就是Redis Sentinel 为redis 提供高可用性,主要体现在下面 ...
- 向jsp中引入公共文件
前沿,在网页开发中,总会存在某几个.js或者某几个.css是所有.jsp文件的公用文件,为了方便引用 我们把这些在公共的.js及.css文件放到一个.jsp文件中,只需要将这个引入所有公共.js及.c ...
- SQL SERVER占用CPU过高优化
操作系统是Windows2008R2 ,数据库是SQL2014 64位. 近阶段服务器出现过几次死机,管理员反馈机器内存使用率100%导致机器卡死.于是做了个监测服务器的软件实时记录CPU数据,几日观 ...
- JDBC几种常见的数据库连接
JDBC的URL=协议名+子协议名+数据源名.a 协议名总是“jdbc”.b 子协议名由JDBC驱动程序的编写者决定.c 数据源名也可能包含用户与口令等信息:这些信息也可单独提供.几种常见的数据库连接 ...
- SSD磁盘测试不达标排查
最近购买了一块4T的Inter_SSD_D3-4510硬盘安装在了一台DELL PowerEdge R640服务器,经过测试发现磁盘和产品手册上描述的性能相差过大,相当于产品手册性能的1/2,一下是 ...
- Android开发 - 解决DialogFragment在全屏时View被状态栏遮住的问题
我的上一篇文章:设置DialogFragment全屏显示 可以设置对话框的内容全屏显示,但是存在在某些机型上顶部的View被状态栏遮住的问题.经过测试,发现了一种解决办法,在DialogFragmen ...
- 【BZOJ】 Hash Killer I II III
前言 这里只是一个整理... Solution Hash Killer I Hash Killer II