Ajax学习笔记

来源：互联网发布：阿里云合作伙伴等级编辑：程序博客网时间：2024/06/06 01:27

异步JavaScript和XML
1.无需重载页面，部分更新页面。
2.工作原理：浏览器端产生XMLHttpRequest对象，发送请求
服务器接收到请求创建response返回需要的数据
浏览器端处理数据更新部分页面
3.创建 XMLHttpRequest 对象的语法：

 variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

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

兼容创建：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");    }

4.GET向服务器发送请求，参数直接URL传值

  .open("方法",url,是否异步处理);  xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);  xmlhttp.send();

5.POST请求的使用情况：
无法使用缓存文件向服务器发送大量数据发送未知字符的用户输入
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。
然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.html",true);    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");    mlhttp.send("fname=Henry&lname=Ford");

6.优势机制：在等待响应时执行其他脚本，响应就绪后再进行处理
7.编写回调函数

.onreadystatechange=function()    {      if (xmlhttp.readyState==4 && xmlhttp.status==200)//响应就绪，状态ok      {      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;      }    }

8.如果异步同步设置为false，不用编写onreadystatechange 函数
把代码放到 send()语句后面即可；
缺点：脚本会挂起直到服务器返回数据。
9.服务器返回responseText/responseXML
XML文件处理：

 xmlDoc=xmlhttp.responseXML;    txt="";    x=xmlDoc.getElementsByTagName("ARTIST");    for (i=0;i<x.length;i++)    {    txt=txt + x[i].childNodes[0].nodeValue + "<br>";    }    document.getElementById("myDiv").innerHTML=txt;

10.onreadystatechange事件
readystate：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status：
200：OK
404未找到页面
11.多个Ajax回调下，使用标准函数，回调函数作为参数传入

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

12.Ajax数据库通信 php/asp/jsp等后台实现。
13.Ajax XML处理

    x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");//获取特定标签    for (i=0;i<x.length;i++)//遍历

14.相关实例
http://www.w3cschool.cc/ajax/ajax-examples.html

0 0