Ajax基础

最新推荐文章于 2025-02-24 13:36:17 发布

原创最新推荐文章于 2025-02-24 13:36:17 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax

后端专栏收录该内容

5 篇文章

订阅专栏

Ajax

Asynchronous JavaScript and XML，是一种使用现有标准的新方法。可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。

Ajax工作原理

XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)

1548668711188

Ajax使用

<!DOCTYPE html>        
<html>
<head>        
<script>        
function loadXMLDoc()        
{        
.... AJAX script goes here ...        
}        
</script>        
</head>
<body>                
<div id="myDiv"><h2>Let AJAX change this text</h2></div>        
<button type="button" onclick="loadXMLDoc()">Change Content</button>                
</body>        
</html>

XMLHttpRequest对象

XMLHttpRequest 对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。

现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 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 对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。

get请求

xmlhttp.open("GET","ajax_info.txt",true);
//open(method,url,async)
//method:请求的类型，get或post
//url:文件在服务器上的位置
//async:true或false，是否使用异步
xmlhttp.send();
//send(string),string仅用于post请求

大部分情况下get更快更简单，但以下情况请使用post请求

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（get方法数据量限制1024字节）
发送包含未知字符的用户输入时，post比get更稳定更可靠（安全性更高）

post请求

//如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
xmlhttp.open("POST","ajax_test.html",true); 
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
xmlhttp.send("fname=Henry&lname=Ford");

异步

很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。

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

在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理

设置响应就绪后执行的函数

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

XMLHttpRequest响应

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

respenseText属性

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

responseXML属性

xmlDoc=xmlhttp.responseXML; 
txt=""; 
x=xmlDoc.getElementsByTagName("ARTIST"); 
for (i=0;i<x.length;i++) 
  { 
      //对XML对象进行解析
  txt=txt + x[i].childNodes[0].nodeValue + "<br>"; 
  } 
document.getElementById("myDiv").innerHTML=txt;

onreadystatechange事件

每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

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

readyState	描述
0	请求未初始化，还没有调用 open()。
1	请求已经建立，但是还没有发送，还没有调用 send()。
2	请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3	请求在处理中；通常响应中已有部分数据可用了，没有全部完成。
4	响应已完成；您可以获取并使用服务器的响应了。

使用回调函数简化多个Ajax任务

function myFunction() 
{ 
loadXMLDoc("ajax_info.txt",function() 
  { 
  if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
    } 
  }); 
}

Ajax ASP/PHP

AJAX 用于创造动态性更强的应用程序。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showHint(str)
{
var xmlhttp;
if (str.length==0)
  { 
  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;
    }
  }
xmlhttp.open("GET","/statics/demosource/gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<h3>Start typing a name in the input field below:</h3>
<form action=""> 
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p> 

</body>
</html>

创建了两个版本的服务器文件，gethint.asp用 ASP 编写，gethint.php用 PHP 编写。

<%        
response.expires=-1        
dim a(30)        
'Fill up array with names        
a(1)="Anna"        
a(2)="Brittany"        
a(3)="Cinderella"        
a(4)="Diana"        
a(5)="Eva"        
a(6)="Fiona"        
a(7)="Gunda"        
a(8)="Hege"        
a(9)="Inga"        
a(10)="Johanna"        
a(11)="Kitty"        
a(12)="Linda"        
a(13)="Nina"        
a(14)="Ophelia"        
a(15)="Petunia"        
a(16)="Amanda"        
a(17)="Raquel"        
a(18)="Cindy"        
a(19)="Doris"        
a(20)="Eve"        
a(21)="Evita"        
a(22)="Sunniva"        
a(23)="Tove"        
a(24)="Unni"        
a(25)="Violet"        
a(26)="Liza"        
a(27)="Elizabeth"        
a(28)="Ellen"        
a(29)="Wenche"        
a(30)="Vicky"                
'get the q parameter from URL        
q=ucase(request.querystring("q"))                
'lookup all hints from array if length of q>0        
if len(q)>0 then        
  hint=""        
  for i=1 to 30        
    if q=ucase(mid(a(i),1,len(q))) then        
      if hint="" then        
        hint=a(i)        
      else        
        hint=hint & " , " & a(i)        
      end if        
    end if        
  next        
end if                
'Output "no suggestion" if no hint were found        
'or output the correct values        
if hint="" then        
  response.write("no suggestion")        
else        
  response.write(hint)        
end if        
%>

<?php        
// Fill up array with names        
$a[]="Anna";        
$a[]="Brittany";        
$a[]="Cinderella";        
$a[]="Diana";        
$a[]="Eva";        
$a[]="Fiona";        
$a[]="Gunda";        
$a[]="Hege";        
$a[]="Inga";        
$a[]="Johanna";        
$a[]="Kitty";        
$a[]="Linda";        
$a[]="Nina";        
$a[]="Ophelia";        
$a[]="Petunia";        
$a[]="Amanda";        
$a[]="Raquel";        
$a[]="Cindy";        
$a[]="Doris";        
$a[]="Eve";        
$a[]="Evita";        
$a[]="Sunniva";        
$a[]="Tove";        
$a[]="Unni";        
$a[]="Violet";        
$a[]="Liza";        
$a[]="Elizabeth";        
$a[]="Ellen";        
$a[]="Wenche";        
$a[]="Vicky";                
//get the q parameter from URL        
$q=$_GET["q"];                
//lookup all hints from array if length of q>0        
if (strlen($q) > 0)        
  {        
  $hint="";        
  for($i=0; $i<count($a); $i++)        
    {        
    if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))        
      {        
      if ($hint=="")        
        {        
        $hint=$a[$i];        
        }        
      else        
        {        
        $hint=$hint." , ".$a[$i];        
        }        
      }        
    }        
  }                
// Set output to "no suggestion" if no hint were found        
// or to the correct values        
if ($hint == "")        
  {        
  $response="no suggestion";        
  }        
else        
  {        
  $response=$hint;        
  }                
//output the response        
echo $response;        
?>

Ajax Database

Ajax 可用来与数据库进行动态通信。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
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;
    }
  }
xmlhttp.open("GET","/statics/demosource/getcustomer.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form action=""> 
<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>
</form>
<br>
<div id="txtHint">Customer info will be listed here...</div>

</body>
</html>

用php编写服务器文件，名为getcustomer.php，负责对数据库进行查询，然后用 HTML 表格返回结果。

<%
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>")
%>

Ajax XML

Ajax可用来与 XML文件进行交互式通信。

构建一个 HTML 表格，从 XML 文件中提取节点（元素），最后使用已经填充了 XML 数据的 HTML 表格来更新 txtCDInfo 占位符：

function loadXMLDoc(url)
 {
 var xmlhttp;
 var txt,xx,x,i;
 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)
     {
     txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
     x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
     for (i=0;i<x.length;i++)
       {
       txt=txt + "<tr>";
       xx=x[i].getElementsByTagName("TITLE");
         {
         try
           {
           txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
           }
         catch (er)
           {
           txt=txt + "<td>&nbsp;</td>";
           }
         }
     xx=x[i].getElementsByTagName("ARTIST");
       {
         try
           {
           txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
           }
         catch (er)
           {
           txt=txt + "<td>&nbsp;</td>";
           }
         }
       txt=txt + "</tr>";
       }
     txt=txt + "</table>";
     document.getElementById('txtCDInfo').innerHTML=txt;
     }
   }
 xmlhttp.open("GET",url,true);
 xmlhttp.send();
 }

<!--  Edited by XMLSpy®  -->
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Romanza</TITLE>
<ARTIST>Andrea Bocelli</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.80</PRICE>
<YEAR>1996</YEAR>
</CD>
<CD>
<TITLE>When a man loves a woman</TITLE>
<ARTIST>Percy Sledge</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>For the good times</TITLE>
<ARTIST>Kenny Rogers</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Mucik Master</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>Stop</TITLE>
<ARTIST>Sam Brown</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>A and M</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Red</TITLE>
<ARTIST>The Communards</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>London</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Unchain my heart</TITLE>
<ARTIST>Joe Cocker</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>EMI</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1987</YEAR>
</CD>
</CATALOG>