Ajax简介及基础理论

68 阅读4分钟

Ajax简介

a. AJAX是什么?

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)

AJAX 不是新的编程语言,而是一种使用现有标准的新方法

AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下

虽然 Ajax 中的 x 代表 XML,但是现在 JSON 的诸多优势 JSON 的使用比 XML 更加普遍。

JSON 和 XML 都用于在 Ajax 模型中封装数据

b.异步交互和同步交互

同步:

(1)发一个请求,就要等待服务器的响应结束,然后才能发第二个请求

(2)刷新的是这个页面

异步:

(1)发一个请求后,无需等待服务器的响应,然后就可以发第二个请求

(2)可以使用js接口服务器的响应,然后使用js来局部刷新

c. 异步交互与同步交互的劣势:

破坏了浏览器的前进和后退机制

后面逻辑依靠前面逻辑时,可能会出现问题

Ajax 对搜索引擎支持较弱

容易引起 web 安全问题

Ajax所包含的技术

Ajax 并不是一个新技术,而是多个技术的整合:

HTML

CSS

JavaScript

DOM

XML

XMLHttpRequest 对象

XMLHttpRequest 是 Ajax 的核心。

XMLHttpRequest 对象提供了在客户端和服务端传输数据的功能,XMLHttpRequest 对象提供了通过 URL 方式来获取数据,只更新网页的一部分数据。

Ajax的工作原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎-JavaScript对象),使用户操作与服务器响应异 步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要 从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。

XMLHttpRequest 对象的三个常用的属性

onreadystatechange 属性

onreadystatechange 属性存有处理服务器响应的函数。

xmlHttp.onreadystatechange = function() { //我们需要在这写一些代码

readyState 属性

readyState 属性存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange 函数就会被执行。

readyState 属性可能的值:

  值	            状态	                                描述

0	          请求未初始化,UNSENT(未打开)	                  open()方法未被调用

1	          请求已提出,OPEN(未发送)	                  send()方法未被调用

2	          请求已发送,HEADERS_PECEIVED(已获取响应头)	  send()方法已被调用

3	          请求处理中,LOADING(正在下载响应体)	          响应体下载中;respnseText中已获取部分数据

4	          请求已完成,DOWN(请求完成)	                  整个请求过程完毕

我们要向这个 onreadystatechange 函数添加一条 If 语句,来测试我们的响应是否已完成(意味着可获得数据):

xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        //从服务器的response获得数据
    }
}

responseText 属性

可以通过 responseText 属性来取回由服务器返回的数据(字符串)。 在我们的代码中,我们将把时间文本框的值设置为等于 responseText:

xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        document.myForm.time.value = xmlHttp.responseText;
    }
}

其他属性:

属性 描述

status 服务器的HTTP状态

statusText HTTP状态的对应文本

responseXML 服务器的响应,表示为XML,这个对象可以解析为一个DOM对象

服务器的HTTP状态:

1**:请求收到,继续处理 (信息类)

2**:操作成功收到,分析、接受 (成功类)

3**:完成此请求必须进一步处理 (重定向)

4**:请求包含一个错误语法或不能完成 (客户端错误)

5**:服务器执行一个完全有效请求失败 (服务器错误)

常见状态:

200——服务器已成功处理了请求

400——(错误请求)服务器不理解请求的语法

401——表示发送的请求需要有通过HTTP认证的认证信息

403——(禁止)服务器拒绝请求

404——(未找到)服务器找不到请求网页

500——(服务器内部错误)服务器遇到错误,无法完成请求

503——表示服务器处于停机维护或超负载,无法处理请求