AJAX学习笔记

尽量保证每天学习点新知识。

一．Ajax介绍

Ajax技术不是更新整个页面,而是更新页面的一部分.

学习ajax之前你需要了解的技术有html和javascript.

1)什么是ajax?

Ajax=Asynchoronous javascript and xml.

Ajax是一种快速创建动态页面的技术.

Ajax在后台和服务器进行少量的数据交换，使得页面被异步更新。就意味着有可能不更新整个页面，只是更新页面的一部分。

经典页面，即不使用ajax技术，需要更新网页内容时，必须重新加载整个页面。

2)Ajax基于internet标准

Ajax基于internet标准，并且使用如下组合：

Xmlhttprequest object（检索服务器传来的数据）

Javascript/dom（显示或使用数据）

3)Google suggest

Ajax是在2005年通过google才受欢迎的，被应用在google suggest。

Google suggest使用ajax技术创建动态页面：当你在搜索框键入搜索内容时，javascript发送数据到服务器，并且服务器返回一串数据。

4)今天开始使用ajax

Ajax是基于现行标准的技术。这些标准已经被开发者使用了很多年。阅读下面的章节来看下ajax是如何工作的。

二．Ajax-创建xmlhttprequest object

Ajax的重点就是xmlhttprequest object。

1)     xmlhttprequest object

所以现代浏览器都支持xmlhttprequestobject。

Xmlhttprequest object在后台和服务器进行数据交互。就意味着有可能不更新整个页面，只是更新页面的一部分。

2)     创建xmlhttprequest object

所有的现代浏览器都有一个内置的xmlhttprequest object。

创建xmlhttprequestobject的语法：

Variable = new XMLHttpRequest();

老版本的ie浏览器使用activex object：

Varivable = new ActiveXObject(“Microsoft.XMLHTTP”);

针对所有的浏览器，包括ie5和ie6，检查浏览器是否支持xmlhttprequest object。

如果支持就创建xmlhttprequestobject，如果不支持就创建activexobject：

Var xhttp;

If(window.XMLHttpRequest)

{

      Xhttp= new xmlhttprequest();

}

Else

{

      Xhttp= new ActiveXObject(“Microsoft.XMLHTTP”);

}

三．发送数据到服务器

XMLHttpRequest object用来和服务器交换数据。

1)     发送请求到服务器

发送请求到服务器，我们使用xmlhttprequestobject的open和send方法：

Xhttp.open(“GET”,”ajax_info.txt”,true);

Xhttp.send();

方法介绍：

Open(method,url,async)

描述：指定请求类型。

参数：

method：请求类型（get或post）

url：服务器地址

async：true（asynchronous）或者false（synchronous）

send()

      描述：使用get类型发送请求到服务器

send(string)

      描述：使用post类型发送请求到服务器

2)     get和post的区别

get比post更小和更快，并且可以用在很多种情况下。

然而，继续使用post请求的原因是：

缓存文件不是一个选项（更新服务器的文件或数据库）

发送大量数据到服务器（post是无大小限制的）

发送用户输入（包含未知字符），post更健壮和安全。

3）get请求

Xhttp.open(“GET”,”demo_get.asp”,true);

Xhttp.send();

在上面的例子中，你可能会得到一个缓存结果。为了避免这个结果，新增一个唯一的url

Xhttp.open(“GET”,”demo_get.asp?t=“+Math.random(),true);

Xhttp.send();

如果你想发送一些信息通过get方法，新增信息到url中：

Xhttp. open (“GET”, “demo_get2.asp?fname=Henry&lname=Ford”, true);
Xhttp. send ();

3)    post请求

Xhttp.open(“POST”,”demo_get.asp”,true);

Xhttp.send();

POST数据就像html表格，通过setRequestHeader函数新增http头。通过send函数指定想要发送的数据。

Xhttp.open(“POST”,”demo_get.asp”,true);

Xhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);

Xhttp.send(“fname=Henry&lname=Ford”);

方法介绍：

setRequestHeader(header,value);

      描述：给请求新增http头

      参数：

      Header:指定头名字

      Value：指定头的值

4)     url-服务器上的文件

open函数的url参数，是服务器上的文件地址。

Xhttp.open(“GET”,”ajax_text.sap”,true);

这个文件可以是任何类型的，像txt、xml，或者服务器上脚本文件像.asp或者.php

5)     异步-选择true或者false

Ajax代表异步javascript和xml，xmlhttprequestobject作为ajax，open函数的异步参数被设置为true：

Xhttp.open(“GET”,”ajax_test.asp”,true);

对于开发者来说发送异步请求是个巨大的提升。在服务器端执行很多任务相当耗费时间。没有ajax之前，这些操作会导致应用程序挂起和停止。

使用了ajax后，javascript不会一直等待服务器响应，反而替代它的是：

在等待服务器响应时执行其他脚本。

当响应准备好后，处理响应。

6)     异步=true

使用async=true，指定函数取执行，当响应已经准备好，收到响应事件时：

Xhttp.onreadystatechange = function(){

      If(xhttp.readystate== 4 && xhttp.status == 200)

{

      Document.getElementById(“demo”).innerHTML= xhttp.reponseText;

}

};

Xhttp.open(“GET”,”ajax_info.txt”,true);

Xhttp.send();

7)     异步=false

使用async=false,在open函数中改变第三个参数的值：

Xhttp.open(“GET”,”ajax_info.txt”,false);

使用async=false不被推荐，但是对少量请求时被允许的。

直到服务器响应是准备好的，javascript才会继续执行。

如果服务器是忙碌或者很慢，应用程序会挂起或者停止。

使用async=false时，就必须要写onreadystatechange函数，代码如下：

Xhttp.open(“GET”,”ajax_info.txt”,true);

Xhttp.send();

Document.getElementById(“demo”).innerHTML =xhttp.reponseText;

四．服务器响应

取得服务器响应，使用XMLHttpRequestobject的responseText或者resopnseXML属性。

属性描述

ResponseText：取得字符串类型的响应数据

ResponseXML：取得xml类型的响应数据

1)     responseText属性

如果服务器响应的数据类型不是xml就使用responseText属性。

ResponseText属性返回字符从类型数据，可以使用如下：

Document.getElementById(“demo”).innerHTML =xhttp.reponseText;

2)     responseXML属性

如果服务器响应xml类型数据，想要解析xml对象，使用此属性：

xmlDoc = xhttp.resonpseXML;

txt = “”;

x = xmlDoc.getElementsByTagName(“ARTIST”);

for(i=0;i<x.length;i++)

{

      Txt+=x[i].childNodes[0].nodeValue+”<br>”;

}

Document.getElementById(“demo”).innerHTML =txt;

五．onreadystatechange事件

1) onreadystatechange事件

当一个请求已经发送，我们想要针对响应执行一些操作。

每次readyState改变时会触发onreadystatechange事件。

readyState属性保存xmlhttprequest的状态。

Xmlhttprequest object的三个重要属性：

Onreadystatechange：当readystate属性改变时会自动调用此属性函数

ReadyState：保存xmlhttprequest状态，值为0-4

      0：请求未初始化

      1：服务器建立连接

      2：收到请求

      3：处理请求

      4：请求完成和响应准备完成

Status：200：“ok” 404：“找不到页面”

在onreadystatechange事件中，我们在服务器处理响应完成后，指定接下来会发生什么。

当readystate是4并且status是200，说明响应已经准备好：

Function loadDoc()

{

      Varxhttp = new XMLHttpRequest();

      xhttp.onreadystatechange= function(){

if(xhttp.readyState== 4 && xhttp.status == 200)

      document.getElementById(“demo”).innerHTML= xhttp.responseText;

}

}

3)     使用回调函数

回调函数是一个函数作为另一个函数的参数。

关于你的网站如果你有更多的ajax任务，你应该去创建一个标准的函数为了创建XMLhttprequestobject,并且让每个ajax任务都调用它。

这个函数调用应该包含url，以及onreadstatechange函数如何去操作：

Function loadDoc(cFunc)

{

      Varxhttp = new XMLHttpRequest();

      Xhttp.onreadystatechange= function(){

      If(xhttp.readyState== 4 && xhttp.stauts ==200)

{

      cFunc(xhttp);

}

}

}