Ajax

Asynchronous JavaScript and XML


Introduction to Ajax

  • AJAX = 异步 JavaScript 和 XML ( JSON )
  • AJAX 是一种用于创建快速动态网页的技术
  • 通过在后台与服务器进行少量数据交换 AJAX 可以使网页实现异步更新
  • 这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新

Ajax原理

技术

  1. XML Http Request 对象 (异步的与服务器交换数据)
  2. JavaScript/DOM (信息显示/交互)
  3. CSS (给数据定义样式)
  4. XML / JSON (与服务器端交换数据的格式)

平台无关性 : 现代的浏览器基本都支持 Ajax

创建对象

XML HttpRequest 对象

varialbe = new XMLHttpRequest();

向服务器发送请求

xmlhttp.open("GET", "/r/show/nice.info", true);
xmlhttp.send();
方法 描述
open(method, url, async) 规定请求的类型 URL 以及是否异步处理请求
method : 请求的类型 GET / POST
URL : 文件在服务器上的位置
async : true 异步 false 同步
send(string) 将请求发送到服务器
string : 仅用于 POST

GET or POST

相比之下 GET 更简单也更快速 足以应对大多数情况

但一下情况推荐使用POST

  1. 无法使用缓存文件(更新服务器上的文件或数据库)
    因为 GET 请求会被浏览器缓存
  2. 向服务器发送大量数据,GET 发送的数据有大小显示,POST 没有
  3. 发送含有未知字符的数据
    GET 使用 URL 规范,URL 规范之外的数据只能使用 POST

GET 请求

xmlhttp.open("GET", "/r/show/nice/demo_get", true);
xmlhttp.send();

浏览器会缓存GET请求 因此上述命令可能获得的是缓存的内容

为了避免 向URL 添加一个动态的变化的参数即可

"/r/show/nice/demo_get?t=" + (+new Date())

发送信息

向URL添加信息即可

xmlhttp.open("GET", "/r/show/nice/ajax_get?fName=Dapao&lName=Lau",true);
xmlhttp.send();

POST 请求

想用POST 传输数据 先使用setRequestHeader() 添加HTTP 头 在send()中加入传输的内容即可

xmlhttp.open("POST", "/r/show/nice/ajax_post",true);
xmlhttp.setRequestHeader("Content-type", "applicaition/x-www-from-urlencoded");
xmlhttp.send("greeting=Nice&name=Dapao");
方法 描述
setRequestHeader(header, value) 向请求添加HTTP 头
header : 规定的头名称
value : 规定的头的值

open()中的URL

xmlhttp.open("GET","ajax_test.html",true);

该文件可以是任何类型的文件 .txt .xml .php .asp 等等

Async 异步

有位哲人曾经说过 Async : to be Ture or not to be

XML HttpRequest 对象如果用于Ajax 必须设置 true

when Async = true

需要定义处于onreadystatechange 事件中的就绪状态时执行的函数

xmlhttp.onreadystatechange = function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

xmlhttp.open("GET","/r/show/yufei/txt/ajax_info",true);
xmlhttp.send();

when Async = false

调用send() 后可以获得服务器返回的结果

xmlhttp.send();
var responseFromServer = xmlhttp.responseText;

不推荐设置false

如果服务器繁忙或者访问速度缓慢 程序会将同步挂起或停止 但这一过程给用户的感受是卡死 卡顿

when Async = false; do not write down onreadystatechange

Ajax服务器响应

属性 描述
responseText 获得字符串形式的响应数据
responseXML 获得 XML 形式的响应数据
responseURL 获得服务器 301 或 302 的跳转地址

responseText

如果服务器响应的数据不是XML或者不需要解析XML数据 则使用

responseXML

var xmlDoc = xmlhttp.responseXML;

var txt="";
var x = xmlDoc.getElementsByTagName("ARTIST");

for (i=0;i<x.length;i++)
{
    txt = txt + x[i].childNodes[0].nodeValue + "<br>";
}

document.getElementById("myDiv").innerHTML=txt;

onreadystatechange

XMLHttpRequest 对象请求过程中的状态变更会赋值给 readyState 属性

同时触发 onreadystatechange 事件

readyState 属性存有 XMLHttpRequest 的状态变更信息

属性 描述
onreadystatechange 存储状态变更处理函数
每当 readyState 属性改变时 会调用该函数
readyState 存有 XMLHttpRequest 的状态 从 0 到 4 发生变化
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成 且响应已就绪
status HTTP 请求的返回的状态
200: “OK”
404: 未找到页面

响应就绪 : readystate == 4 && status == 200

TIPS: onreadystatecahge 被触发五次 对应着readyState的每个变化

使用回调函数

回调函数是一种以参数形式传递给另一个函数的函数

如果我们的网页使用了多个 AJAX 任务,那么应该为创建 XMLHttpRequest 对象编写一个 标准 的函数,并为每个 AJAX 任务调用该函数

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务

// url = /r/show/yufei/txt/ajax_info

function ajax(url)
{
    loadXMLDoc(url,function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    });
}

实现例子

TBD



Codes   Learning Web
本文作者:Ge15emium
版权声明:本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!