AJAX 基础

最新推荐文章于 2024-09-25 11:06:23 发布

iteye_18051

最新推荐文章于 2024-09-25 11:06:23 发布

阅读量45

点赞数

文章标签：数据库 javascript json ViewUI

1、了解 AJAX 技术
Ajax 是 Web 开发中一个比较流行的词汇。全称
Asynchronous JavaScript and XML 异步的JavaScript与XML
不是全新的技术，是多种技术强强联合。
Ajax 是一个异步的基于 HTTP 协议的请求响应过程。

(时间)同步的 Web 请求响应过程
浏览器|---| |---------|

0秒---|---|------|---------|--------------------------->

服务器| |------| |---------

(时间)异步的 Web 请求响应过程
浏览器|------| |---------| |---------|

0秒---|---|------|---------|--------------------------->

服务器| |--------| |---------| |---------|

好处：
改善用户体验

2、了解 Ajax 核心对象
Ajax 核心对象是一个在浏览器内置的能够被 JavaScript
调用的对象---XMLHttpRequest
最早出现在 IE 4 浏览器中。后来所有浏览器都添加了
该对象。

特点：
(1)需要手动创建，需要判断是何种浏览器
(2)提供相应的方法，提交请求(action method)
(3)提供相应的方法，接受服务器响应
(4)能够判断服务器相应的内容是否完整、正确

所用到的技术
XMLHttpRequest XML JavaScript jQuery JSON

3、掌握 Ajax 开发步骤
(1)判断浏览器，并创建具体的 XMLHttpRequest 对象
(2)使用 XMLHttpRequest 对象打开与服务器的连接
(3)编写处理响应的代码(回调函数)
(4)发送请求
备注：所有的代码，都必须在发送请求之前完成。

小结：
(1)所有的 Ajax 操作，都是有 javaScript 来提交请求；
(2)Ajax 代码必须考虑多个浏览器的兼容性；
(3)Ajax 核心对象常用方法
xmlreq = new XMLHttpRequest();
//IE 浏览器较新的浏览器内置对象
xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
//较旧版本的浏览器内置对象
xmlreq = new ActiveXObject("Microsoft.XMLHTTP");

xmlreq.open("GET",url,true);
xmlreq.onreadystatechange=function update(){
//判断服务器是否响应完整 XMLHttpRequest 状态
//0(xmlreq 对象未创建) 1 2 3 4
if(xmlreq.readyState==4){
if(xmlreq.status==200){

}
}
}
//发送请求
xmlreq.send(null);
(4)Ajax 核心对象状态属性
xmlreq.readyState==4
0 未初始化
1 对象被创建，但是 send() 没有给调用
2 send() 正在发送中，可以取得 HTTP 请求头信息
3 send() 发送完毕，响应没有完成，部分响应数据可用
4 服务器响应完毕
(5)Ajax 对象，发送请求的方法
xmlreq.open("get",url,true); //url 后面附带参数
xmlreq.send(null);

xmlreq.open("post",url,true); //url 只包含 action
xmlreq.send("参数值");

任务：
使用 Ajax 完成用户注册时，用户名的数据库效验。