浅谈Ajax

最新推荐文章于 2021-08-06 00:22:26 发布

maid_04

最新推荐文章于 2021-08-06 00:22:26 发布

阅读量298

点赞数

分类专栏：前端学习文章标签： ajax javascript 服务器异步 xml

本文链接：https://blog.csdn.net/maid_04/article/details/78741761

版权

前端学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

今天想整理出我所理解的Ajax，可能不全，也可能不太对，但是这是现阶段所了解的ajax，若有新的发现，还会继续补充

一：Ajax基础

1. 什么是Ajax

> 无刷新数据读取

> AJAX = 异步 JavaScript 和 XML。

> AJAX 是一种用于创建快速动态网页的技术。

> ajax能且仅能从服务器上读取文件信息

> 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

> 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

2. Ajax的工作原理

这里写图片描述

3.AJAX是基于现有的Internet标准

> XMLHttpRequest 对象 (异步的与服务器交换数据)

> JavaScript/DOM (信息显示/交互)

> CSS (给数据定义样式)

> XML (作为转换数据的格式)

二：使用Ajax

完成一个ajax需要有四个步骤，创建Ajax对象，连接服务器，发送请求和接收返回

1. 创建Ajax对象

>所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

> 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

所以如下方法是创建了一个兼容性的ajax对象

//1、创建Ajax对象
    var oAjax = null;
    if(window.XMLHttpRequest){
        oAjax = new XMLHttpRequest(); //ie6及以下不兼容
    }else{
        oAjax = new ActiveXObjext("Microsoft.XMLHTTP");
    }

2. 连接服务器

连接服务器用open(方法,文件名,异步传输) 方法

> 方法：GET/POST

GET：用于获取数据（如：浏览贴子）,把数据放在url（网址）里来提交

POST：用于上传数据（如：用户注册）,把数据放在不是url的地方提交

> 文件名：你的文件名

> 同步和异步：false/true

事件一件一件进行就是同步

多件事一起进行就是异步

ajax是异步请求数据

//2、连接服务器
    oAjax.open('GET',url,true);

$ 科普GET和POST的区别

get在url里传送数据：安全性低、容量小

post安全性一般、容量几乎无限

get便于分享（商品地址和url有关），适合获取，且会缓存

post更适合上传（图片等）

POST无法使用缓存文件（更新服务器上的文件或数据库）

POST可以向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

3. 发送请求

//3、发送请求
    oAjax.send();

这个固定这么写，所有浏览器都兼容，没什么可说的

4. 接收返回

onreadystatechange：与服务器发生数据传输时

readyState属性：请求状态

0、（未初始化）还没有调用open()方法

1、（载入）已调用send()方法，正在发送请求

2、（载入完成）send()方法完成，已收到全部相应内容

3、（解析）正在解析相应内容

4、（完成）相应内容解析完成，可以在客户端调用了

status属性：是否成功（200成功，常见失败404(页面未找到)）

responseText属性：返回的数据

//4、接收服务器的返回
    oAjax.onreadystatechange = function(){
        if(oAjax.readyState ==4){  //完成
            if(oAjax.status ==200){
                //alert('成功： '+oAjax.responseText);
                fnSucc(oAjax.responseText);
            }else{
                //alert('失败');
                if(fnFaild){
                    fnFaild();
                }
            }
        }
    }

$页面中引用时

ajax被封装成一个函数，在页面中调用时应如下所写：

ajax('bbb.txt',function(str){

    },function(){

    });      //第一个函数是请求成功时执行的函数，第二个函数是请求失败时执行的函数

三：Ajax的优缺点

1.优点

1.无刷新更新数据：

能在不刷新整个页面的前提下与服务器通信维护数据。更为迅捷地响应用户交互，避免了发送没有改变的信息，减少用户等待时间，带来非常好的用户体验。

2.异步与服务器通信：

AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。

3.前端和后端负载平衡：

把一些服务器负担的工作转嫁到客户端，用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。这种“按需取数据”的方式，可最大程度的减少冗余请求和对服务器造成的负担，提升站点性能。

4.基于标准被广泛支持：

AJAX基于标准化的并被广泛支持，不需要下载浏览器插件或者小程序，只需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟，出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。

5.界面与应用分离：

Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、适用于现在的发布系统。

2.缺点

1.AJAX干掉了Back和History功能：

动态更新的页面，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。解决方案是使用URL片断标识符（通常被称为锚点，即URL中#后面的location. hash）来保持跟踪。

2.AJAX的安全问题：

Ajax技术对企业数据建立了一个直接通道。会暴露比以前更多的数据和服务器逻辑。并会隐藏客户端的安全扫描技术，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。

3.对搜索引擎支持较弱：

对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。

4.破坏程序的异常处理机制：

至少从目前看来，像 Ajax.dll，Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制的。分别采用Ajax和传统的form提交的模式来删除一条数据……给调试带来了很大的困难。

5.违背URL和资源定位的初衷：

你在一个URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。

6.AJAX不能很好支持移动设备：

如手机、PDA等现在还不能很好的支持Ajax。

7.客户端过大，太多客户端代码造成开发上的成本：

编写复杂、容易出错；冗余代码比较多（层层包含js文件是AJAX的通病，再加上以往的很多服务端代码现在放到了客户端）；破坏了Web的原有标准。