ajax的原理是什么?如何实现?
一、是什么
AJAX
全称(Async Javascript and XML)
即异步的JavaScript
和XML
,是一种创建交互式网页应用的网页开发技术,可以在不重新加载整个网页的情况下,与服务器交换数据,并且更新部分网页
Ajax
的原理简单来说通过XmlHttpRequest
对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript
来操作DOM
而更新页面
流程图如下:
下面举个例子:
领导想找小李汇报一下工作,就委托秘书去叫小李,自己就接着做其他事情,直到秘书告诉他小李已经到了,最后小李跟领导汇报工作
Ajax
请求数据流程与“领导想找小李汇报一下工作”类似,上述秘书就相当于XMLHttpRequest
对象,领导相当于浏览器,响应数据相当于小李
浏览器可以发送HTTP
请求后,接着做其他事情,等收到XHR
返回来的数据再进行操作
二、实现过程
实现 Ajax
异步交互需要服务器逻辑进行配合,需要完成以下步骤:
创建
Ajax
的核心对象XMLHttpRequest
对象通过
XMLHttpRequest
对象的open()
方法与服务端建立连接构建请求所需的数据内容,并通过
XMLHttpRequest
对象的send()
方法发送给服务器端通过
XMLHttpRequest
对象提供的onreadystatechange
事件监听服务器端你的通信状态接受并处理服务端向客户端响应的数据结果
将处理结果更新到
HTML
页面中
1、创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
2、与服务器建立连接
xhr.open(method, url, [async][, user][, password])
参数说明:
method
:表示当前的请求方式,常见的有GET
、POST
url
:服务端地址async
:布尔值,表示是否异步执行操作,默认为true
user
: 可选的用户名用于认证用途;默认为`nullpassword
: 可选的密码用于认证用途,默认为`null
3、给服务器发送数据
通过 XMLHttpRequest
对象的 send()
方法,将客户端页面的数据发送给服务端
xhr.send([body])
body
: 在 XHR
请求中要发送的数据体,如果不传递数据则为 null
如果使用GET
请求发送数据的时候,需要注意如下:
- 将请求数据添加到
open()
方法中的url
地址中 - 发送请求数据中的
send()
方法中参数设置为null
4、绑定onreadystatechange事件
onreadystatechange
事件用于监听服务器端的通信状态,主要监听的属性为XMLHttpRequest.readyState
,
关于XMLHttpRequest.readyState
属性有五个状态,如下图显示
只要 readyState
属性值一变化,就会触发一次 readystatechange
事件
XMLHttpRequest.responseText
属性用于接收服务器端的响应结果
举个例子:
const request = new XMLHttpRequest()
request.onreadystatechange = function(e){
if(request.readyState === 4){ // 整个请求过程完毕
if(request.status >= 200 && request.status <= 300){
console.log(request.responseText) // 服务端返回的结果
}else if(request.status >=400){
console.log("错误信息:" + request.status)
}
}
}
request.open('POST','http://xxxx')
request.send()
三、封装
通过上面对XMLHttpRequest
对象的了解,下面来封装一个简单的ajax
请求
//封装一个ajax请求
function ajax(options) {
//创建XMLHttpRequest对象
const xhr = new XMLHttpRequest() //初始化参数的内容
options = options || {}
options.type = (options.type || 'GET').toUpperCase()
options.dataType = options.dataType || 'json'
const params = options.data //发送请求
if (options.type === 'GET') {
xhr.open('GET', options.url + '?' + params, true)
xhr.send(null)
} else if (options.type === 'POST') {
xhr.open('POST', options.url, true)
xhr.send(params) //接收请求
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
let status = xhr.status
if (status >= 200 && status < 300) {
options.success && options.success(xhr.responseText, xhr.responseXML)
} else {
options.fail && options.fail(status)
}
}
}
}
使用方式如下
ajax({
type: 'post',
dataType: 'json',
data: {},
url: 'https://xxxx',
success: function(text,xml){//请求成功后的回调函数
console.log(text)
},
fail: function(status){////请求失败后的回调函数
console.log(status)
}
})
ajax的原理是什么?如何实现?的更多相关文章
- Ajax工作原理
在写这篇文章之前,曾经写过一篇关于AJAX技术的随笔,不过涉及到的方面很窄,对AJAX技术的背景.原理.优缺点等各个方面都很少涉及null.这次写这篇文章的背景是因为公司需要对内部程序员做一个培训.项 ...
- 关于Ajax工作原理
1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...
- Ajax工作原理(转)
1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...
- ajax请求原理及jquery $.ajax封装全解析
.ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得 ...
- Ajax的原理和运行机制
关于ajax,是最近炒得非常火的一种技术,并且时下它也是非常流行.当然,它并不是什么新技术,而是在各种已有的技术和支持机制下的一个统一.在我的项目中,偶尔也会用到ajax,用来给用户一些无刷新的体验. ...
- Ajax 技术原理(转)
Ajax 技术原理 2010-01-04 原文出处:http://www.nowamagic.net/ajax/ajax_AjaxPrinciple.php 在写这篇文章之前,曾经写过一篇关于AJAX ...
- (转)Ajax的原理和应用
1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...
- aJax学习之Ajax工作原理
转自:http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html 在写这篇文章之前,曾经写过一篇关于AJAX技术的 ...
- ajax请求原理
首先分析使用ajax时候有那些不确定的因素 请求:1 请求的方式不确定 2 请求的地址不确定 3 请求是否异步不确定 4 发送的数据不确定 响应:5 返回的数据不确定 6 响应成功之后 需要处理的业务 ...
- ajax的原理解析
一.关于同步与异步的分析: 异步传输是面向字符的传输,它的单位是字符:而同步传输是面向比特的传输,它的单位是桢,它传输的时候要求接受方和发送方的时钟是保持一致的.而ajax就是采用的异步请求方式的. ...
随机推荐
- MasaFramework -- 领域驱动设计
概念 什么是领域驱动设计 领域驱动的主要思想是, 利用确定的业务模型来指导业务与应用的设计和实现.主张开发人员与业务人员持续地沟通和模型的持续迭代,从而保证业务模型与代码的一致性,实现有效管理业务的复 ...
- python -m pip install --upgrade pip报No module named pip解决方法
解决方法: 1. python -m ensurepip 2. python -m pip install --upgrade pip 注意:添加pip环境变量 在python安装目录下搜索pip3或 ...
- python 之excel文件读取封装
import os import xlrd PATH = lambda p: os.path.abspath( os.path.join(os.path.dirname(__file__), p) ) ...
- uniapp微信小程序 下拉刷新(上拉请求下一页数据)
<template>标签中: <view class="" v-if="daShow==1"> <view class=" ...
- [深度学习] 基于切片辅助超推理库SAHI优化小目标识别
对象检测是迄今为止计算机视觉中最重要的应用领域.然而,小物体的检测和大图像的推理仍然是实际使用中的主要问题,这是因为小目标物体有效特征少,覆盖范围少.小目标物体的定义通常有两种方式.一种是绝对尺度定义 ...
- Google分布式文件系统GFS论文学习
GFS作为最著名的分布式文件系统,首先具备了大规模.可扩展.适配大文件.自动运维等高级特性.虽然是比较早期的分布式文件系统,但是它里面的设计思想还是值得现代分布式系统设计参考的,并且还有很多后期著名的 ...
- Flutter异常监控 - 伍 | 关于异常监控框架设计的思考
前言 最近阅读 Catcher.BugSnag.Rollbar 三个 Flutter 异常监控开源框架,文章链接如下: Flutter 异常监控 - 壹 | 从 Zone 说起 Flutter 异常监 ...
- java进阶篇——Stream流编程
Stream流 函数式接口 1.消费型接口--Consumer @FunctionalInterface public interface Consumer<T> { /** * 对给定的 ...
- 探究BrainSplit-集群脑裂
本篇文章将会以redis集群为例,分享在主从集群中会导致数据丢失的一个问题:BrainSplit-集群脑裂 1.什么是集群脑裂 所谓的脑裂,就是指在主从集群中,同时有两个主节点,它们都能接收写请求.而 ...
- ionic+vue+capacitor系列笔记--01项目初始化
Ionic 是什么? Ionic 是一款接近原生的 Html5 移动 App 开发框架,只需要你会 HTML.CSS 和 JavaScript 就可以开发移动 App应用,使用最基础的 Web 技术创 ...