AJAXS:异步的javascript及XML(Asynchronous JavaScript And XML)
ajax是2005年有google推广开来的一种编程模式。
ajax不是新的编程语言,而是一种使用现有标准的新的方法。
ajax可以创建更好、更快以及友好的web应用程序。
ajax是基于javascript和http请求(http request)
现阶段使用ajax的案例:新浪微博、google地图、开心网等大多数的网站。
下面来看一个demo:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ajax</title>
<script type="text/javascript">
function loadXml(){
alert("ok");
}
</script>
</head>
<body>
<div id="myDiv">
<h3>用ajax改变这个文本!</h3>
</div>
<!--<input type="button" onClick=""></input> -->
<button type="button" onClick="loadXml()">改变文本</button>
</body>
</html>
在这里值得一提的是 XML HttpRequest是ajax的基础。
XML HttpRequest对象
XML HttpRequest由于后台与服务器进行交换数据,这就意味着可以在不重新加载整个网页的情况下,对网特的某部分进行更新。
1、创建XML HttpRequest对象
创建XML HttpReques对象的语法格式: variable = new XMLHttpRequest();
对于老版本的ie使用的是activeX对象
variable= new ActiveXObject("Microsoft.XMLHTTP");
在我们的实际项目中,通常为了适应现在的浏览器,需要检查是否是支持XML HttpReques对象,如果支持,则创建XMLHttpRequest对象,
如果不支持,则创建ActiveXObject;
var xmlhttp;
if(windows.XMLHttpRequest)
{
xml=new XMLHttpRequest();
//对于支持xmlhttprequest对象的浏览器这里面直接创建
}
else
{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
2、向服务器发送请求
如果需要向服务器发送请求,我们使用的是XMLHttpRequest对象的open()、send()两个方法。
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
方法 | 描述 |
---|---|
open(method,url,async) | method是指请求的类型,GET或者POST;url是文件在服务器的位置;async:同步或异步(true) |
send(String ) | 用于POST请求 |
但是这里面出现一个问题:到底使用GET还是POST,我们来说一下POST和GET的区别:
与POST相比GET更简单更快,并且在大多数的情况下是可以使用的。
但是在以下的情况中是必须使用POST请求的:
1、无法使用缓存文件更新服务器上面的文件或者数据库)
2、向服务器发送大量的数据。
3、发送半酣位置字符的用户的输入时,POST比GET更稳定也更可靠。
一个简单的GET请求:
xmlhttp.open("GET","demo.jsp",true);
xmlhttp.send();
但是在这个例子中,我们可能会得到的是缓存的结果,为了避免这种缓存的出现,我们想指向URL添加一个唯一的ID:
xmlhttp.open("GET","demo.jsp?t="+Math.random(),true);
xmlheep.send();
另外:如果需要使用GET方法发送信息并带上参数的时候我们可以这么写:
xmlhttp.open("GET","demo.jsp?t="+name=Davint&age=24",true);
xmlhttp.send();
POST请求
一个简单的post请求:
xmlhttp.open("POST","demo.jsp",true);
xmlhttp.send();
如果想html或者jsp页面里面那样POST数据,我们可以使用
setRequestHeader()来添加HTTP头,然后再send()中规定希望发送的数据是什么;
xmlhttp.open("POST","demo.jsp",true);
xml.setRequestHeader("Content-type","appliacation/x-www-form-urlencode");
xmlhttp.send(name=Davint&age=24);