Ajax 学习笔记

最新推荐文章于 2025-09-08 20:55:49 发布

转载最新推荐文章于 2025-09-08 20:55:49 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Lazy-Cat/p/9917696.html

文章标签：

#数据库 #php

创建XMLHttpRequest 对象

variable=new XMLHttpRequest();

/*老版IE(IE5,IE6)*/

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

向服务器发送请求

xmlhttp.open("请求的类型","请求的URL","是否为异步")

/*GET请求*/

xmlhttp.open("GET","xxx.php",true);
xmlhttp.send();

/*POST请求*/

xmlhttp.open("GET","xxx.php",true);
xmlhttp.send();

GET与POST请求的适用条件

大多数情况使用GET,因为GET请求简单快速
但以下情况使用POST

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

服务器响应

服务器响应有responseText和responseXML两种方式,常用responseXML

/*responseText,返回的是一个字符串*/

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

/*responseXML,返回的是一个XML对象*/

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

状态响应事件

readyState表示XMLHttpRequest对象的状态

请求未初始化
服务器连接已建立
请求已接收
请求处理中
请求已完成，且响应已就绪

当状态发生改变时会触发onreadystatechange()事件

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

/*回调函数*/
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    /*另一个函数*/
        function()
    }
}

从数据库读取数据的步骤

客户端
function xx(str){
1.检查是否已选择某个数据,
2.根据浏览器类型创建 XMLHttpRequest 对象
3.当服务器响应就绪时执行所创建的函数
4.把请求发送到服务器上的文件
}

function showCustomer(str)
{
  var xmlhttp; 
  
  /*第一步*/
  if (str=="")
  {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  /*第二步*/
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  /*第三步*/
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  /*第四布*/
  xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);
  xmlhttp.send();
}

服务端
查询数据库然后对客户端的请求做出回应

<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"

set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn

response.write("<table>")
do until rs.EOF
  for each x in rs.Fields
    response.write("<tr><td><b>" & x.name & "</b></td>")
    response.write("<td>" & x.value & "</td></tr>")
  next
  rs.MoveNext
loop
response.write("</table>")
%>

读取XML文件

创建XMLHttpRequest对象x
调用x.onreadystatechange()函数进行状态检测
在x.onreadystatechange()函数中调用回调函数(如下)进行XML文档读取

function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Artist</th><th>Title</th></tr>";
  var x = xmlDoc.getElementsByTagName("CD");
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}

参考文献:http://www.runoob.com/ajax/ajax-xmlfile.html

转载于:https://www.cnblogs.com/Lazy-Cat/p/9917696.html