JavaScripAjax编程

Ajax编程

一、Ajax介绍

★什么是Ajax?

☆首先，要知道，Ajax是异步刷新技术。全称：Asynchronous Javascript And XML（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

在万维网开始时，网页只包含静态内容，客户端与服务器端之间传输数据都是通过form表单。在Web应用程序中，客户通过表单提交自己输入的信息，服务器端的程序则接收到客户提交的表单后，根据表单的数据内容进行处理，然后把处理结果返回给用户，这样就完成了一次简单的交互。

解释：Asynchronous Javascript And XML

Asynchronous：翻译成中文是异步的意思，当发送数据请求时，程序不必停下来等待响应。它可以继续运行，等待响应收到时触发事件。通过使用回调来管理这种过程，程序能够以有效的方式运行，避免了数据来回传输带来的延迟。

Javascript：利用Javascript可以接收来自服务器端返回的数据，并将这些数据实时的更新到页面上。

XML：最开始术语Ajax被创造时，经常用XML文档来返回数据。但是，实际上可以发送许多不同类型的数据。到目前为止，在Ajax中最常用的是JSON，它比XML更轻量且更易于解析。JSON还具备被Javascript原生支持的优点，所以可以处理Javascript对象，而不必使用DOM方法来解析XML文件。

Ajax实现了与服务器端的异步通信、局部刷新页面，这就是Ajax技术的核心所在。当然Ajax也不是只有优点没有缺点。

优点：

1.页面无刷新，在页面内与服务器端通信，减少用户等待的时间，增强了用户的体验。

2.使用异步方式与服务器端通信，响应速度快。

3.可以把一些原本服务器的工作转接到客户端，利用客户端闲置的能力来处理，减轻了服务器端和宽带的负担，节约了空间和宽带租用成本。

4.基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：

1.无法进行操作的后退，即不支持浏览器的页面后退。

2.对搜索引擎的支持比较弱

3.可能会影响程序中的异常处理机制

4.安全问题，对于一些网站的攻击，如：XXS,SQL注入等不能很好的防御。

二、Ajax实现原理

使用原生的Ajax大致包括以下几个步骤：

1.创建XMLHttpRequest对象

2.发出HTTP请求

3.接收服务器端传回的数据

4.更新网页数据

概括一下：Ajax通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器端返回的数据后，再进行处理。

三、Mock.js简单介绍

这个Mock.js是干啥的呢？一句话，用它生成假数据，用于测试使用，不能用于实际开发中，切记！！！

用Mock.js的原因：后端的接口往往是较晚才会出来，于是前端的许许多多开发都要等待到后端的接口出来了才能进行开发，这样对于前端开发来说显得十分别动。迫不得已，只能制造一些假数据来模拟后端接口，这样前端就能继续进行开发。

一、Mock.js的特点有两点：

A:生成随机数据

B:拦截Ajax请求

二、Mock.js的使用

1.生成随机数据

Mock.mock(templete)

参数templete表示数据模板，可以是对象，也可以是字符串。根据数据模板来进行生成随机数据。

2.拦截Ajax请求

Mock.mock( rurl, templete )

rurl表示需要拦截的URL，当拦截到匹配rurl的Ajax请求时，将根据数据模板 templete生成模拟数据，并作为响应数据返回。