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——表示服务器处于停机维护或超负载,无法处理请求