浅谈ajax（一）

来源：互联网发布：mac鼠标滚轮设置编辑：程序博客网时间：2024/05/18 18:53

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);

setRequestHeader(header，value)：想请求添加HTTP头，header规定头的名称是什么；value用来规定头的值。