Ajax的工作原理和基本操作

怼烎@ 2022-07-13 10:21 169阅读 0赞

Ajax(Asynchronous JavaScript and XML)字面的理解就是异步的JavaScript以及xml,其实就是区别于传统web开发中采用的同步的方式。

而对于同步和异步：  
异步传输是面向字符的传输，它的单位是字符；而同步传输是面向比特的传输，它的单位是桢，它传输的时候要接受方和发送方的时钟保持一致，而对于初步理解来说就是，**在js中不影响当前页面，与服务器产生交互，叫异步请求对应超链接，表单请求，整个页面都要刷新或者跳转叫同步请求**

接下来具体说一下Ajax：  
Ajax的核心由html、JavaScript、DOM、DHTML 组成，这一个杰出的方法可以将Web界面转化为可以与服务器产生交互的应用程序  
可以理解为异步请求，即在JS中不影响当前页面与服务器进行交互的操作  
。而Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

而这时我们需要将注意力放在如何从服务器获取数据,Ajax为我们提供了一个对象，那就是XmlHttpRequest对象。

XMLHttpRequest对象是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。在一般额Web应用程序中，用户填写表单字段并单击Submit。然后整个表单发送到服务器，服务器将它转发给处理表单的脚本，脚本执行完成后在发送回新的页面，Ajax基本上就是吧JavaScript技术和XMLHttpRequest对象放在Web表单和服务器之间  
当用户填写表单时，数据发送给一些JavaScript代码而不是直接发送给服务器。相反，JavaScript代码捕捉表单数据并向服务器发送请求，同时用户屏幕上的表单也不会闪烁或者延迟，也可以理解为JavaScript代码在幕后发送请求，而用户甚至不知道请求的发出，是异步发送的。  
然后，服务器将数据返回JavaScript代码，后者决定如何处理这些数据，它可以迅速的更新表单数据，甚至让人感觉应用程序立即完成的，表单没有提交或者刷新而用户得到了新数据。JavaScript代码甚至可以对收到的数据执行某种计算，在发送另一个请求完全不需要用户干预！  
这就是 XMLHttpRequest 的强大之处。它可以根据需要自行与服务器进行交互，用户甚至可以完全不知道幕后发生的一切。简单的说，就是javascript可以及时向服务器提出请求和处理响应,同时达到无刷新的效果。

了解了XMLHttpRequest的神奇效果后，来深入了解它和它拥有的方法。  
1.创建新的XMLHttpRequest对象  
大多数浏览器都支持:var xmlHttp=new XMLHttpRequest();  
对于创建这个对象有一个麻烦的事情就是一些自我感觉很特别的浏览器(其实的确有资格特别。。。)不支持上面通用的创建方法，  
特殊的有  
IE6.0：  
var xmlHttp=newActiveXObject(“Msxml2.XMLHTTP”);  
IE5.5以及更早的版本:  
var xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);  
我们可以用下面的方法创建：  
（1）

（2）

2.第二步打开与服务器的连接  
xmlHttp.open():用来打开与服务器的连接，它需要三个参数  
\->请求方式：可以是get和post  
\->请求的URL：指定服务器端资源  
\->请求是否为异步：如果为true表示发送异步请求，否则同步请求

3.第三步(发送请求)  
xmlHttp.send(null):如果不给可能会造成部分浏览器无法发送！  
\->参数：就是请求体的内容，如果是get请求，必须给出null

4.第四步  
在xmlHttp对象的一个事件上注册监听器:onreadystatechange

xmlHttp对象一共有5个状态：  
0状态：刚创建，还没有调用open方法  
1状态：请求开始，调用open方法，但还没有调用send()方法  
2状态：调用完send()方法  
3状态：服务器开始响应，但不代表响应结束了  
4状态:服务器响应结束（这个需要我们关注）

得到xmlHttp对象的状态：  
var state=xmlHttp.readyState;可能是01234

得到服务器响应的状态码  
var status=xmlHttp.status;如：200、404、500.。。

得到服务器响应的内容  
var content=xmlHttp.responseText;得到服务器的响应文本格式的内容  
var content=xmlHttp.responseXML;得到服务器的响应的xml内容，它是Document对象

xmlHttp.onreadystatechange=function() 这个方法xmlHttp的五种状态都会调用本方法  
if(xmlHttp.readyState==4&&xmlHttp.status==200)两种判断第一个为服务器响应结束，第二个为服务器响应成功

var text=xmlHttp.responseText

如果发送post请求(如果发送请求带有参数一般使用post)应设置Content-Type

xmlHttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);  
xmlHttp.send(“username=zhangsan&password=1”);

处理不同浏览器，如IE和火狐  
if(window.addEventListener)\{  
name=ele.getElementsByTagName(“name”)\[0\].textContent;这个语句是适用于火狐或非IE浏览器  
\}else\{  
name=ele.getElementsByTagName(“name”)\[0\].text;  
\}  
Ajax的优缺点：  
1、第一个有点也是最大的一点那就是开头说的页面无刷新与服务器通信，给用户的体验非常好。  
2.、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力，同时减少不必要的数据传输、时间及降低网络上数据流量。  
3、平衡前端和后端，AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。  
4、AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户支持JavaScript在浏览器上执行

而有优点肯定会有缺点：  
1、回退，ajax取消了back按钮，即对浏览器后退机制的破坏。后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是ajax所带来的一个比较严重的问题，因为用户往往是希望能够通过后退来取消前一次操作的。  
2、安全性，AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。  
3、对搜索引擎的支持比较弱。  
4.对流媒体还有移动设备的支持不是太好  
5.对于前端来说很麻烦，不容易调试。

而对于Ajax的应用场景来说很广泛，如：我们每天都使用度娘，当输入关键词后会自动提示几个与当前用户输入相关联的搜索关键词。还有调查时候省和市的联动也是Ajax的应用。还有就是我们注册的时候填写用户名，当重复的时候就会提示也是这个的应用。还有很多想了解可以去Baidu

--------------------

![这里写图片描述][SouthEast]

[SouthEast]: /images/20220713/9266fd077d8647c6afb8283740d5d8a1.png