Ajax

什么是Ajax：

Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 不是新的编程语言，而是一种使用现有标准的新方法，是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下，来改变用户体验。

XMLHttpRequest 是 AJAX 的基础

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject），用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建 XMLHttpRequest 对象的语法：variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xmlhttp;

if (window.XMLHttpRequest)

  {// code for IE7+, Firefox, Chrome, Opera, Safari（适用的浏览器）

  xmlhttp=new XMLHttpRequest();

  }

else

  {// code for IE6, IE5（适用的浏览器）

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

向服务器发送请求：（XMLHttpRequest 对象用于和服务器交换数据）

使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","test1.txt",true);

xmlhttp.send();

 

 

 

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 · method：请求的类型；GET 或 POST · url：文件在服务器上的位置 · async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。 · string：仅用于 POST 请求

 

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

· 无法使用缓存文件（更新服务器上的文件或数据库）

· 向服务器发送大量数据（POST 没有数据量限制）

· 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

· 传输时的数据是重要私密数据时使用，如密码等参数

 

GET 请求

一个简单的 GET 请求：

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

xmlhttp.send();

 

可能得到的是缓存的结果，向 URL 添加一个唯一的 ID：

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);

xmlhttp.send();//Math.random()：随机数

GET 方法发送信息，请向 URL 添加信息：

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);

xmlhttp.send();//传参数fname=Bill&lname=Gates"

 

 

 

<script type="text/javascript">

function loadXMLDoc()//点击事件

{

var xmlhttp;

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.getElementById("myDiv").innerHTML=xmlhttp.responseText;//响应返回的结果

    }

  }

xmlhttp.open("GET","/ajax/demo_get.asp",true);//GET请求方式

xmlhttp.send();

}

</script>

 

POST 请求

一个简单 POST 请求：

xmlhttp.open("POST","demo_post.asp",true);

xmlhttp.send();//POST请求demo_post.asp为请求页面

使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

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

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Bill&lname=Gates");

使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

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

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Bill&lname=Gates");

 

 

<script type="text/javascript">

function loadXMLDoc()

{

var xmlhttp;

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.getElementById("myDiv").innerHTML=xmlhttp.responseText;

    }

  }

xmlhttp.open("POST","/ajax/demo_post2.asp",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Bill&lname=Gates");

}

</script>

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

xmlhttp.open("GET","ajax_test.asp",true);//TRUE为async

 

Async = true

当使用 async=true 时，规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

xmlhttp.onreadystatechange=function()

  {

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

    {

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

    }

  }

xmlhttp.open("GET","test1.txt",true);

xmlhttp.send();

Async = false

使用 async=false，将 open() 方法中的第三个参数改为 false：

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

我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。

请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

注释：使用 async=false 时，不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：

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

xmlhttp.send();

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

 

服务器响应

获得来自服务器的响应，使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

responseText 属性

如果来自服务器的响应并非 XML，使用 responseText 属性。

responseText 属性返回字符串形式的响应，使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

 

 

 

 

 

 

 

 

 

 

onreadystatechange 事件

当请求被发送到服务器时，需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 · 0: 请求未初始化 · 1: 服务器连接已建立 · 2: 请求已接收 · 3: 请求处理中 · 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()

  {

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

    {

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

    }

  }

 

Ajax数据库实例

<html>

<head>

<script type="text/javascript">

function showCustomer(str)//输入框获取的值

{

var xmlhttp;    

if (str=="")//为空 返回

  {

  document.getElementById("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.getElementById("txtHint").innerHTML=xmlhttp.responseText;

    }

  }

//向服务器发送参数，为GET请求方式

xmlhttp.open("GET","/ajax/getcustomer.asp?q="+str,true);

xmlhttp.send();

}

</script>

</head>

<body>

 

<form action="" style="margin-top:15px;">

<label>请选择一位客户：

<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">

<option value="APPLE">Apple Computer, Inc.</option>

<option value="BAIDU ">BAIDU, Inc</option>

<option value="Canon">Canon USA, Inc.</option>

<option value="Google">Google, Inc.</option>

<option value="Nokia">Nokia Corporation</option>

<option value="SONY">Sony Corporation of America</option>

</select>

</label>

</form>

<br />

<div id="txtHint">客户信息将在此处列出 ...</div>

 

</body>

</html>