Ajax常使用的方法

最新推荐文章于 2024-07-11 20:52:59 发布

tianmo2010

最新推荐文章于 2024-07-11 20:52:59 发布

阅读量725

点赞数

分类专栏： Ajax技术文章标签： ajax xmlhttprequest mysql url function xhtml

本文链接：https://blog.csdn.net/tianmohust/article/details/7801869

版权

Ajax技术专栏收录该内容

4 篇文章 0 订阅

订阅专栏

利用XMLHTTPRequest物件与远端的Web Server进行非同步的资料交换

if (window.XMLHttpRequest){

http_request=new XMLHttpRequest();

}else if ( window.ActiveXobject){

try{

//新版IE

http_request=new ActiveXobject("MSXML2XMLHTTP");

}catch(e){

try{//旧版IE

http_request=new ActiveXobject("Microsoft.XMLHttp");

}catch(e){}

//现要取得档案名为taichung.xml

http_request.open('Get','taichung.xml',true);

//get：是HTTP方法（GET、POST或HEAD）

//文件名

//true：是不是非同步

http_request.send(null);

//使用get方式，send()的参数为NULL，使用POST方式，除了设定MIME类型。

http_request.setRequestHeader('content-type','application/x-www-unlencoded');

//还需传送HTML FORM内的资料；

http_request.send('name=value&canothername=othervalue&so=on');

//在OPEN()和SEND()之前，先设定一些事件处理函数处理如'已经取得资料'的事件。

http_request.onreadystatechange=function(){

//do the thing

};

//处理状态属性值有0、1、2、3、4

//尚未初始化，未呼叫open ----------载入中，http_request已经设定好，但未呼叫send---------------载入完成，http_request已经送给server了，可以取得Content header----------可以互动的，http_request已部分完成，亦可取得部分处理完的资料--------完成的

if (http_request.readystate==4){

//everything is good,the response is received

}else {

//still not ready

}

//web server处理结束后，传回一个处理结果，处理结果放在STATUS属性里

if(http_request.status==200){

//可依需求处理

}else{

//404代表档案不存在，500处理错误。

}

//最后接收来自WEB SERVER资料，Http_Request提供两种方式来存取资料。

http_request.responseText //WEB SERVER回传的资料是一串文字，需用字串的处理函数

http_request.responseXML //回传资料是一份XMLDocument物件，可利用javascript的DOM APIS 来存取XML物件。

}

一演示当用户向 web 表单中输入数据时，网页如何与在线的 web 服务器进行通信。

//index.php

<html>
<head>
<title>Ajax使用例子</title>
<script src="clienthint.js"></script> 
</head>

<body>

<form> 
First Name:
<input type="text" id="txt1" οnkeyup="showHint(this.value)">
</form>

<p>Suggestions: <span id="txtHint"></span></p>

</body>
</html>

//clienthint.js

// JavaScript Document

var xmlHttp;

function showHint(str){

	if (str.length == 0){ 
	  document.getElementById("txtHint").innerHTML = "";
	  return ;
	}
	
	//get the object
	xmlHttp = GetXmlHttpObject()
	
	if (xmlHttp == null){
	  alert ("Browser does not support HTTP Request");
	  return ;
	}
	
	var url = "gethint.php";
	url = url + "?q=" + str;
	url = url + "&sid=" + Math.random();
	xmlHttp.onreadystatechange = stateChanged; 
	xmlHttp.open("GET", url, true);
	xmlHttp.send(null);
} 

function stateChanged(){ 
	if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete"){ 
		document.getElementById("txtHint").innerHTML = xmlHttp.responseText;
	} 
}

function GetXmlHttpObject(){
	var xmlHttp = null;
	try{
		// Firefox, Opera 8.0+, Safari
		xmlHttp = new XMLHttpRequest();
	}
	catch(e){
		// Internet Explorer
		try{
		  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e){
		  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
	 }
	 
	return xmlHttp;
}

//gethint.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<?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;
?>

</body>
</html>

二读取xml文件

//readxml.php

<html>
<head>
<script src="select.js"></script>
</head>

<body>

<form> 
Select a CD:
<select name="cds" οnchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bee Gees">Bee Gees</option>
<option value="Cat Stevens">Cat Stevens</option>
</select>
</form>

<p>
<div id="txtHint"><b>CD info will be listed here.</b></div>
</p>

</body>
</html>

//select.js

与一中相似，只是访问的url稍微更改一下。

//getcd.php

<?php
$q=$_GET["q"];

$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_catalog.xml");

$x=$xmlDoc->getElementsByTagName('ARTIST');

for ($i=0; $i<=$x->length-1; $i++)
{
//Process only element nodes
if ($x->item($i)->nodeType==1)
  {
  if ($x->item($i)->childNodes->item(0)->nodeValue == $q)
    { 
    $y=($x->item($i)->parentNode);
    }
  }
}

$cd=($y->childNodes);

for ($i=0;$i<$cd->length;$i++)
{ 
//Process only element nodes
if ($cd->item($i)->nodeType==1)
  { 
  echo($cd->item($i)->nodeName);
  echo(": ");
  echo($cd->item($i)->childNodes->item(0)->nodeValue);
  echo("<br />");
  } 
}
?>

//cd_catalog.xml

<?xml version="1.0" encoding="ISO-8859-1" ?> 
 <!--  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>Eros</TITLE> 
  <ARTIST>Eros Ramazzotti</ARTIST> 
  <COUNTRY>EU</COUNTRY> 
  <COMPANY>BMG</COMPANY> 
  <PRICE>9.90</PRICE> 
  <YEAR>1997</YEAR> 
  </CD>
 <CD>
  <TITLE>One night only</TITLE> 
  <ARTIST>Bee Gees</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Polydor</COMPANY> 
  <PRICE>10.90</PRICE> 
  <YEAR>1998</YEAR> 
  </CD>
 <CD>
  <TITLE>Sylvias Mother</TITLE> 
  <ARTIST>Dr.Hook</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>CBS</COMPANY> 
  <PRICE>8.10</PRICE> 
  <YEAR>1973</YEAR> 
  </CD>
 <CD>
  <TITLE>Maggie May</TITLE> 
  <ARTIST>Rod Stewart</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Pickwick</COMPANY> 
  <PRICE>8.50</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>Black angel</TITLE> 
  <ARTIST>Savage Rose</ARTIST> 
  <COUNTRY>EU</COUNTRY> 
  <COMPANY>Mega</COMPANY> 
  <PRICE>10.90</PRICE> 
  <YEAR>1995</YEAR> 
  </CD>
 <CD>
  <TITLE>1999 Grammy Nominees</TITLE> 
  <ARTIST>Many</ARTIST> 
  <COUNTRY>USA</COUNTRY> 
  <COMPANY>Grammy</COMPANY> 
  <PRICE>10.20</PRICE> 
  <YEAR>1999</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>Big Willie style</TITLE> 
  <ARTIST>Will Smith</ARTIST> 
  <COUNTRY>USA</COUNTRY> 
  <COMPANY>Columbia</COMPANY> 
  <PRICE>9.90</PRICE> 
  <YEAR>1997</YEAR> 
  </CD>
 <CD>
  <TITLE>Tupelo Honey</TITLE> 
  <ARTIST>Van Morrison</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Polydor</COMPANY> 
  <PRICE>8.20</PRICE> 
  <YEAR>1971</YEAR> 
  </CD>
 <CD>
  <TITLE>The very best of</TITLE> 
  <ARTIST>Cat Stevens</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Island</COMPANY> 
  <PRICE>8.90</PRICE> 
  <YEAR>1990</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>Bridge of Spies</TITLE> 
  <ARTIST>T'Pau</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Siren</COMPANY> 
  <PRICE>7.90</PRICE> 
  <YEAR>1987</YEAR> 
  </CD>
 <CD>
  <TITLE>Private Dancer</TITLE> 
  <ARTIST>Tina Turner</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Capitol</COMPANY> 
  <PRICE>8.90</PRICE> 
  <YEAR>1983</YEAR> 
  </CD>
 <CD>
  <TITLE>Midt om natten</TITLE> 
  <ARTIST>Kim Larsen</ARTIST> 
  <COUNTRY>EU</COUNTRY> 
  <COMPANY>Medley</COMPANY> 
  <PRICE>7.80</PRICE> 
  <YEAR>1983</YEAR> 
  </CD>
 <CD>
  <TITLE>Pavarotti Gala Concert</TITLE> 
  <ARTIST>Luciano Pavarotti</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>DECCA</COMPANY> 
  <PRICE>9.90</PRICE> 
  <YEAR>1991</YEAR> 
  </CD>
 <CD>
  <TITLE>The dock of the bay</TITLE> 
  <ARTIST>Otis Redding</ARTIST> 
  <COUNTRY>USA</COUNTRY> 
  <COMPANY>Atlantic</COMPANY> 
  <PRICE>7.90</PRICE> 
  <YEAR>1987</YEAR> 
  </CD>
 <CD>
  <TITLE>Picture book</TITLE> 
  <ARTIST>Simply Red</ARTIST> 
  <COUNTRY>EU</COUNTRY> 
  <COMPANY>Elektra</COMPANY> 
  <PRICE>7.20</PRICE> 
  <YEAR>1985</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>

三 ajax数据库实例

//readmysql.php

<html>
<head>
<script src="selectuser.js"></script>
</head>
<body>

<form> 
Select a User:
<select name="users" οnchange="showUser(this.value)">
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>

<p>
<div id="txtHint"><b>User info will be listed here.</b></div>
</p>

</body>
</html>

//selectuser.js

//与一中相似，稍微改下url的名字即可

//getuser.php

<?php
$q=$_GET["q"];

$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
 {
 die('Could not connect: ' . mysql_error());
 }

mysql_select_db("ajax_demo", $con);

$sql="SELECT * FROM user WHERE id = '".$q."'";

$result = mysql_query($sql);

echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";

while($row = mysql_fetch_array($result))
 {
 echo "<tr>";
 echo "<td>" . $row['FirstName'] . "</td>";
 echo "<td>" . $row['LastName'] . "</td>";
 echo "<td>" . $row['Age'] . "</td>";
 echo "<td>" . $row['Hometown'] . "</td>";
 echo "<td>" . $row['Job'] . "</td>";
 echo "</tr>";
 }
echo "</table>";

mysql_close($con);
?>

tianmo2010

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax常使用的方法

利用XMLHTTPRequest物件与远端的Web Server进行非同步的资料交换if (window.XMLHttpRequest){ http_request=new XMLHttpRequest(); }else if ( window.ActiveXobject){ try{ //新版IEhttp_reques
复制链接

扫一扫