学习笔记——关于Ajax

小鱼儿 2022-03-18 20:36 187阅读 0赞

Ajax的含义：  
Ajax允许客户端JavaScript向服务器请求和接收数据，而无需刷新新Web页面。这种技术允许开发人员创建  
不中断的应用程序，用新数据重载页面的某些部分。  
最流行的Ajax技术合并了所有主流浏览器都有的JavaScript对象XMLHttpRequest  
XMLHttpRequest对象与浏览器支持的其他Web标准没有区别，浏览器对该对象的支持可以分为两类：  
ActiveX（用于IE5与IE6）和内置支持（用于其他浏览器）。  
这两类浏览器仅在创建XMLHttpRequest对象时有区别，创建后其余代码可以通用  
  
创建XMLHttpRequest：

使用XMLHttpRequest对象：

//同步请求代码
    		var oHttp=createXmlHttpRequest();
    		oHttp.open("GET","http://localhost/myTextFile.txt",false);
    		oHttp.send(null);
    		if(oHttp.status==200)
    			alert(oHttp.responseText);
    		else
    			alert("failed");
    		/*
    			尽管XMLHttpRequest对象名称中包含了XML，但是他也可以用于获取其他类型的数据。
    			XMLHttpRequest对象中的responseXML属性用来将接收到的数据加载到XML DOM对象中，
    			responseText返回纯文本。
    			open初始化XMLHttpRequest对象，该方法接收三个参数，第一个参数requestType是一个表示请求
    			类型的字符串，其值可以是GET或者POST。第二个参数是作为请求发送目标的URL。第三个参数是
    			true或者false，分别表示请求以异步或者同步模式发出。
    			注意：以同步模式发出的请求会暂停所有JavaScript代码的执行，知道从服务器获得响应为止。
    			实际应用程序首选异步模式
    			send方法发送请求。该方法接收一个参数，它是一个字符串，包含随请求一起发送的请求体。GET
    			请求不包含任何信息，所以把null传送为参数
    			每个XMLHttpRequest对象都有status属性，该属性包含了与服务器的响应一起发送的HTTP状态码
    			服务器返回200表示请求成功，返回404表示找不到请求的文件
    		*/
    		//异步请求代码
    		var oHttp=createXmlHttpRequest();
    		function oHttp_readyStateChange()
    		{
    			if(oHttp.readyState==4)
    			{
    				if(oHttp.status==200)
    					alert(oHttp.responseText);
    				else
    					alert("failed");
    			}
    		}
    		oHttp.open("GET","http://localhost/myTextFile.txt",true);
    		oHttp.onreadystatechange=oHttp_readyStateChange;
    		oHttp.send(null);
    		/*
    			上面是异步请求的代码，异步请求必须处理readystatechange事件。XMLHttpRequest对象提供了
    			readyState属性，该属性包含一个数值，每个值都代表请求生存期中的特定状态
    					0——已创建对象，但未调用open
    					1——已调用open，但未发送
    					2——请求已发送，标题和状态已接收到，并可用
    					3——接收来自服务器的响应
    					4——接受完请求的数据
    			在使用时，我们一班只关注它是否为4即可
    			另外，要注意，即使请求成功，也可能得不到需要的信息，在请求的服务器端可能发生了错误，因此还需要检查请求的状态码
    		*/

使用Ajax验证表单字段示例：

不需要刷新页面即可进行内容的提交，验证数据的存在性。

从实例代码中领略Ajax的魅力！

<html>
    	<head>
    		<title>Form Field Validation</title>
    		<style type="text/css">
    			.fieldname
    			{
    				text-align:right;
    			}
    			.submit
    			{
    				text-align:right;
    			}
    		</style>
    		<script type="text/javascript" src="httprequest.js"></script>
    		<script type="text/javascript">
    			function checkUsername()
    			{
    				var userValue=document.getElementById("username").value;
    				if(userValue=="")
    				{
    					alert("Please enter a user name to check");
    					return;
    				}
    				var url="formvalidator.php?username="+userValue;
    				var request=new HttpRequest(url,checkUsername_callback);
    				request.send();
    			}
    			function checkUsername_callBack(sResponseText)
    			{
    				var userValue=document.getElementById("username").value;
    				if(sResponseText=="available")
    					alert("The username "+userValue+" is available");
    				else
    					alert("We are sorry,but "+userValue+" is not available");
    			}
    			function checkEmail()
    			{
    				var emailValue=document.getElementById("email").value;
    				if(emailValue=="")
    				{
    					alert("Please enter an email to check");
    					return;
    				}
    				var url="formvalidator.php?email="+emailValue;
    				var request=new HttpRequest(url,checkEmail_callback);
    				request.send();
    			}
    			function checkEmail_callBack(sResponseText)
    			{
    				var emailValue=document.getElementById("email").value;
    				if(sResponseText=="available")
    					alert("The email "+emailValue+" is available");
    				else
    					alert("We are sorry,but "+emailValue+" is not available");
    			}
    		</script>
    	</head>
    	<body>
    		<form>
    			<table>
    				<tr>
    					<td class="filename">
    						Username:
    					</td>
    					<td>
    						<input type="text" id="username"/>
    					</td>
    					<td>
    						<a href="javascript:checkUsername()">Check Available</a>
    					</td>
    				</tr>
    				<tr>
    					<td class="fieldname">
    						Email:
    					</td>
    					<td>
    						<input type="text" id="email"/>
    					</td>
    					<td>
    						<a href="javascript:checkEmail()">Check Available</a>
    					</td>
    				</tr>
    				<tr>
    					<td class="fieldname">
    						Password:
    					</td>
    					<td>
    						<input type="text" id="password"/>
    					</td>
    					<td />
    				</tr>
    				<tr>
    					<td class="fieldname">
    						Verify Password:
    					</td>
    					<td>
    						<input type="text" id="password2"/>
    					</td>
    					<td />
    				</tr>
    				<tr>
    					<td colspan="2" class="submit">
    						<input type="submit" value="Submit"/>
    					</td>
    					<td />
    				</tr>
    			</table>
    		</form>
    	</body>
    	</html>

学习笔记——关于Ajax

发表评论取消回复

还没有评论，来说两句吧...

相关阅读