Ajax

AJAX

相关介绍:

 

2005年Jesse James Garrent 发表了一篇文章，

标题为：“Ajax：A new Approach to Web Applications”。

Ajax，是 Asynchronous JavaScript + XML 的简写。

 

组成:

Asynchronous异步的

+ JavaScript +

XML可扩展标记语言(制作网页等用的文本结构标记系统)

XML:

Extensible Markup Language

1998年2月，W3C正式批准了可扩展标记语言的标准定义，可扩展标记语言可以对文档和数据进行结构化处理，从而能够在部门、客户和供应商之间进行交换，实现动态内容生成，企业集成和应用开发。可扩展标记语言可以使我们能够更准确地搜索内容，更方便地传输内容，更好地描述事物。

 

一、什么是可扩展标记语言？

可扩展标记语言是一种很像超文本标记语言的标记语言。

它的设计宗旨是传输数据，而不是显示数据。

它的标签没有被预定义。您需要自行定义标签。

它被设计为具有自我描述性。

它是W3C的推荐标准。

 

二、可扩展标记语言和超文本标记语言之间的差异

它不是超文本标记语言的替代。

它是对超文本标记语言的补充。

它和超文本标记语言为不同的目的而设计：

------它被设计用来传输和存储数据，其焦点是数据的内容。

------超文本标记语言被设计用来显示数据，其焦点是数据的外观。

超文本标记语言旨在显示信息；而XML旨在传输信息，它是独立于软件和硬件的信息传输工具。

 

三、可扩展标记语言是W3C的推荐标准

XML 于 1998 年 2 月 10 日成为 W3C 的推荐标准。

 

四、可扩展标记语言无所不在

超文本标记语言。

XML 是各种应用程序之间进行数据传输的最常用的工具。

 

 

一. XMLHttpRequest

Ajex的核心技术是XMLHttpRequest对象 简称(XHR)

var xml = new XMLHttpRequest();

由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。在 XHR 出现之前，Ajax 式的通信必须借助一些手段来实现，大多数是使用隐藏的框架或内嵌框架。

XHR 的出现，提供了向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获取更多的信息，这就意味着，用户只要触发某一事件，在不刷新网页的情况下，更新服务器最新的数据。

虽然 Ajax 中的 x 代表的是 XML，但 Ajax 通信和数据格式无关，也就是说这种技术不一定使用 XML。

程序员不会用这么低的版本

IE7+、Firefox、Opera、Chrome 都支持原生的 XHR 对象，在这些浏览器中创建 XHR 对象可以直接实例化 XMLHttpRequest

 

了解：完全没用处

较老的 IE 版本创建 Microsoft.XMLHTTP 对象:

open()方法的3个参数

type：请求方式 GET/POST

url：请求地址 url

async：是否异步，默认是 true 表示异步

 

在使用 XHR 对象时，先必须调用 open()方法，它接受三个参数：要发送的请求类型(get、post)、请求的 URL 和表示是否异步。

open()方法并不会真正发送请求，而只是启动一个请求以备发送。

send()方法

set使用 null

post 添具体数据

通过 send()方法进行发送请求，send()方法接受一个参数，作为请求主体发送的数据。如果不需要则，必须填 null。执行 send()方法之后，请求就会发送到服务器上。

接收相应

当请求发送到服务器端，收到响应后，响应的数据会自动填充 XHR 对象的属性。那么一共有四个属性：

status 属性 200

200 成功

404  not found

500 服务器异常

接受响应之后，第一步检查 status 属性，以确定响应已经成功返回。一般情况 HTTP 状态代码为 200 作为成功的标志。除了成功的状态代码，还有一些别的：

 

我们判断 HTTP 状态值即可，不建议使用 HTTP 状态说明，因为在跨浏览器的时候，可能会不太一致。

说明：

1.post 请求，需要有服务器，暂时使用 tomcat

将 tomcat 压缩包在某个盘下解压

将存放了 json 文件的项目放入 webapps 文件夹下

在 bin 目录下，打开 startup.bat，启动服务

readyState 属性 0 1 2 3 4

readystatechange 事件

responseText 响应主体文本

同步调用固然简单，但使用异步调用才是我们真正常用的手段。使用异步调用的时候，检测 readyState 属性,每当 readyState 属性改变时，触发readystatechange 事件。这个属性有五个值：

二、GET 与 POST

在提供服务器请求的过程中，有两种方式，分别是：GET 和 POST。在 Ajax 使用的过程中，GET 的使用频率要比 POST 高。

GET 请求

GET 请求是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到 URL 的末尾，以便提交给服务器。

xhr.open('get','diner/login?'+'name=Lee&age=100',true);

通过 URL 后的问号给服务器传递键值对数据，服务器接收到回响应数据。特殊字符传参产生的问题可以使用 encodeURIComponent()进行编码处理，中文字符的返回及传参，可以将页面保存和设置为 utf-8 格式即可，AJAX 返回的数据为 UTF-8。

当没有 encodeURIComponent()方法时，在一些特殊字符比如“&”，会出现错误导致无法获取。

 

POST 请求

POST 请求可以包含非常多的数据，我们在使用表单提交的时候，很多就是使用的 POST 传输方式。

xhr.open('post', 'diner/login', true);

而发送 POST 请求的数据，不会跟在 URL 的尾巴上，而是通过 send()方法向服务器提交数据。

xhr.send('name=Lee&age=100');

一般来说，向服务器发送 POST 请求由于解析机制的原因，需要进行特别的处理。因为 POST 请求和 Web 表单提交是不同的，需要使用 XHR 来模仿表单提交。

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

从性能上来讲 POST 请求比 GET 请求消耗更多一些，用相同数据比较，GET最多比 POST 快两倍.

post 和 get 比较

三、封装 Ajax

因为 Ajax 使用起来比较麻烦，主要就是参数问题，比如到底使用 GET 还是POST；我们需要封装一个 Ajax 函数，来方便我们调用。

封装 Ajax 并不是一开始就形成以上的形态，需要经过多次变化而成。

 

同步：

提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事。

 

异步:

请求通过事件触发->服务器处理（这时浏览器仍然可以做其他事情）->处理完毕 。

★核心特点:异步 无刷新

栗子:

异步例子:烧水 同时 扫地 等水开了洗碗 效率高

无刷新例子:点赞 评论 不会刷新到顶部