简略ajax应用，个人参考笔记-AJAX教程-爱易网页

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

日期：2014-05-16　浏览次数：20698 次

简单ajax应用，个人参考笔记
案例一：
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 +

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>