ajax 简单示例

AJAX - 向服务器发送一个请求

XMLHttpRequest对象用来和服务器交换数据.

---

发送一个请求到服务器

为了发送一个请求到服务器，我们需要使用XMLHttpRequest对象的open() 和 send() 方法:

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

 

方法
描述open(method,url,async)指定请求的类型, URL, 以及这个请求是否以asynchronously方式处理.
method:请求的类型: GET or POST
url: 文件在服务器上的位置
async: true (异步asynchronous) or false (同步synchronous)send(string)发送请求到服务器.
string: 只有POST请求才会用到

 

---

GET or POST?

GET 比POST简单而且更快捷,并且大部分时候都可以使用.

然而一下情况通常会使用POST请求requests:

• 非缓存文件A cached file is not an option (更新服务器上的文件或者数据库)
• 发送大量数据到 服务器(POST没有大小限制)
• 发送用户输入(包含未知特殊的字符), POST比GET更强壮，更安全

---

GET Requests

一个简单的GET请求:

例子：

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();
Try it yourself »

在这个例子中，我们可能得到的是一个缓存的结果.为了避免这个，可以为URL添加一个unique ID:

例子：

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();
Try it yourself »

如果希望使用GET方法发送信息,给URL添加信息:

例子

xmlhttp.open("GET","demo_get2.asp?fname=Henry&lname=Ford",true);
xmlhttp.send();
Try it yourself »

---

POST请求

一个简单的POST请求:

例子

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();
Try it yourself »

为了向HTML form 一样POST数据，可以使用setRequestHeader()添加一个HTTP header. 指定我们想使用send（）方法传送的数据:

例子

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
Try it yourself »

 

方法描述
setRequestHeader(header,value)给请求添加添加HTTP headers
header: 指定header的名字
value: 指定header的值

 

---

url - 一个服务器上的文件

open（）方法的url parameter, 是一个服务器上文件的地址:

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

这个文件可以是任何类新，比如 .txt and .xml, or 或者服务器脚本文件 .asp and .php (在返回反应之前服务器执行的一些行动).

---

Asynchronous（异步） - 真或者假?

AJAX 表示Asynchronous JavaScript and XML, 并且为了使XMLHttpRequest对象表现的更象AJAX, open（）方法设置async参数为真:

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

发送异步请求，对于web开发人员是一个很大的提高.服务器上执行的任务非常耗费时间，在AJAX之前, 这类操作导致应用停止或者挂起.

使用AJAX, JavaScript不需要等待服务器响应，而是能：

• 在等待系统响应的时候执行其他脚本
• 当响应就绪的时候处理响应

---

Async=true

当使用async=true, 在onreadystatechange事件中，当响应就绪时，指定一个函数执行:

例子

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementByIdx_x_x("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
Try it yourself »

关于onreadystatechange，我们在以后会学习的更多.

---

Async=false

为了使用async=false, 可以改变open（）方法中的第三个参数为false:

xmlhttp.open("GET","ajax_info.txt",false);

不推荐使用async=false,但是对于一些小的请求也没有问题.

切记JavaScript不会继续执行，知道服务器响应就绪. 如果服务器很忙或者很慢，应用会挂起或者停止

注意: 当使用async=false, 千万不要写onreadystatechange函数 - 只需要把代码放在send（）后面就可以了:

例子

xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementByIdx_x_x("myDiv").innerHTML=xmlhttp.responseText;

Try it yourself »

服务器响应

为了得到服务器响应, 使用XMLHttpRequest 对象的 responseText 或者 responseXML属性.

属性描述responseText作为字符串得到响应数据responseXML作为xml数据得到响应数据

 

---

responseText 属性

如果从服务器得到的响应不是XML, 使用 responseText 属性.

responseText 属性作为一个字符串返回, 我们可以相应的使用它:

例子

document.getElementByIdx_x_x("myDiv").innerHTML=xmlhttp.responseText;
Try it yourself »

---

responseXML 属性

如果从服务器的响应是XML, 我们需要把它作为一个XML对象解析时，使用responseXML 属性:

例子

请求文件 cd_catalog.xml 并解析响应:

xmlDoc=xmlhttp.responseXML;
var txt="";
x=xmlDoc.getElementsByTagName_r("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  }
document.getElementByIdx_x_x("myDiv").innerHTML=txt;

Try it yourself »

onreadystatechange 事件

当请求向服务器发送以后, 我们希望在响应的基础上执行某些操作.

每一次readyState发生改变，onreadystatechange 事件都会被触发.

readyState 属性拥有XMLHttpRequest的状态.

XMLHttpRequest对象的三个重要属性:

属性描述
onreadystatechange保存一个函数，或者函数的名字，每次readyState 属性发生改变的时候执行readyState拥有XMLHttpRequest的状态. 在0 到 4之间变化:
0: 请求未初始化
1: 服务器链接建立
2: 请求收到了
3: 请求处理中
4: 请求完成响应就绪status200: "OK"
404: Page not found

在onreadystatechange事件中, 我们指定了当服务器响应即将处理时将要发生什么.

当readyState 是 4 并且 status 是 200, 表示响应就绪:

例子

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementByIdx_x_x("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
Try it yourself »

注意: onreadystatechange 被触发了4次, 每次都对应readyState的一次变化.

---

使用Callback函数

callback 函数是一个用来作为另外一个函数的参数传递的.

如果我们有不止一个任务在网站上, 我们应该创建一个标准的函数来创建XMLHttpRequest对象, 并且为每一个AJAX任务调用它.

这个函数调用应该包含URL，以及onreadystatechange（每次调用可能会不同）应该做什么 :

例子

function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementByIdx_x_x("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}

Try it yourself »

AJAX 用来创建交互性更强的应用.

---

AJAX ASP/PHP 例子

下面的例子会解释一个网页，在用户录入字符的时候怎么和服务器通信:

例子

Start typing a name in the input field below:

First name:

Suggestions:

Try it yourself »

---

例子解释 - showHint() 函数

当用户在上面的输入区域打字时，函数 "showHint()" 就会被执行. 这个函数是被 "onkeyup" 事件触发的:

function showHint(str)
{
if (str.length==0)
  {
  document.getElementByIdx_x_x("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementByIdx_x_x("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}

代码解析:

如果输入区域是空 (str.length==0), 函数清空txtHint占位符的内容，并退出函数.

如果输入区域非空, showHint() 函数执行一下操作:

• 创建一个XMLHttpRequest 对象
• 创建一个函数以便服务器响应就绪的时候执行
• 发出请求到服务器上的文件
• 参数（q）添加到URL（和输入区域的内容一起）