应运ajax的几种语言,Ajax指的是什么
Ajax指的是什么
发布时间:2020-08-05 14:18:52
来源:亿速云
阅读:103
作者:小新
这篇文章将为大家详细讲解有关Ajax指的是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
Ajax,全称为Asynchronous JavaScript and XML,即异步的JavaScript和XML。它不是一门编程语言,而是利用JavaScript在保证页面不被刷新、页面链接不改变的情况下与服务器交换数据并更新部分网页的技术。
对于传统的网页,如果想更新其内容,那么必须要刷新整个页面,但有了Ajax,便可以在页面不被全部刷新的情况下更新其内容。在这个过程中,页面实际上是在后台与服务器进行了数据交互,获取到数据之后,再利用JavaScript改变网页,这样网页内容就会更新了。
1. 实例引入
浏览网页的时候,我们会发现很多网页都有下滑查看更多的选项。比如,拿微博来说,我们以我的个人的主页为例:https://m.weibo.cn/u/2830678474,切换到微博页面,一直下滑,可以发现下滑几个微博之后,再向下就没有了,转而会出现一个加载的动画,不一会儿下方就继续出现了新的微博内容,这个过程其实就是Ajax加载的过程,如图6-1所示。
图6-1 页面加载过程
我们注意到页面其实并没有整个刷新,也就意味着页面的链接没有变化,但是网页中却多了新内容,也就是后面刷出来的新微博。这就是通过Ajax获取新数据并呈现的过程。
2. 基本原理
初步了解了Ajax之后,我们再来详细了解它的基本原理。发送Ajax请求到网页更新的这个过程可以简单分为以下3步:
(1) 发送请求; (2) 解析内容; (3) 渲染网页。
下面我们分别来详细介绍这几个过程。
发送请求
我们知道JavaScript可以实现页面的各种交互功能,Ajax也不例外,它也是由JavaScript实现的,实际上执行了如下代码:var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","/ajax/",true);
xmlhttp.send();
这是JavaScript对Ajax最底层的实现,实际上就是新建了XMLHttpRequest对象,然后调用onreadystatechange属性设置了监听,然后调用open()和send()方法向某个链接(也就是服务器)发送了请求。前面用Python实现请求发送之后,可以得到响应结果,但这里请求的发送变成JavaScript来完成.由于设置了监听,所以当服务器返回响应时,onreadystatechange对应的方法便会被触发,然后在这个方法里面解析响应内容即可。
解析内容
得到响应之后,onreadystatechange属性对应的方法便会被触发,此时利用xmlhttp的responseText属性便可取到响应内容。这类似于Python中利用requests向服务器发起请求,然后得到响应的过程。那么返回内容可能是HTML,可能是JSON,接下来只需要在方法中用JavaScript进一步处理即可。比如,如果是JSON的话,可以进行解析和转化。
渲染网页
JavaScript有改变网页内容的能力,解析完响应内容之后,就可以调用JavaScript来针对解析完的内容对网页进行下一步处理了。比如,通过document.getElementById().innerHTML这样的操作,便可以对某个元素内的源代码进行更改,这样网页显示的内容就改变了,这样的操作也被称作DOM操作,即对Document网页文档进行操作,如更改、删除等。
上例中,document.getElementById("myDiv").innerHTML=xmlhttp.responseText便将ID为myDiv的节点内部的HTML代码更改为服务器返回的内容,这样myDiv元素内部便会呈现出服务器返回的新数据,网页的部分内容看上去就更新了。
我们观察到,这3个步骤其实都是由JavaScript完成的,它完成了整个请求、解析和渲染的过程。
再回想微博的下拉刷新,这其实就是JavaScript向服务器发送了一个Ajax请求,然后获取新的微博数据,将其解析,并将其渲染在网页中。
因此,我们知道,真实的数据其实都是一次次Ajax请求得到的,如果想要抓取这些数据,需要知道这些请求到底是怎么发送的,发往哪里,发了哪些参数。如果我们知道了这些,不就可以用Python模拟这个发送操作,获取到其中的结果了吗?
关于Ajax指的是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
应运ajax的几种语言,Ajax指的是什么相关推荐
- ajax请求有多少种写法,Ajax 请求的三种写法
Ajax 请求简介: Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种建立交互式网页应用的网页开发 ...
- Ajax 和 XML: 五种常见 Ajax 模式
Asynchronous JavaScript + XML(Ajax)无疑是 2006 年最热门的技术术语,且有望在 2007 得到进一步发展.但是对您的应用程序来说它究竟有什么意义呢?Ajax 应用 ...
- [Java Web]AJAX Axios | 一种结合HTML来取代传统JSP的技术
⭐作者介绍:大二本科网络工程专业在读,持续学习Java,努力输出优质文章 ⭐作者主页:@逐梦苍穹 ⭐所属专栏:Java Web 目录 1.AJAX 1.1.简介 1.2.作用 1.3.同步和异步 1. ...
- Ajax的五种接收响应头消息(常用)
学习本文你得先了解php与Ajax 我的PHP初探 Ajax的了解与应用 五种响应头消息 1. textt/plain 字符串 服务端的消息响应头:header("Content-Type: ...
- layer ui ajax 样式,layerUi与AJAX的一种思路
javascript: function rep(id) { layer.confirm("确定要拒绝此认证吗?", { btn: ["确定", "取 ...
- ajax的三种方法以及ajax概念
目录 Ajax技术主要包括: 1.客户端脚本语言:JavaScript 2.异步数据获取技术:XMLHttpRequest 3.数据交换和操作技术:XML和XSTL 4.动态显示和交互技术DOM及基于 ...
- jQuery中ajax的4种常用请求方式
jQuery中ajax的4种常用请求方式:1.$.ajax()返回其创建的 XMLHttpRequest 对象. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信 ...
- Asp.Net Ajax的两种基本开发模式
Asp.Net Ajax的两种基本开发模式 引言 最近花了一些时间,将微软Asp.Net官方的Ajax视频全部看了一遍,地址是http://www.asp.net/learn/ajax-videos/ ...
- c .net ajax,Asp.net mvc 2中使用Ajax的三种方式
在Asp.net MVC中,我们能非常方便的使用Ajax.这篇文章将介绍三种Ajax使用的方式,分别为原始的Ajax调用.Jquery.Ajax Helper.分别采用这三种方式结合asp.net m ...
最新文章
- 关于redis的几件小事(一)redis的使用目的与问题
- python 调用linux命令-python3调用linux命令——Subprocess
- python安装教程3.8.5-[分享栈]centos7安装python3.8.5
- java list移除所有元素,从List中移除指定 List 中包含的其所有元素(可选操作)。...
- 基台和种植体如何连接_成年人门牙因某些原因导致缺失该怎么办?如何修复缺失的门牙?...
- 大规模分布式跟踪系统的理论
- MAUI 移植 Xamarin.Forms 自定义渲染器
- Jco服务配置以及程序编写
- AMD深度学习库MIOpen更新,支持CNN加速
- 访问服务器显示无法访问目标主机,发送4接收4无法访问目标主机
- 取决于数学符号_科学发现的未来取决于开放
- 用Python写一个双人对战的小游戏;
- “海潮效应”下,聚则“生”分则“亡”360奏响“经济复苏集结号”
- centos7安装SVN以及eclipse安装svn
- [解疑][TI]TI毫米波雷达系列(一):Texas Instruments德州仪器 相关软件安装及使用时问题汇总,持续更新......
- 中国海洋捕捞市场投资前景分析及“十四五”规划建议报告2022年版
- OpenCV+kinect1.0手语识别(二)手部区域的抠图与跟踪
- 获取linux命令硬盘信息,Linux 下使用命令获取硬盘信息
- ubuntu16.04安装tensorflow,pytorch,gluon等
- 项目专题 1: 结构化方法学自动取款机系统(ATM)分析
热门文章
- Ant 风格路径表达式
- PHP 判断是否包含某字符串
- 安裝jpeg-6b png error错误解决方法
- lzo的安装及在hadoop中的配置
- java log输出到文件路径_Java - 配置log4j的日志文件路径 (附-获取当前类路径的多种方法)...
- java常用的统计_(OJ)Java常用类-统计数字次数
- 凯撒密码pythin密码_凯撒密码术
- JavaScript中的const
- 关于细分到字段的权限系统_操作系统中的细分
- Java LinkedList getFirst()方法与示例