Ajax
一种不用刷新页面便可以与服务器通讯的方法
数据在客户端与服务器之间的独立传输, 服务器不再返回整个页面
提升用户体验
1. 不用刷新页面便可以和服务器通讯的方法有很多:
- ---- Flash
- ----Java applet
---- 框架: 如果使用了一组框架构造了一个网页, 可以只是更新这个其中的一个框架
---- 隐藏的 iframe
---- XMLHttpRequest : 该对象是对 JavaScript 的一个扩展, 可以使网页与服务器进行通信. 是创建 Ajax 的应用的最佳选择. 实际上通常把 Ajax 当做 XMLHttpRequest 的对象的代名词
2. 为什么要兼容 IE5
XMLHttpRequest 最早是在 IE5 中以 ActiveX 组件的形式出现的, 不是 W3C 的标准,
- function createXMLHTTPRequest() {
- //1. 创建 XMLHttpRequest 对象
- // 这是 XMLHttpReuquest 对象无部使用中最复杂的一步
- // 需要针对 IE 和其他类型的浏览器建立这个对象的不同方式写不同的代码
- var xmlHttpRequest;
- if (Windows.XMLHttpRequest) {
- // 针对 Firefox,Mozillar,Opera,Safari,IE7,IE8
- xmlHttpRequest = new XMLHttpRequest();
- // 针对某些特定版本的 mozillar 浏览器的 BUG 进行修正
- if (xmlHttpRequest.overrideMimeType) {
- xmlHttpRequest.overrideMimeType("text/xml");
- }
- } else if (Windows.ActiveXObject) {
- // 针对 IE6,IE5.5,IE5
- // 两个可以用于创建 XMLHTTPRequest 对象的控件名称, 保存在一个 JS 的数组中
- // 排在前面的版本较新
- var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
- for ( var i = 0; i <activexName.length; i++) {
- try {
- // 取出一个控件名进行创建, 如果创建成功就终止循环
- // 如果创建失败, 回抛出异常, 然后可以继续循环, 继续尝试创建
- xmlHttpRequest = new ActiveXObject(activexName[i]);
- if(xmlHttpRequest){
- break;
- }
- } catch (e) {
- }
- }
- }
- return xmlHttpRequest;
- }
- // 这个是兼容性比较好的版本
- function getHTTPObject(){
- var xmlHttp = null;
- if(Windows.XMLHttpRequest){
- xmlHttp = new XMLHttpRequest();
- }else if(Windows.ActiveXObject){
- xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
- }
- return xmlHttp;
- }
- // 目前 ` 比较简单的版本
3. XMLHttpRequest 的方法
abort() 停止当前请求
getAllRequestHeaders() 把 HTTP 请求的所有响应首部作为键 / 值返回
getResponseHeader("header") 返回指定首部的串值
open('method', 'url' ) 建立服务器的连接调用
setRequestHeader("header", "value") 把指定首部设置为所提供的值, 4. 在设置首部之前必须先调用 open()
4.XMLRequest 属性
onreadystatechange:
每个状态改变都会触发这个事件处理器, 通常会调用一个 JavaScript 函数, 请求到服务器中会产生不同状态, 服务器触发
readyState
请求状态:
0 ====> 未初始化
1 ====> 正在加载
2 ====> 已经加载
3 ====> 交互中
4 ====> 完成
responseText
服务器的响应, 表示为一个串
responseXML
服务器的响应表示为 xml, 这个对象可以解析为 DOM 对象
status
服务器 HTTP 状态码 200===> ok 404===>not found
statusText
HTTP 状态码相对的文本
发送请求
setRequestHeader(header,value)
当浏览器向服务器请求页面的时候, 会伴随这个请求发送一组首部信息, 这些首部信息是一系列描述请求的元数据 (metadata), 首部信息用来声明请求是 GET 还是 POST 请求
Ajax 请求中, 发送首部的工作 setRequestHeader
如果用 Post 请求向服务器发送数据, 需要将 "Content-type" 的首部设置为 "application/x-www-form-urlencoded", 它会告诉服务器正在发送数据, 并且数据已经符合 URL 编码
该方法必须是在 open() 之后才能调用
JSON 解析
- // 从服务器获取返回的数据
- xmlHttp.onreadystatechange = function(){
- if(xmlHttp.onreadyState == 4){
- if(xmlHttp.status == 200){
- xmlHttp.responseText();
- var text = xmlHttp.responseText;
- var jsonText = evel("("+text+")");
- console.log("name:"+jsonText.name",age:"+jsonText.age);
- }else{
- console.log("false");
- }
- }
- }
- // 服务器端数据
- {
- "name":"lakerMonster",
- "age":100
- }
来源: http://www.bubuko.com/infodetail-2794251.html