`

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

ajaxphp笔记应用案例 
阅读更多
案例一：
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 " ";
}

0
顶
1
踩
分享到：
| php给图片添加水印
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ajax的学习笔记

    本笔记参考了W3C的教程，如果你希望深入学习，可以访问W3School或MDN Web文档等权威网站，了解更多关于Ajax的知识。 总结：Ajax是现代Web开发中的重要技术，通过它，开发者能构建出更加高效、互动的网页应用。理解...

    Ajax的学习笔记

    本压缩包中的"AJAX学习笔记.doc"文档，可能包含了Ajax的基础概念、使用示例及进阶技巧，适合初学者参考学习。同时，推荐以下在线资源： - [MDN Web文档](https://developer.mozilla.org/zh-CN/docs/AJAX)：详尽的...

    尚硅谷_教学课件_Ajax

    学习过程中，可以通过编写简单的Ajax示例来加深理解，如实现无刷新的搜索功能或动态加载图片。同时，还可以参考jQuery、axios、fetch等库来简化Ajax的使用，提升开发效率。 总结来说，Ajax是现代Web开发中的重要...

    ZK-AJAX学习笔记

    从给定的文件信息来看，这是一份详细的ZK-AJAX学习笔记，记录了从准备环境、下载运行ZK到深入学习各个组件的过程。ZK是一款基于Ajax的开源Web应用框架，它允许开发者使用类似桌面应用的组件来构建Web应用，而无需...

    ajax学习参考文件

    2. **Ajax 课堂笔记** - 这份笔记可能包含更具体的实践细节和示例代码，帮助你理解和运用Ajax。笔记可能涉及： - **创建XMLHttpRequest对象**：不同浏览器对XMLHttpRequest的实现可能有所不同，需要进行兼容性处理...

    简洁的ajax笔记本书写效果

    如果你对前端开发感兴趣，尤其是想了解如何使用AJAX创建动态应用，或者如何通过CSS3和JavaScript创建独特的用户交互，这个压缩包将是一个很好的学习资源。在研究其源代码时，可以深入理解AJAX如何异步通信，CSS3如何...

    韩顺平笔记.zip

    笔记可能涵盖了DOM操作、事件处理、Ajax、jQuery库、ES6新特性、React、Vue等前端框架的应用。熟悉JavaScript可以让你构建交互性强、用户体验良好的网页应用。 3. **Linux**: Linux是一种开源操作系统，其内核被...

    js日历笔记应用功能代码.zip

    【标题】"js日历笔记应用功能代码.zip" 涉及的知识点主要集中在JavaScript、jQuery、CSS这三方面，具体来说，这是一个实现日历功能并结合笔记应用的项目。以下将详细介绍这些技术及其在该项目中的应用： 1. **...

    javascript学习笔记讲解版参考.pdf

    JavaScript学习笔记讲解版参考.pdf是一份详尽的教程，涵盖了从基础到进阶的JavaScript知识。这份笔记首先从CSS样式表开始，引导读者理解网页样式的设置与应用。 1. CSS（Cascading Style Sheets）样式表是用于控制...

    个人笔记 C# MSSQLSever DHTML

    【个人笔记 C# MSSQLSever DHTML】是一份涵盖了多个IT领域基础知识的个人学习笔记，旨在帮助初学者系统地复习和巩固C#编程、Microsoft SQL Server数据库管理和DHTML等前端技术。以下是对这些知识点的详细说明： 1. ...

    韩顺平jquery学习笔记及练习

    这份资料包含了笔记和实践题目，对于初学者和有一定基础的开发者来说，都是极好的参考资料。 首先，我们来看看"韩顺平AJAX和jQuery笔记整理.doc"。AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的...

    8.ajax.rar

    4. **AJAX 应用场景**：可能有实际的案例分析，展示了 AJAX 如何应用于动态加载内容、表单提交、实时聊天应用等场景。 5. **AJAX 的优缺点**：讨论 AJAX 的优点，如提高用户体验，减少服务器负载，以及可能带来的...

    javascript 笔记 适合初学者 jquery chm 资料

    JavaScript是一种广泛应用于网页和网络应用的脚本语言，它主要负责网页的动态交互，使得用户在与网页交互时...在遇到问题时，可以参考笔记或搜索相关资料，不断迭代和改进代码，逐步成为一名熟练的JavaScript开发者。

    Ajax版本的工作搜索引擎.rar

    在Ajax应用中，XSLT可能被用来在客户端动态地转换XML数据，以便更好地展示在网页上。 `[XML]XMLHTTP 乱码 的解决方法-编程-冷酷空间 - 陈正伟 - blog_czw_name.mht`文件可能讲述了在使用XMLHTTP（现在通常称为...

    云笔记cloudnote

    《云笔记cloudnote：探索云端记录的奥秘》 在当今信息爆炸的时代，高效管理和整理个人知识变得至关重要。...无论是对于开发者学习参考，还是普通用户了解云笔记的工作原理，"cloudnote"都是一个宝贵的资源。

    h5前端学习笔记

    "学习笔记"则提示我们，资料可能以教程、案例分析或问题解答的形式存在，适合初学者和有一定经验的开发者参考。 【压缩包子文件的文件名称列表】中的每个文件名都对应一个具体的知识点： 1. **css 代码片段库**：...

    韩顺平老师最全读书笔记

    笔记可能涵盖JavaScript基础语法、DOM操作、AJAX、事件处理、闭包以及现代JavaScript特性（如ES6及以上版本的新特性）。 这个压缩包文件“韩顺平笔记”集成了这些关键知识点，无论是对于初学者还是经验丰富的开发者...

    EXT_JS实用开发指南_个人整理笔记.rar

    这份“EXT_JS实用开发指南_个人整理笔记”可能是开发者在深入学习EXT_JS时的宝贵参考资料，涵盖了EXT_JS的主要概念、组件使用、事件处理以及实际项目中的实践经验。 在EXT_JS开发中，首先要理解其基本架构和组件...

    Dojo简单笔记和权威学习去处

    Dojo 是一个强大的JavaScript工具库，它为Web开发提供了丰富的功能和组件，涵盖了从DOM操作、事件处理到AJAX通信等多个方面。这个压缩包包含了学习Dojo的重要资源，包括个人笔记、官方文档以及权威的学习平台链接。 ...

    web开发笔记

    在IT行业中，Web开发是一项至关重要的技能，涵盖了前端与后端技术，以及它们之间的交互。"web开发笔记"这个标题暗示了这是一个关于Web开发...对于想要在后台开发领域深化学习的人来说，这些笔记无疑是宝贵的参考资料。

Magicbox
Global site tag (gtag.js) - Google Analytics