1.概念:什么是AJAX
AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。
2.为什么要使用他?
最大的优点:不刷新整个页面的情况下与服务器通信保持原有页面状态,通俗点,浏览网页的时候回有两种情况,点击,1,白屏,等待跳转到另一个页。2.页面不刷新,局部出现新内容获得更好的用户体验。
3.基本原理
先看图

XHR相当于是一个通信兵,来负责客户端与服务器之间的通信传输。要打仗了,前方阵地不可能只等着通信兵传递消息其他什么也不干吧,所以前方阵地还在干着自己的事情派通信兵去请求后方指挥的命令(服务器),指挥下达命令指挥,通信兵再吧命令传到前方阵地(客户端),然后客户端吧数据渲染到页面。
那什么是XHR?(AJAX工作原理)
他的全称是XMLHttpRequest,AJAX就是通过浏览器的内置对象XHMHttpResquest来发送异步请求的,异步请求不会妨碍前方阵地(客户端)的任何操作。
4.了解异步和同步
刚才说了异步,那什么是同步,同步就是前方阵地和通信兵一起去像服务器请求数据,直到通信兵请求到数据我才开始渲染页面,在请求的过程中一直是白屏等待的。
5.XMLHttpResquest对象的属性有哪些?
AJAX既然是通过浏览器的内置对象XMLHttpRequest来处理异步请求的那我们先来了解下他又哪些属性
属性 描述
1. onreadyStatechange 状态改变的事件触发器每个状态改变时都会触发 这个事件处理器,通常会调用一个javaScript函数
2. readyState 请求的状态:
0>.请求未初始化
1>.服务器链接已建立
2>.请求已接收
3>.请求处理中
4>.请求已完成,响应已就绪
3.responseText 返回请求数据文本
4.responseXML 返回XML文档对象
5.status 返回状态码 如404 200

6.创建XMLHttpRequest对象并发送AJAX请求
为了应对所有的现代浏览器,检测是否支持XMLHttpRequest对象

  1. window.onload = function(){
  2.   //1.创建XMLHttpRequest对象考虑兼容性
  3.    var xhr = null;
  4.   if(window.XMLHttpRequest){
  5.   //现代浏览器
  6.   xhr = new XMLHttpRequest();
  7.    }else{
  8.    xhr = new ActiveXObject('Microsoft.XMLHTTP');//IE5/6
  9.   }
  10.   }
  11. console.log('状态A'+xhr.readyState);
  12.  
  13. //2.设置请求方式。第一种方式get请求(2)post请求
  14. var url = '数据'
  15. //get请求,true异步请求,false,同步
  16. xhr.open('get', url, true);
  17. console.log('状态B'+xhr.readyState);
  18. /*(2)post请求 必须添加请求头
  19. var url = '数据';
  20. xhr.open('post', url, true);
  21. xhr.setRequestHander('Content-type','application/x-www-form-urlencoded');
  22. */
  23. //3.发送请求
  24. xhr.send();
  25. console.log('状态C'+xhr.readyState);
  26. //4.回调函数
  27. xhr.onreadyStatechange = function() {
  28. if(xhr.readyState == 4 && xhr.status == 200){
  29. console.log(xhr.resposeText); //字符串
  30.        //console.log(xhr.resposeXML)
  31. }
  32. }

AJAX的优点:
1.最大的优点就是页面无需刷新,在页面内与服务器通信,非常好的用户体验。
2.使用异步的方式与服务器通信,不需要中断操作。
3.可以把以前服务器负担的工作转嫁给客户端,减轻服务器和带宽,可以最大程度减少冗余请求。
缺点:
1.AJAX干掉了Back和History功能,即对浏览器机制的破坏。
在动态更新页面的情况下,用户无法回到前一个页面状态,因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙;用户通常会希望单击后退按钮能够取消他们的前一次操作,但是在Ajax应用程序中,这将无法实现。
2.安全问题技术同时也对IT企业带来了新的安全威胁,ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来,允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点,诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。
3.对搜索引擎的支持比较弱。如果使用不当,AJAX会增大网络数据的流量,从而降低整个系统的性能。
4.、一些手持设备(如手机、PDA等)现在还不能很好的支持ajax,比如说我们在手机的浏览器上打开采用ajax技术的网站时,它目前是不支持的,当然,这个问题和我们没太多关系。(这个时候我们可以用其他的插件来代替)

转自:https://blog.csdn.net/youjinli122/article/details/77412851

AJAX工作原理与缺点的更多相关文章

  1. ajax工作原理及jsonp跨域详解

    一.Ajax简介 ajax = 异步 JavaScript 和 XML. ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.我们知道,传统的网页(不使用ajax)如果需要更新内容, ...

  2. 简要总结ajax工作原理及优缺点

    虽然在实际的项目中使用多种ajax请求,但就其工作原理,优缺点尚未深入总结, 参考:http://www.cnblogs.com/SanMaoSpace/archive/2013/06/15/3137 ...

  3. 【java项目实践】具体解释Ajax工作原理以及实现异步验证username是否存在+源代码下载(java版)

    一年前,从不知道Ajax是什么,伴随着不断的积累,到如今常常使用,逐渐有了深入的认识. 今天,假设想开发一个更加人性化,友好,无刷新,交互性更强的网页,那您的目标一定是Ajax. 介绍 在具体讨论Aj ...

  4. Ajax工作原理和原生JS的ajax封装

    前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...

  5. ajax工作原理,Jsonp原理

    Ajax工作原理是 相当于在用户和服务器之间加了-个中间层(AJAX引擎),使用户操作与服务器响应异步化. 对于用户请求ajax引擎会做一些数据验证和数据处理,不是所有请求都提交给服务器,当需要从服务 ...

  6. ajax工作原理/实例

    ajax是什么? 是一种创建交互式网页应用的一种网页技术.简单来说,就是向服务器发起请求,获得数据使交互性和用户体验更好. ajax不是一种新的技术,是一些技术的集合体.有 1.XHTML和CSS 2 ...

  7. Ajax工作原理

    在写这篇文章之前,曾经写过一篇关于AJAX技术的随笔,不过涉及到的方面很窄,对AJAX技术的背景.原理.优缺点等各个方面都很少涉及null.这次写这篇文章的背景是因为公司需要对内部程序员做一个培训.项 ...

  8. AJAX工作原理及其优缺点

    1.什么是AJAX?AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.它 ...

  9. 关于Ajax工作原理

    1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...

随机推荐

  1. 爬虫_拉勾网(解析ajax)

    拉勾网反爬虫做的比较严,请求头多添加几个参数才能不被网站识别 找到真正的请求网址,返回的是一个json串,解析这个json串即可,而且注意是post传值 通过改变data中pn的值来控制翻页 job_ ...

  2. 【模板】cdq分治代替树状数组(单点修改,区间查询)

    #include <cstdio> #include <cstdlib> #include <cstring> #include <cmath> #in ...

  3. JLOI2015 DAY1 简要题解

    「JLOI2015」有意义的字符串 题意 给你 \(b, d, n\) 求 \[ [(\frac{b + \sqrt d}2)^n] \mod 7528443412579576937 \] \(0 & ...

  4. 从App业务逻辑中提炼API接口

    2.1 从App业务逻辑中提炼API接口 业务逻辑思维导图 功能-业务逻辑思维导图 基本功能模块关系 功能模块接口UML(设计出API) 在设计稿标注API 编写API文档 2.2 设计API的要点 ...

  5. Coding and Paper Letter(五十八)

    资源整理. 1 Coding: 1.支持TMS.WMTS标准瓦片下载,支持百度地图瓦片.高德地图瓦片.腾讯地图瓦片.天地图.ArcServer Rest瓦片.ArcServer本地缓存切片.geose ...

  6. docker-compose.yml(4)

    实例3:version: '3'services: mysql: image: mysql network_mode: "host" environment: - MYSQL_RO ...

  7. bzoj1831 逆序对 (dp+树状数组)

    注意到,所有的-1应该是一个不降的序列,否则不会更优那就先求出来不是-1的的逆序对个数,然后设f[i][j]表示第i个-1放成j的前i个-1带来的最小逆序对数量这个可以树状数组来求 #include& ...

  8. APIO2018解题报告

    今年的APIO好邪啊. T1铁人两项 题目大意 给一个无向图,问有多少三元组(三个元素两两不同)使得它们构成一条简单路径 . 题解 无向图这种东西不好直接处理,考虑点双缩点建圆方树. 然后就出现了一个 ...

  9. HDU6280 From Tree to Graph

    下午打了湘潭邀请赛,好像缓解了一下北京网络赛超强的自闭感.补一下这个图论题.(补了很久) 题意:给你一颗n节点的树,有m个操作,每次向xi和lca(xi,yi)连边,然后每次zi就是对于新的图在删除每 ...

  10. 如何查看本地电脑ip

    1.快捷键 win+R打开命令窗口 输入 ipconfig查看你电脑的ip 2.输入netstat -an ,查看当前所有连接端口,显示所有的有效连接信息列表,包括已建立的连接(ESTABLISHED ...