简单ajax应用，个人参考笔记

最新推荐文章于 2024-10-20 22:58:27 发布

追车

最新推荐文章于 2024-10-20 22:58:27 发布

阅读量112

点赞数

分类专栏： php javascript 文章标签： ajax php 笔记应用案例

php 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

javascript

14 篇文章 0 订阅

订阅专栏

案例一：
ajax.html


<?xml version="1.0" encoding="UTF-8" ?>
<!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=UTF-8" />
<title>Insert title here</title>
<script language="javascript" src="ajax.js"></script>
</head>
<body>
<input type="text" name="myname" onmouseout="process()"/>
<input type="button" value="submit" onclick="process()" />
<div id="message"></div>
</body>
</html>

ajax.js


var xmlHttp;
xmlHttp = create_obj();
function create_obj() {
	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;
}
function process() {
	name = document.getElementsByName("myname")[0].value;
	xmlHttp.open("GET", "ajax.php?name=" + name, true);
	xmlHttp.onreadystatechange = handle_f;
	xmlHttp.send(null);
}
function handle_f() {
	if (xmlHttp.readyState == 4) {
		if (xmlHttp.status == 200) {
			result = xmlHttp.responseText;
			c = document.getElementById("message");
			c.innerHTML = result;
		}else {
			alert(xmlHttp.statusText);
		}
	} 
}

ajax.php


<?php
$user=array("111","222","333","444","555");
if (in_array($_GET["name"],$user)) {
	echo $_GET["name"]." exist.";
}else {
	echo $_GET["name"]." not exist.";
}

案例二：
ajax_xml.html


<?xml version="1.0" encoding="UTF-8" ?>
<!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=UTF-8" />
<title>Insert title here</title>
<script language="javascript" src="ajax_xml.js"></script>
</head>
<body>
<select id="s_c" multiple="multiple" size="12" style="width: 160px;">
	<option value="111">111</option>
	<option value="222">222</option>
	<option value="333">333</option>
	<option value="444">444</option>
	<option value="555">555</option>
	<option value="666">666</option>
	<option value="777">777</option>
	<option value="888">888</option>
	<option value="999">999</option>
	<option value="1010">1010</option>
	<option value="1111">1111</option>
	<option value="1212">1212</option>
	<option value="1313">1313</option>
	<option value="1414">1414</option>
</select>
</br>
<input type="button" value="RandSelect" onclick="randSelect(1,10,3)" />
<input type="button" value="select" onclick="process()" />
<input type="button" value="refresh" onclick="refresh()" />
<div id="result"></div>
<p>

ajax_xml.js


var xmlHttp;
xmlHttp = create_obj();
function create_obj() {
	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;
}
function createxmlcon() {
	var xml = "<members>";
	var options = document.getElementById("s_c").childNodes;
	var option = null;
	for ( var i = 0; i < options.length; i++) {
		option = options[i];
		if (option.selected) {
			xml = xml + "<member>" + option.value + "<\/member>";
		}
	}
	xml += "<\/members>";
	return xml;
}
function process() {
	var date = new Date();
	temp = date.getTime();
	var url = "ajax_xml.php?timestamp=" + temp;
	xmlcon = createxmlcon();
	xmlHttp.open("POST", url, true);
	xmlHttp.setRequestHeader("Content-type",
			"application/x-www-form-urlencoded");
	xmlHttp.setRequestHeader("Content-length", xmlcon.length);
	xmlHttp.onreadystatechange = handle_f;
	xmlHttp.send(xmlcon);
}
function handle_f() {
	if (xmlHttp.readyState == 4) {
		if (xmlHttp.status == 200) {
			parseResult();
		} else {
			alert(xmlHttp.statusText);
		}
	}
}
function parseResult() {
	var obj = document.getElementById("result");
	if (obj.hasChildNodes()) {
		obj.removeChild(obj.childNodes[0]);
	}
	text = xmlHttp.responseText;
	var obj_text = document.createTextNode(text);
	obj.appendChild(obj_text);
}
function refresh() {
	var options = document.getElementById("s_c");
	var option = "";
	for ( var i = 0; i < options.length; i++) {
		option = options[i];
		if (option.selected) {
			option.selected = false;
		}
	}
}
function randSelect(start, end, num) {
	var options = document.getElementById("s_c");
	var arr = new Array();
	if (start >= 0 && end >= start) {
		for ( var i = start, j = 0; i <= end; i++, j++) {
			arr[j] = i;
			if (options.selectedIndex >= 0) {
				options[i].selected = false;
			}
		}
	}
	if (num > arr.length || num < 0) {
		return false;
	} else {
		for ( var k = 0; k < num; k++) {
			var indexN = Math.floor(Math.random() * arr.length);
			for ( var i = 0; i < arr.length; i++) {
				if (i == indexN) {
					options[i].selected = true;
				}
			}
		}
	}
	// var options = document.getElementById("s_c");
	// randnum=Math.floor(Math.random()*10+1);
	// options[randnum].selected=true;
}

ajax_xml.php


<?php
header("Content-Type:text/html; charset=UTF-8");
$fp=fopen("php://input", "r+");
$data="";
while (!feof($fp)) {
	$data.=fread($fp, 4096);
}
fclose($fp);
$doc=new DOMDocument();
$doc->loadXML($data);
$root=$doc->getElementsByTagName("members");
$root=$root->item(0);
$userid=$root->getElementsByTagName("member");
foreach ($userid as $rootdata) {
	echo $rootdata->nodeValue;
	echo " ";
}