Ajax-Js实现

虽然现在较多使用jQuery实现的Ajax，但js实现的ajax我们仍然需要了解；

XMLHttpRequest：
XMLHttpRequest 最早是在IE5中以ActiveX组件的形式实现的。非 W3C 标准.
利用XMLHttpRequest 实例与服务器进行通信包含以下3个关键部分：
onreadystatechange 事件处理函数
open 方法open(method,url,asynch)
send 方法 send(data)：
onreadystatechange:
该事件处理函数由服务器触发，而不是用户
在 Ajax 执行过程中，服务器会通知客户端当前的通信状态。这依靠更新 XMLHttpRequest 对象的 readyState 来实现。改变 readyState 属性是服务器对客户端连接操作的一种方式。
每次 readyState 属性的改变都会触发 readystatechange 事件
发送请求：
setRequestHeader(header,value)
当浏览器向服务器请求页面时，它会伴随这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据(Metadata)。首部信息用来声明一个请求是 GET 还是 POST。
Ajax 请求中，发送首部信息的工作可以由 setRequestHeader该完成
参数header：首部的名字; 参数value：首部的值。
如果用 POST 请求向服务器发送数据，需要将 “Content-type” 的首部设置为 “application/x-www-form-urlencoded”.它会告知服务器正在发送数据，并且数据已经符合URL编码了。
该方法必须在open()之后才能调用
完整的 Ajax 的 POST 请求示例：
接收响应：
readyState
readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
0 代表未初始化。还没有调用 open 方法
1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
2 代表已加载完毕。send 已被调用。请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕
每次 readyState 值的改变，都会触发 readystatechange 事件。如果把 onreadystatechange 事件处理函数赋给一个函数，那么每次 readyState 值的改变都会引发该函数的执行。
readyState 值的变化会因浏览器的不同而有所差异。但是，当请求结束的时候，每个浏览器都会把 readyState 的值统一设为 4
响应数据格式：xml json html

案例一：使用ajax技术发送get请求，并返回三种不同格式的数据：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="scripts/jquery-1.7.2.js" ></script>
<script type="text/javascript">

	$(function()
			{
				$("a").click(function()
						{
							var request = new XMLHttpRequest();
							var method = "GET";
							//获取url 分别指向三个不同的数据文件
							var url = this.href;
							request.open(method,url);
							request.send(null);
							
							var $content = $(this).text();
							
							//html数据响应
							if($content=="Andy")
							{
								request.onreadystatechange = function()
								{
									if(request.readyState==4)
									{
										if(request.status==200 || request.status==304)
										{
											$("#details")[0].innerHTML=request.responseText;
										}
									}
								}
								
							}
							
							//xml数据响应
							if($content=="Richard")
							{
								request.onreadystatechange = function()
								{
									if(request.readyState==4)
									{
										if(request.status==200 || request.status==304)
										{
											var result = request.responseXML;
											var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
											var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;
											var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;
											alert(name);
											alert(website);
											alert(email);
										}
									}
								}
							}
							//json数据响应
							if($content=="Jeremy")
							{
								request.onreadystatechange = function()
								{
									if(request.readyState==4)
									{
										if(request.status==200 || request.status==304)
										{
											var result = request.responseText;
											var object = eval("("+result+")");
											var name = object.person.name;
											var age = object.person.age;
											var email = object.person.email;
											
											alert(name);
											alert(age);
											alert(email);
										}
									}
								}
							}
							
							return false;
						});
			});

</script>

</head>
<body>
	<h1>People</h1>
	<ul>
		<li><a href="files/andy.html">Andy</a></li>
		<li><a href="files/richard.xml">Richard</a></li>
		<li><a href="files/jeremy.json">Jeremy</a></li>
	</ul>	
	<div id="details"></div>
</body>
</html>

三个数据内容如下：

html:<h2><a href="mailto:andy@clearlet.com">Andy Budd</a></h2>
<a href="http://andybudd.com/">http//:cuigaochong.com</a>

xml:<?xml version="1.0" encoding="UTF-8"?>
<details>
<name>Cuigaochong</name>
<website>www.baidu.com</website>
<email>cuigaochong@163.com</email>
</details>

json:{"person":
{
"name":"Cui",
"age":12,
"email":"cuigaochong@163.com"
}

案例二：使用ajax技术发送post请求；

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="scripts/jquery-1.7.2.js" ></script>
<script type="text/javascript">
	$(function()
			{
				
				$("a").click(function()
						{
							//创建xmlHttpRequest
							var request = new XMLHttpRequest();
							
							//准备发送请求的数据  :url    增加时间戳可以起到禁用缓存的目的
							var url = this.href+"?time="+new Date();
							var method = "POST";
							//调用xmlHttpRequest对象的open方法
							request.open(method,url);
							request.setRequestHeader("ContentType","application/x-www-form-urlencoded");
							//调用xmlHttpRequest的send方法
							request.send("name='cuigaochong'&age=1");
							//为XMLHttpRequest对象添加onreadystatechange相应事件
							request.onreadystatechange = function()
							{
								
								if(request.readyState == 4)
								{
									if(request.status==200||request.status==304)
									{
										alert(request.responseText);
									}
								}
							}
							
							return false;
						});
				
		
			});

</script>

</head>
<body>

	<a href="helloAjax.txt">Hello Ajax</a>

</body>
</html>

原文链接：https://www.f2er.com/ajax/162890.html

猜你在找的Ajax相关文章