您的位置：首页 > Web前端 > JavaScript

Ajax-Js实现

2015-09-21 11:51 549 查看
虽然现在较多使用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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航