学习笔记——关于Ajax

最新推荐文章于 2022-11-12 14:06:16 发布

celte

最新推荐文章于 2022-11-12 14:06:16 发布

阅读量725

点赞数

分类专栏： JavaScript 文章标签： JavaScript Ajax

本文链接：https://blog.csdn.net/celte/article/details/8744574

版权

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

创建XMLHttpRequest：

                function createXmlHttpRequest()
		{
			if(window.XMLHttpRequest)//通过检查是否存在来判断是否不是IE5、6
			{
				var oHttp=new XMLHttpRequest();
				return oHttp;
			}
			else if(window.ActiveXObject)//是IE5、6，则使用ActiveX方式创建
			{
				var versions=
				[
					"MSXML2.XmlHttp.6.0",
					"MSXML2.XmlHttp.3.0"
				]
				for(var i=0;i<versions.length;i++)
				{
					try
					{
						var oHttp=new ActiveXObject(versions[i]);
						return oHttp;
					}
					catch(error)
					{
					}
				}
			}
			return null;
		}

使用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>