Ajax总结篇

原文出处 http://blog.poetries.top/2016/11/26/Ajax-summary

本文主要总结整理Ajax的一些常用的基础知识，适合初学者。

# 一、Ajax简介、优劣势、应用场景以及技术

• Ajax简介 :

  • Asynchronous Javascript And XML （异步的 JavaScript和XML）
  • 它并不是一种单一的技术，而是有机利用一系列交互式网页应用相关的技术所形成的结合体
  • AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

• 优点：

  • 页面无刷新，用户体验好。
  • 异步通信，更加快的响应能力。
  • 减少冗余请求，减轻了服务器负担
  • 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序

• 缺点：

  • ajax干掉了back按钮，即对浏览器后退机制的破坏。
  • 存在一定的安全问题。
  • 对搜索引擎的支持比较弱。
  • 破坏了程序的异常机制。
  • 无法用URL直接访问

• ajax应用场景

  • 场景 1. 数据验证
  • 场景 2. 按需取数据
  • 场景 3. 自动更新页面

• AJAX 包含以下五个部分： ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。

  • 使用CSS和XHTML来表示。
  • 使用DOM模型来交互和动态显示。
  • 数据互换和操作技术，使用XML与XSLT
  • 使用XMLHttpRequest来和服务器进行异步通信。
  • 使用javascript来绑定和调用。

在上面几中技术中，除了XmlHttpRequest对象以外，其它所有的技术都是基于web标准并且已经得到了广泛使用的，XMLHttpRequest虽然目前还没有被W3C所采纳，但是它已经是一个事实的标准，因为目前几乎所有的主流浏览器都支持它

• 第一张图尤其说明了传统 Web 应用程序的结构与采用了 AJAX 技术的 Web 应用程序的结构上的差别
• 主要的差别，其实不是 JavaScript，不是 HTML/XHTML 和 CSS，而是采用 了 XMLHttpRequest 来向服务器异步的请求 XML 数据

• 再来看第二张图，传统的 Web 应用模式，用户的体验是割裂的，点击->等待-> 看到新的页面->再点击->再等待。而采用了AJAX技术之后，大部分的计算工作，都是在用户不察觉的情况下，交由服务器去完成了

# 二、创建ajax的步骤

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。原生创建ajax可分为以下四步

# 1、创建XMLHttpRequest对象

Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键，发送异步请求、接受响应以及执行回调都是通过它来完成

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

• 创建 XMLHttpRequest 对象的语法：

var xhr = new XMLHttpRequest();

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

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

• 一、Ajax简介、优劣势、应用场景以及技术
• 二、创建ajax的步骤
  • 1、创建XMLHttpRequest对象
  • 2、准备请求
  • 3、发送请求
  • 4、处理响应
  • 5、封装例子
    • 谈谈JSONP
• 三、 jQuery中的Ajax
  • jQuery中的Ajax的一些方法
    • load()方法
    • $.get()和$.post()方法
    • $.ajax()方法

← HTML5之API总结前端开发的一些实践规范 →