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 初识的更多相关文章

  1. day059 ajax初识 登录认证练习

    ajax初识 ajax有两个特点: 一个是异步,另一个是浏览器页面局部刷新(这个特点是用户感受不到的时候进行的) 示例: 页面输入两个整数,通过AJAX传输到后端计算结果并返回 在HTML文件中: & ...

  2. Ajax—初识

    看DRP的过程.又一次学习了一遍Ajax.更深刻的体会到了Ajax所具有的魅力.Ajax是一种技术或者方法,更是一 种艺术.它让我们的程序以一种更完美的姿态呈如今用户面前.以下就让我们一起走进Ajax ...

  3. 70、django之Ajax初识

    Ajax准么说是用于Javascript与服务器端进行交互的,我们之前呢没有了解ajax也同样可以完成与服务器的交互,那么ajax的优势在哪里?首先ajax是异步交互的也就是说我们基本不会遇到卡顿现象 ...

  4. AJAX初识(原生JS版AJAX和Jquery版AJAX)

    一.什么是JSON 1.介绍 JSON独立于语言,是一种与语言无关的数据格式. JSON指的是JavaScript对象表示法(JavaScript Object Notation) JSON是轻量级的 ...

  5. day059-60 ajax初识 登录认证练习 form装饰器, form和ajax上传文件 contentType

    一.ajax 的特点 1.异步交互:客户端发出一个请求后,需要等待服务器响应结束后, 才能发出第二个请求 2.局部刷新:给用户的感受是在不知不觉中完成请求和响应过程. 二.ajax 模板示例 ($.a ...

  6. django之Ajax初识

    Ajax准么说是用于Javascript与服务器端进行交互的,我们之前呢没有了解ajax也同样可以完成与服务器的交互,那么ajax的优势在哪里?首先ajax是异步交互的也就是说我们基本不会遇到卡顿现象 ...

  7. jQuery的Ajax初识

    1. 什么是Ajax? Ajax是“Asynchronous Javascript And XML(异步Javascript和XML)”的缩写, 是指一种创建交互式网页应用的网站开发技术. Ajax不 ...

  8. Django - Ajax初识

    当需要在弹出的对话框中,做判断操作时,需要用到ajax 1.host.html <!DOCTYPE html><html lang="en"><hea ...

  9. ajax初识

    Ajax 全称为:"Asynchronous JavaScript and XML"(异步 JavaScript 和 XML) 它并不是 JavaScript 的一种单一技术,而是 ...

随机推荐

  1. 【自学Spring Boot】什么是Spring Boot

    为啥要有Spring Boot? 以前大学刚开始学java web的时候,需要搭建起web框架,当时使用的是SSH(struts+spring+hibernate),那就开始搭建吧,初学者哪里知道整套 ...

  2. iptables实现端口映射(本地和远程端口映射)

    说明:需要将外网访问本地IP(192.168.75.5)的80端口转换为访问192.168.75.3的8000端口,这就需要用到iptables的端口映射 实现:1. 需要先开启linux的数据转发功 ...

  3. 纯CSS样式实现数字加减按钮的最佳方案

    前言: 对于数字加减按钮的实现,以前用过不少方案,诸如: 1.使用背景图片——这种效果比较好,缺点是样式控制有点复杂了,还需要使用图片: 2.直接使用“+”“-”——这种方法简单粗暴,最容易实现,缺点 ...

  4. 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 ...

  5. sqlserver表被锁了,解锁方法,删除锁的方法

    -- 查询死锁select        request_session_id spid,       OBJECT_NAME(resource_associated_entity_id) table ...

  6. 转:laydate只显示时分,不显示秒

    @转载地址 原文全文: 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/weixin_40 ...

  7. [LeetCode] 93. Restore IP Addresses 复原IP地址

    Given a string containing only digits, restore it by returning all possible valid IP address combina ...

  8. nightmare API

    nightmare API 简单介绍 2016-04-18 nightmare 的 API 不是特别的多,平常使用比较多的主要是配置 nightmare 以及与页面交互的相关API,这里是官方给出的  ...

  9. Android刘海屏适配 ----- ImmersionBar

    android 4.4以上沉浸式状态栏和沉浸式导航栏管理,适配横竖屏切换.刘海屏.软键盘弹出等问题,可以修改状态栏字体颜色和导航栏图标颜色,以及不可修改字体颜色手机的适配,适用于Activity.Fr ...

  10. python sys模块(12)

    在python sys模块提供对解释器使用或维护的一些变量的访问,以及与解释器强烈交互的函数!关于sys模块在官网也有详细的介绍:python sys模块官方介绍. 一.sys模块简介 sys.arg ...