AJAX 初识
AJAX全称为 Asynchronous Javasript And XML,是在浏览器端进行网络编程(发送请求,接收响应)的技术方案。AJAX 也就是浏览器提供的一套API,可以供 Javascript 调用,从而通过代码来控制请求和响应,实现网络编程。
AJAX 使用基本模板
使用 AJAX 的过程相当于访问一个页面
// 1.创建一个 XMLHttpRequest 的对象(相当于打开了一个浏览器)
// 兼容方案
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
// 2,输入网址(get或post 根据需求设置,一般参数通过url传递则使用 get, 关于账户密码等敏感信息使用 post)
xhr.open('get', 'time.php');
// 3.敲回车,开始请求
// 因为响应需要时间,所以无法通过返回值的方式返回响应
// var response = xhr.send();
// console.log(response);
xhr.send();
// 3.等待响应
xhr.addEventListener('readystatechange', function () {
if (this.readyState === 4) {
// 获取响应体
console.log(this.responseText);
}
});
详解等待状态(readyState)
readyState | 状态描述 | 含义 |
0 | unsent | 初始化,请求了一个代理对对象, |
1 | opened | open()方法已经调用,建立一个与服务端特定端口的连接 |
2 | header_receive | 已经接收到了响应头,但是还没有接收响应体 |
3 | loading | 正在下载响应体 |
4 | done | 响应体下载完成,可以直接使用 responseText |
遵循HTTP
var xhr = new XMLHttpRequest(); // 设置请求行
xhr.open('get', 'time.php'); // 设置请求头
xhr.setRequestHeader('Accept', 'text/plain'); // 设置请求体
xhr.send(null); xhr.addEventListener('readystatechange', function () {
if (this.readyState === 4 && this.status === 200) { // 获取响应状态码
console.log(this.status); // 获取响应状描述
console.log(this.statusText); // 获取响应头信息
console.log(this.getResponseHeader('Content-Type')); // 指定响应头
console.log(this.getAllResponseHeaders()); // 全部响应头 // 转换成数组
console.log(this.getAllResponseHeaders().split("\n")); // 获取响应头中的某一个信息
console.log(this.getResponseHeader('server')); }
});
同步与异步
同步:在同一时刻只能做同一件事,在执行一些耗时的事情时不去做其他事情,而是等待
异步:在执行一些耗时的事情是去做其他事情,而不是等待(性能更好,默认为 true)
同步:
console.time('ajax同步');
const xhrSync = new XMLHttpRequest();
xhrSync.open('get', 'time.php', false);
xhrSync.send(); // 同步代码会卡在 send() 这里
console.log(xhrSync.responseText);
console.timeEnd('ajax同步');
异步:
// 异步性能更好,时间更短
console.time('ajax异步');
const xhr = new XMLHttpRequest();
// 这里 第三个参数默认为 true,即不写true时为异步(大多数使用)
xhr.open('get', 'time.php', true);
xhr.send();
console.log(xhr.responseText);
console.timeEnd('ajax异步');
AJAX 初识的更多相关文章
- day059 ajax初识 登录认证练习
ajax初识 ajax有两个特点: 一个是异步,另一个是浏览器页面局部刷新(这个特点是用户感受不到的时候进行的) 示例: 页面输入两个整数,通过AJAX传输到后端计算结果并返回 在HTML文件中: & ...
- Ajax—初识
看DRP的过程.又一次学习了一遍Ajax.更深刻的体会到了Ajax所具有的魅力.Ajax是一种技术或者方法,更是一 种艺术.它让我们的程序以一种更完美的姿态呈如今用户面前.以下就让我们一起走进Ajax ...
- 70、django之Ajax初识
Ajax准么说是用于Javascript与服务器端进行交互的,我们之前呢没有了解ajax也同样可以完成与服务器的交互,那么ajax的优势在哪里?首先ajax是异步交互的也就是说我们基本不会遇到卡顿现象 ...
- AJAX初识(原生JS版AJAX和Jquery版AJAX)
一.什么是JSON 1.介绍 JSON独立于语言,是一种与语言无关的数据格式. JSON指的是JavaScript对象表示法(JavaScript Object Notation) JSON是轻量级的 ...
- day059-60 ajax初识 登录认证练习 form装饰器, form和ajax上传文件 contentType
一.ajax 的特点 1.异步交互:客户端发出一个请求后,需要等待服务器响应结束后, 才能发出第二个请求 2.局部刷新:给用户的感受是在不知不觉中完成请求和响应过程. 二.ajax 模板示例 ($.a ...
- django之Ajax初识
Ajax准么说是用于Javascript与服务器端进行交互的,我们之前呢没有了解ajax也同样可以完成与服务器的交互,那么ajax的优势在哪里?首先ajax是异步交互的也就是说我们基本不会遇到卡顿现象 ...
- jQuery的Ajax初识
1. 什么是Ajax? Ajax是“Asynchronous Javascript And XML(异步Javascript和XML)”的缩写, 是指一种创建交互式网页应用的网站开发技术. Ajax不 ...
- Django - Ajax初识
当需要在弹出的对话框中,做判断操作时,需要用到ajax 1.host.html <!DOCTYPE html><html lang="en"><hea ...
- ajax初识
Ajax 全称为:"Asynchronous JavaScript and XML"(异步 JavaScript 和 XML) 它并不是 JavaScript 的一种单一技术,而是 ...
随机推荐
- 【自学Spring Boot】什么是Spring Boot
为啥要有Spring Boot? 以前大学刚开始学java web的时候,需要搭建起web框架,当时使用的是SSH(struts+spring+hibernate),那就开始搭建吧,初学者哪里知道整套 ...
- iptables实现端口映射(本地和远程端口映射)
说明:需要将外网访问本地IP(192.168.75.5)的80端口转换为访问192.168.75.3的8000端口,这就需要用到iptables的端口映射 实现:1. 需要先开启linux的数据转发功 ...
- 纯CSS样式实现数字加减按钮的最佳方案
前言: 对于数字加减按钮的实现,以前用过不少方案,诸如: 1.使用背景图片——这种效果比较好,缺点是样式控制有点复杂了,还需要使用图片: 2.直接使用“+”“-”——这种方法简单粗暴,最容易实现,缺点 ...
- how-does-mysql-replication-really-work/ what-causes-replication-lag
https://www.cnblogs.com/kevingrace/p/6274073.html https://www.cnblogs.com/kevingrace/p/6261091.html ...
- sqlserver表被锁了,解锁方法,删除锁的方法
-- 查询死锁select request_session_id spid, OBJECT_NAME(resource_associated_entity_id) table ...
- 转:laydate只显示时分,不显示秒
@转载地址 原文全文: 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/weixin_40 ...
- [LeetCode] 93. Restore IP Addresses 复原IP地址
Given a string containing only digits, restore it by returning all possible valid IP address combina ...
- nightmare API
nightmare API 简单介绍 2016-04-18 nightmare 的 API 不是特别的多,平常使用比较多的主要是配置 nightmare 以及与页面交互的相关API,这里是官方给出的 ...
- Android刘海屏适配 ----- ImmersionBar
android 4.4以上沉浸式状态栏和沉浸式导航栏管理,适配横竖屏切换.刘海屏.软键盘弹出等问题,可以修改状态栏字体颜色和导航栏图标颜色,以及不可修改字体颜色手机的适配,适用于Activity.Fr ...
- python sys模块(12)
在python sys模块提供对解释器使用或维护的一些变量的访问,以及与解释器强烈交互的函数!关于sys模块在官网也有详细的介绍:python sys模块官方介绍. 一.sys模块简介 sys.arg ...