ajax工作原理/实例
ajax是什么?
是一种创建交互式网页应用的一种网页技术。简单来说,就是向服务器发起请求,获得数据使交互性和用户体验更好。
ajax不是一种新的技术,是一些技术的集合体。有
1.XHTML和CSS
2.使用文档的对象模型DOM做动态显示和交互
3.使用XML和XSLY做数据交互和操作。
4.使用XMLHttpRequest将他们绑定到一起
ajax提供了异步与服务器通讯的功能,从而让用户在请求响应的的循环中解脱出来。当用户点击按钮的时候,
javascript和html立即更新ui,向服务器发起异步请求,当接收到服务器返回的数据后,就进行页面的更新。
这种技术,不会刷新整个页面。
ajax工作原理
简单的来说,ajax是通过XMLHttpReequest对象,向服务器发起异步请求,返回请求回来的数据,javascript来操作Dom渲染ui,关键的地方是,XMLHTTPRequire获得数据的过程。
先说一下XMLHTTPRequire对象的属性
1、readyState
HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时,这个属性的值从 0 开始,直到接收到完整的 HTTP 响应,这个值增加到 4。
0 | Uninitialized | 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。 |
1 | Open | open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。 |
2 | Sent | Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。 |
3 | Receiving | 所有响应头部都已经接收到。响应体开始接收但未完成。 |
4 | Loaded | HTTP 响应已经完全接收。 |
readyState 的值不会递减,除非当一个请求在处理过程中的时候调用了 abort() 或 open() 方法。每次这个属性的值增加的时候,都会触发 onreadystatechange 事件句柄。
2、responseText
目前为止为服务器接收到的响应体(不包括头部),或者如果还没有接收到数据的话,就是空字符串。
如果 readyState 小于 3,这个属性就是一个空字符串。当 readyState 为 3,这个属性返回目前已经接收的响应部分。如果 readyState 为 4,这个属性保存了完整的响应体。
如果响应包含了为响应体指定字符编码的头部,就使用该编码。否则,假定使用 Unicode UTF-8。
3、responseXML
对请求的响应,解析为 XML 并作为 Document 对象返回。
4、status
由服务器返回的 HTTP 状态代码,如 200 表示成功,而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。
4、statusText
这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说,当状态为 200 的时候它是 "OK",当状态为 404 的时候它是 "Not Found"。和 status 属性一样,当 readyState 小于 3 的时候读取这一属性会导致一个异常。
还有很多对应的方法 可以看这里的介绍
https://www.w3school.com.cn/xmldom/dom_http.asp
ajax实例
ajax工作原理/实例的更多相关文章
- ajax工作原理及jsonp跨域详解
一.Ajax简介 ajax = 异步 JavaScript 和 XML. ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.我们知道,传统的网页(不使用ajax)如果需要更新内容, ...
- AJAX工作原理与缺点
1.概念:什么是AJAXAJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.2.为什么要使用他 ...
- Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
- 简要总结ajax工作原理及优缺点
虽然在实际的项目中使用多种ajax请求,但就其工作原理,优缺点尚未深入总结, 参考:http://www.cnblogs.com/SanMaoSpace/archive/2013/06/15/3137 ...
- JSP+JavaBean+Servlet工作原理实例…
JSP+JavaBean+Servlet工作原理实例讲解 首先,JavaBean和Servlet虽都是Java程序,但是是完全不同的两个概念.引用mz3226960提出的MVC的概念,即M-model ...
- 【java项目实践】具体解释Ajax工作原理以及实现异步验证username是否存在+源代码下载(java版)
一年前,从不知道Ajax是什么,伴随着不断的积累,到如今常常使用,逐渐有了深入的认识. 今天,假设想开发一个更加人性化,友好,无刷新,交互性更强的网页,那您的目标一定是Ajax. 介绍 在具体讨论Aj ...
- ajax工作原理,Jsonp原理
Ajax工作原理是 相当于在用户和服务器之间加了-个中间层(AJAX引擎),使用户操作与服务器响应异步化. 对于用户请求ajax引擎会做一些数据验证和数据处理,不是所有请求都提交给服务器,当需要从服务 ...
- Ajax工作原理及实例
1.关于ajax的名字 ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式. 2. ...
- AJAX工作原理及其优缺点
1.什么是AJAX?AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.它 ...
随机推荐
- Scala创建SparkStreaming获取Kafka数据代码过程
正文 首先打开spark官网,找一个自己用版本我选的是1.6.3的,然后进入SparkStreaming ,通过搜索这个位置找到Kafka, 点击过去会找到一段Scala的代码 import or ...
- Python3-subprocess模块-子进程管理
简单介绍 subprocess模块可以创建新的进程,执行shell命令.Python脚本等 代码示例 import subprocess # 1.执行进程,并获取返回码 return_code = s ...
- 使用docker创建rocketMQ容器
一.rocketMQ安装 (一)安装NameSrv 1.创建nameSrv数据挂载文件夹 mkdir -p /usr/data/rocketMQ/data/namesrv/logs mkdir -p ...
- slow SQL
一.介绍 慢查询日志可用于查找需要很长时间才能执行的查询,因此是优化的候选者.但是,检查长慢的查询日志可能是一项耗时的任务. 二.配置 # 查看: slow_query_log 慢SQL开关 slow ...
- html+css快速入门教程(3)
练习: 1.画盒子 2.相框 5 基础选择器 5.1 id选择器 ID选择器与类选择器的定义与引用方式类似,只是定义的符号不一样.ID通常表示唯一值,因此,ID选择器在CSS 中通常只出现一次.如果出 ...
- mycat增加开机自启
一.安装及配置: 见https://github.com/MyCATApache/Mycat-Server 二.增加开机自启: 1.添加开机自启脚本:vim /etc/init.d/mycat.sh, ...
- Nginx 从入门到放弃(二)
学习完了nginx的基本知识后,我们来了解下nginx的虚拟主机. 说到虚拟主机,那就得说一说虚拟主机的三种方式了 基于端口的虚拟主机 基于域名的虚拟主机 基于ip的虚拟主机 基于端口实现虚拟主机 只 ...
- 命令 关闭SElinux
# sed -i 's/^SELINUX=.*$/SELINUX=disabled/g' /etc/selinux/config
- django 缓存(memcached)
Django提供了6种缓存方式 开发调试缓存 内存缓存 文件缓存 数据库缓存 Memcache缓存(使用python-memcached模块) Memcache缓存(使用pylibmc模块) 常使用的 ...
- Netflix OSS套件一站式学习驿站
Netflix OSS是由Netflix公司主导开发的一套代码框架/库,目的是用于解决大规模集群的分布式系统的一连串问题,如:服务发现.负载均衡.熔断降级.限流.网关等.对于当代的Java开发者来说, ...