ajax 原理----初级篇
一、贴dome，ajax三大步
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script>//alert(window.ActiveXObject);window.οnlοad=function(){var btn=document.querySelector('input');btn.onclick=function(){console.log(1)/***一、实例化Ajax对象***************************/var xhr=getXhr();/**二、数据提交***********************************//*************1.使用open()+send()方法 get***************************///以get形式xhr.open("get","06Ajax.php?act=json&user=kn",true); //open() 提交数据 xhr.send();//1).send() 不能省略//2).get数据在url上发送//3).post 必须加请求头/*************2.使用open()+send()方法 post***************************///以post形式//xhr.open("post","http://test.com/06Ajax.php?act=json",true); //无法跨域访问/*xhr.open("post","06Ajax.php?act=json",true); //open() 提交url xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xhr.send("user=kn&paw=123");*//**三、数据接收***********onreadystatechang()***************************///本质上就2种数据 xml和字符串//1、字符串xhr.onreadystatechange = function(){//保证服务器端响应的数据发送完毕if(xhr.readyState == 4){//保证这次请求必须是成功的if(xhr.status == 200){//接收服务器端的数据var json = xhr.responseText;//获取数据 json格式的字符串console.log(json);//'{"act":"json","user":"kn"}'/** 使用eval()函数进行转换* * 使用"()"将其包裹,eval()函数强制将其转换为JSON格式(javascript代码)* * 不使用"()"将其包裹,eval()函数将其识别为一个空的代码块*/var data = eval("("+json+")");// console.log(data);//{"act":"json","user":"kn"} }}}console.log(xhr);}}//定义创建XMLHttpRequest对象的函数functiongetXhr(){//声明XMLHttpRequest对象varxhr;//根据不同浏览器创建if(window.XMLHttpRequest){//其他浏览器xhr = newXMLHttpRequest();}else{//IE浏览器(8及之前)xhr = new ActiveXObject("Microsoft.XMLHttp");}//返回XMLHttpRequest对象returnxhr;}</script> </head><body><input type="button" value="ajax"></body> </html>
二：ajax的意义
1.什么是AJAX?
AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），
不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
它使用：
使用XHTML+CSS来标准化呈现；
使用XML和XSLT进行数据交换及相关操作；
使用XMLHttpRequest对象与Web服务器进行异步数据通信；
使用Javascript操作Document Object Model进行动态显示及交互；
使用JavaScript绑定和处理所有数据。
2.与传统的web应用比较
Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
Ajax其核心有JavaScript、XMLHTTPRequest、DOM对象组成，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。具体代码如一所示。
XMLHttpRequest 对象方法描述
| 方 法 | 描 述 |
| abort() | 停止当前请求 |
| getAllResponseHeaders() | 把HTTP请求的所有响应首部作为键/值对返回 |
| getResponseHeader("header") | 返回指定首部的串值 |
| open("method","URL",[asyncFlag],["userName"],["password"]) | 建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码 |
| send(content) | 向服务器发送请求 |
| setRequestHeader("header", "value") | 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 ) |
XMLHttpRequest 对象属性描述
| 属 性 | 描 述 |
| onreadystatechange | 状态改变的事件触发器，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数 |
| readyState | 请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成 |
| responseText | 服务器的响应，返回数据的文本。 |
| responseXML | 服务器的响应，返回数据的兼容DOM的XML文档对象 ，这个对象可以解析为一个DOM对象。 |
| responseBody | 服务器返回的主题（非文本格式） |
| responseStream | 服务器返回的数据流 |
| status | 服务器的HTTP状态码（如：404 = "文件末找到" 、200 ="成功" ，等等） |
| statusText | 服务器返回的状态文本信息 ，HTTP状态码的相应文本（OK或Not Found（未找到）等等） |
4.AJAX的优缺点
(1).AJAX的优点
<1>.无刷新更新数据。
AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。
<2>.异步与服务器通信。
AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。
<3>.前端和后端负载平衡。
AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。
<4>.基于标准被广泛支持。
AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。
<5>.界面与应用分离。
Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。
(2).AJAX的缺点
<1>.AJAX干掉了Back和History功能，即对浏览器机制的破坏。
在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是Ajax所带来的一个比较严重的问题，因为用户往往是希望能够通过后退来取消前一次操作的。那么对于这个问题有没有办法？答案是肯定的，用过Gmail的知道，Gmail下面采用的Ajax技术解决了这个问题，在Gmail下面是可以后退的，但是，它也并不能改变Ajax的机制，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）
但是，虽然说这个问题是可以解决的，但是它所带来的开发成本是非常高的，并与Ajax框架所要求的快速开发是相背离的。这是Ajax所带来的一个非常严重的问题。
一个相关的观点认为，使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现，大部分都使用URL片断标识符（通常被称为锚点，即URL中#后面的部分）来保持跟踪，允许用户回到指定的某个应用程序状态。（许多浏览器允许JavaScript动态更新锚点，这使得Ajax应用程序能够在更新显示内容的同时更新锚点。）这些解决方案也同时解决了许多关于不支持后退按钮的争论。
<2>.AJAX的安全问题。
AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。
<3>.对搜索引擎支持较弱。
对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。
转载于:https://www.cnblogs.com/blog-index/p/6618694.html
ajax 原理----初级篇相关推荐
- 开关电源反馈环路设计matlab,开关电源控制环路设计(初级篇).pdf
开关电源控制环路设计(初级篇) 开关电源控制环路设计(初级篇) Prepared by: Chen Xiaomin Mobile: Email: cxmmeg@ Date: December 30, ...
- 异形3×3魔方还原教程_【初级篇】（四）最简单的三阶魔方入门教程——中层还原...
本系列教程适合刚刚接触魔方,又比较有好奇心,是为渴望学会还原魔方,又不想死记公式的人准备的.全部教程只使用三种公式,还原过程以理解为主,公式为辅. 第四部分 中层棱块还原 4.1 预览中层棱块还原后的 ...
- android 怎么调用js项目_APP逆向神器之Frida【Android初级篇】
说到逆向APP,很多人首先想到的都是反编译,但是单看反编译出来的代码很难得知某个函数在被调用时所传入的参数和它返回的值,极大地增加了逆向时的复杂度,有没有什么办法可以方便地知道被传入的参数和返回值呢? ...
- GNU Radio系列教程（七）：初级篇之GNU Radio GRC PSK调制解调
本文讲解视频:https://www.bilibili.com/video/BV1J54y147GQ 在本文中,我们将进行纯仿真实验,不使用任何硬件设备.但是,我们会考虑无线信号在实际信道传输过程中所 ...
- 简单五子棋算法——初级篇
简单五子棋算法--初级篇 前言 设计思路 算法实现 后言 进阶设计 前言 五子是中国古老的棋类之一,是老少咸宜的娱乐项目.也是人机博弈中最简单的一类,相较于围棋.象棋变化更少,算法实现起来就相对比较简 ...
- 《Unity Shader入门精要》笔记：初级篇（2）
本篇博客主要为个人学习所编写读书笔记,不用于任何商业用途,以及不允许任何人以任何形式进行转载. 本篇博客会补充一些扩展内容(例如其他博客链接). 本篇博客还会提供一些边读边做的效果截图.文章内所有数学 ...
- Java工程师学习指南（初级篇）
Java工程师学习指南 初级篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我之前写的文章都 ...
- NSIS安装制作基础教程[初级篇], 献给对NSIS有兴趣的初学者
NSIS简介: NSIS 是"Nullsoft 脚本安装系统"(Nullsoft Scriptable Installation System)的缩写,它是一个免费的 Win32 ...
- osg中运用Shader(osg初级篇2)
关于shader的概念,可以参见我的另一篇博客<opengl版本发展史及各种概念的厘清>,这里列举一个例子,用来实现一个特效,屏幕的左半部显示为红色.首先我们准备好两个shader程序: ...
最新文章
- 通过WebService调用SQLXML(SQL Server 2005) [ZT]
- 依然持有比特币，Roger Ver谈投资心经
- 疾病相关数据查找，Our world in data使用指南
- Qt如何将数据保存成CSV文件
- jtag引脚定义_从逆向分析的角度学习硬件调试技巧JTAG，SSD和固件提取
- vivo 5G手机日产量10万台 3月销量同比增长超10%
- c语言寻找公共字符串,C语言查找两个字符串中的最大公共子串
- 重装系统后只有C盘,怎么处理?
- 用Jenkins自动化搭建测试环境-前奏
- HttpClient 解释
- 性能测试--jmeter中使用jsonpath提取响应结果【17】
- html基础 — area(图像的作用区域标记)
- 100天，Python从入门到精通！
- python组合数据类型实验报告_Python程序设计实验七：组合数据类型
- 晨风机器人成语接龙_使用晨风QQ机器人在群内玩成语接龙的方法
- uniapp接入谷歌广告
- 十七、HBase更新数据
- java获取ip地址与网络接口
- matlab定步长ode,[转载]matlab ode45 函数传自定义参数用法及定步长ode
- Linux服务器之Samba匿名访问配置