Ajax笔记 ajax使用教程

Ajax笔记

1. 简介

   是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

   

Ajax是基于现有的Internet标准，并且联合使用：

   XMLHttpRequest对象（异步的与服务器交换数据）

   JavaScript/DOM（信息显示/交互）

   Css（给数据定义样式）

   Xml（作为转换数据的格式）

Ajax应用程序与浏览器和平台无关。

1. 实例

   2.1创建一个XMLHttpRequest对象，这个对象用于和服务器实现异步交互

   <script>

Function loadXMLDoc(){

    Var xmlhttp;

    If(window.XMLHttpRequest){

  Xmlhttp=new XMLHttpRequest();//最新浏览器

}else{

//IE6,IE5浏览器执行代码

Xmlhttp=new ActiveObjct(“Microsoft.XMLHTTP”);

}

}

</script>

2.2向服务器发送请求

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

 Xmlhttp.send();

 

Get和post使用方法对比：

Get更简单也更快，并且在大部分情况下都能用。

在以下情况下，使用post请求

1. 无法使用缓存文件（更新服务器上的文件或数据库）
2. 向服务器发送大量数据（post没有数据量限制）
3. 发送包含未知字符的用户输入时，post比get更稳定更可靠

Get请求实例：

  //向url中添加一个唯一的ID：

  Xmlhttp.open(“GET”,”/try/ajax/demo_get.php?t=”+Math.random(),true);

  Xmlhttp.send();

  //通过GET方法发送信息，请向url添加信息：

  Xmlhttp.open(“GET”,”/try/ajax/demo_get.php?fname=lry&lname=yxr”,true);

  Xml.send();

Post请求实例

  需要使用setRequestHeader()来添加HTTP头，然后send()发送

  Xmlhttp.open(“POST”,”try/ajax/demo_get.php”,true);

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

  Xmlhttp.send(“fname=lry&lname=yxr”);

  

Url-服务器上的文件

Open()方法的url参数是服务器上文件的地址：

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

     该文件可以是任何类型的文件

异步-true或false

Ajax指的是异步的JavaScript和xml

所以XMLHttpRequest要使用Ajax的话，open()方法中的async参数必须设置为true

异步的优点：

 通过Ajax，JavaScript无需等待服务器的响应，而是：

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

  当相应就绪后对响应进行处理

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

  Xmlhttp.onreadystatechange=function(){

      If(xmlhttp.readyState==4 && xmlhttp.status==200){

          Document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;

}  

}

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

  Xmlhttp.send();

 

2.3服务器响应

如果需要获取来自服务器的响应，请使用XMLHttpRequest对象的responseText或responseXML属性。

 

ResponseText属性

！！如果来自服务器的响应并非xml，请使用responseText属性

Eg: documnet.getElementById(“myDiv”).innerHTML=xmlhtp.responseText;

ResponseXML属性

如果来自服务器的响应时xml,而且需要作为xml对象进行解析，使用responseXML属性：

  XmlDoc=xmlhttp.responseXML;

  Txt=””;

  X=xmlDoc.getElementByTagName(“ARTIST”);

  For(i=0;i<x.length;i++){

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

}

Documnet.getElementById(“myDiv”).innerHTML=txt;

2.4 onreadystatecchange事件

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

  每当readyState改变时，就会出发onreadyStatechange事件

XMLHttpRequest对象的三个重要的属性：

 

 Xmlhttp.onreadystatechange=function(){

      If(xmlhttp.readyState==4 && xmlhttp.status==200){

          Document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;

}  

}

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

  Xmlhttp.send();

！！注意：onreadystatechange事件被触发四次 0-1，1-2，2-3，3-4

 

2.5使用回调函数

   如果网站上存在多个Ajax任务，那么应该为创建的XMLHttpRequest对象编写一个标准的函数，并为每个Ajax任务调用该函数

   该函数调用应该包含url以及发生onreadystatechange事件时执行的任务（每次调用可能不尽相同）：

  <script>

var xmlhttp;

function loadXMLDoc(url,cfunc)

{

if (window.XMLHttpRequest)

  {// IE7+, Firefox, Chrome, Opera, Safari 代码

  xmlhttp=new XMLHttpRequest();

  }

else

  {// IE6, IE5 代码

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

  }

xmlhttp.onreadystatechange=cfunc;

xmlhttp.open("GET",url,true);

xmlhttp.send();

}

function myFunction()

{

loadXMLDoc("/try/ajax/ajax_info.txt",function()

{

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

{

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

}

});