尽量保证每天学习点新知识。
一.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);
}
}
}