AJAX快速上手和基本核心
一、快速上手AJAX
使用ajax的过程可以类比平常我们访问网页过程
1.创建一个XMLHttpRequest类型的对象------相当于打开了浏览器
var xhr = new XMLHttpRequest();
2.打开一个网址之间的连接-------相当于在地址栏输入访问地址
xhr.open('GET', 'http://test1.com/ajax/time.php');
3.通过连接连接发送一次请求-------相当于回车或点击访问发送请求
xhr.send();
4.指定xhr状态变化事件处理函数---------相当于处理网页呈现后的操作
xhr.onreadystatechange = function () {
//通过 xhr 的readyState 判断此次请求的响应是否接受完成
if (this.readyState!==4) return;
//通过 xhr 的responseText 获取到响应的响应体
console.log(this.responseText);
}
二、readyState
由于readystatechange 事件是在 xhr 对象状态变化时触发(不单是在得到响应时),也就意味着这个事件会被触发多次,所以得有必要了解每一个状态值代表的含义。
以下是各状态值出现的顺序
<script>
var xhr= new XMLHttpRequest();
console.log(xhr.readyState);
//==>0
//初始化 请求代理对象 xhr.open('GET', 'http://test1.com/ajax/time.php');
console.log(xhr.readyState);
//==>1
//open 方法已经调用 , 建立一个与服务端特定端口的连接 xhr.send(); xhr.addEventListener('readystatechange',function(){
switch (xhr.readyState) {
case 2:
console.log(xhr.readyState);
//==>2
//已经接收到了响应报文的响应头(但是还没有拿到请求体)
break;
case 3:
console.log(xhr.readyState);
console.log(this.responseText);
//==>3
//正在下载响应报文的响应体,有可能响应体为空,也有可能不完整
//在这里处理响应体不保险(不可靠)
break;
case 4:
console.log(xhr.readyState);
//==>4
//整个响应报文已经完整下载下来了
break;
default:
// statements_def
break;
}
}); </script>
AJAX快速上手和基本核心的更多相关文章
- AJAX快速上手
创建XMLHttpRequest对象 xmlHttp = new XMLHttpRequest(); xmlHttp = new ActiveXObject('Microsoft.XMLHTTP'); ...
- 【java框架】MyBatis-Plus(1)--MyBatis-Plus快速上手开发及核心功能体验
1.MyBatis-Plus入门开发及配置 1.1.MyBatis-Plus简介 MyBatis-Plus(简称 MP)是一个 MyBatis的增强工具,在 MyBatis 的基础上只做增强不做改变, ...
- 从零开始学 Web 之 Ajax(三)Ajax 概述,快速上手
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 如何快速上手一个新技术之vue学习经验
碰到紧急项目挪别人的vue项目过来直接改,但是vue是18年初看过一遍,18年底再来用,早就忘到九霄云外了,结果丢脸的从打开vue开始学,虽然之前在有道云笔记做了很多记录,然后没有系统整理.所以借这次 ...
- 快速上手RaphaelJS-Instant RaphaelJS Starter翻译(一)
(目前发现一些文章被盗用的情况,我们将在每篇文章前面添加原文地址,本文源地址:http://www.cnblogs.com/idealer3d/p/Instant_RaphaelJS_Start ...
- MongoDB快速上手
1. MongoDB简介 MongoDB是一个跨平台的基于Key_Value键值对形式保存数据的NoSQL文档类型数据库. NoSQL(not only sql)数据库,泛指非关系型数据库. 1.1 ...
- smarty 快速上手
smarty半小时快速上手入门教程 投稿:shichen2014 字体:[增加 减小] 类型:转载 时间:2014-10-27我要评论 这篇文章主要介绍了smarty半小时快速上手入门教程,以实例的形 ...
- smarty半小时快速上手入门教程
http://www.jb51.net/article/56754.htm http://www.yiibai.com/smarty/smarty_functions.html http://www. ...
- knockoutJS 快速上手
翻译:Knockout 快速上手 - 3: knockoutJS 快速上手 许多时候,学会一种技术的有效方式就是使用它解决实际中的问题.在这一节,我们将学习使用 Knockout 来创建一个常见的应用 ...
随机推荐
- ECMAScript简介以及es6新增语法
ECMAScript简介 ECMAScript与JavaScript的关系 ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现.(前者是后者的 ...
- python之six用法
six.PY2 返回一个表示当前运行环境是否为python2的boolean值 six.PY3 返回一个表示当前运行环境是否为python3的boolean值 import six,sys print ...
- 【构造】Bzoj1432[ZJOI2009]Function
Description Input 一行两个整数n; k. Output 一行一个整数,表示n 个函数第k 层最少能由多少段组成. Sample Input 1 1 Sample Output 1 ...
- B20J_2733_[HNOI2012]永无乡_权值线段树合并
B20J_2733_[HNOI2012]永无乡_权值线段树合并 Description:n座岛,编号从1到n,每座岛都有自己的独一无二的重要度,按照重要度可以将这n座岛排名,名次用1到 n来表示.某些 ...
- Postman-----设置环境变量
1.环境变量的作用域: 使用环境变量(可用于切换开发环境/生产环境.设置动态参数),有4个作用域(优先级由高到低):Global, Environment, Local, Data.同名变量会使用优先 ...
- Sublime text3所遇到的问题
sublime text3的下载地址:https://www.sublimetext.com/ 解决sublime text上不能使用交互的input的输入问题 通过安装sublimeREPL插件解决 ...
- python 防止sql注入字符串拼接的正确用法
在使用pymysql模块时,在使用字符串拼接的注意事项错误用法1 sql='select * from where id="%d" and name="%s" ...
- Text-CNN-文本分类-keras
Text CNN 1. 简介 TextCNN 是利用卷积神经网络对文本进行分类的算法,由 Yoon Kim 在 "Convolutional Neural Networks for Sent ...
- MySQL 复制 - 性能与扩展性的基石 3:常见问题及解决方案
主备复制过程中有很大可能会出现各种问题,接下来我们就讨论一些比较普遍的问题,以及当遇到这些问题时,如何解决或者预防问题发生. 1 数据损坏或丢失 问题描述:服务器崩溃.断电.磁盘损坏.内存或网络错误等 ...
- Docker常见故障
— Docker虚拟化故障 — Docker虚拟化主要有三类故障: 应用故障:应用执行状态与预期不一致. 容器故障:无法正确创建.停止.更新容器等. 集群故障:集群创建失败.更新失败.无法连接等. — ...