Ajax实现步骤和原理

什么是Ajax?

Ajax = 异步 JavaScript 和XML。

Ajax是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载

整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 Ajax）如果需要更新内容，必需重载整个网页面。

AJAX（Asynchronous JavaScript and XML）其实是多种技术的综合，包括 Javascript, XHTML和
CSS DOM XML 和 XSTL XMLHttpRequest。
使用 DOM 实现动态显示和交互，使用 XML和 XSTL进行数据交换与处理，使用 XMLHttpRequest 对象进行异步数据读 Javascript 绑定和处理所有数据

（注意：Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。）

XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。

现在的绝对多数浏览器都增加了对XmlHttp的支持，IE中使用ActiveXObject方式创建XmlHttp对象，其他浏览器如：Firefox、Opera等通过window.XMLHttpRequest来创建XmlHttp对象。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var xmlHttp;
	function createXmlHttp(){
		if(window.ActiveXobject){
			xmlHttp = new ActiveXobject("Microsoft.xmlHttp");
		}else if(window.XMLHttpRequest){
			xmlHttp = new XMLHttpRequest();
			
		}
		alert(xmlHttp);
	}
	
</script>


</head>
<body onload="createXmlHttp()">
	
</body>
</html>

XmlHttp属性
属性 : 属性描述
onreadystatechange : 指定当readyState属性改变时的事件处理句柄
readyState :返回当前请求的状态
responseText :将响应信息作为字符串返回
responseXML :将响应信息格式化为Xml Document对象并返回
status :返回当前请求的http状态码

readyState的状态值
未初始化 ====0
正在加载 ====1
已加载 ====2
交互中 ====3
完成 ====4

XmlHttp方法
open() 创建一个新的http请求，并指定此请求的方法、URL以及验证信息（用户名/密码）
send() 发送请求到Http服务器并接收响应

open()的第一个参数是HTTP请求方式——get, post 或任何服务器所支持的你想调用的方式，
第二个参数是请求页面的URL，
第三个参数设置请求是否为异步模式，true（异步）或 false（同步）

xmlhttp.status：响应状态码
· 200: “OK”
· 304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。
· 403 （禁止）服务器拒绝请求。
· 404 （未找到）服务器找不到请求的网页。
· 408 （请求超时）服务器等候请求时发生超时。
·500 （服务器内部错误）服务器遇到错误，无法完成请求。

ajax的使用及实现步骤

(1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.

get请求：

function startDoGet(){
		createXmlHttp();
		var username = document.getElementById("username").value;
		var url = "RegisterServlet?username="+username;
		
		xmlHttp.open("get",url,true);
		xmlHttp.onreadystatechange=callBack;
		xmlHttp.send();

	}

注意：希望通过 GET 方法发送信息，请向 URL 添加信息：

var url = "RegisterServlet?username="+username;

（1）创建请求字符串，

var username = document.getElementById("username").value;
var url = "RegisterServlet?username="+username;

（2）创建XMLHTTPRequest对象，

var xmlHttp=new XMLHttpRequest();

（3）初始化XMLHttpRequest，

xmlHttp.open("get",url,true);

（4）设置回调函数，

xmlHttp.onreadystatechange=回调函数名;
例如：
xmlHttp.onreadystatechange=callBack;

在回调函数中使用xmlHtttp的responseText获得返回的文本信息。
（5）发送请求，

xmlHttp.send();

GET请求具有以下的几个特点：
· GET 请求可被缓存
· GET 请求保留在浏览器历史记录中
· GET 请求可被收藏为书签
· GET 请求不应在处理敏感数据时使用
· GET 请求有长度限制
· GET 请求只应当用于取回数据

post请求：

function startDoPost(){
		createXmlHttp();
		var username = document.getElementById("username").value;
		var url = "RegisterServlet";
		
		xmlHttp.open("post",url,true);
		xmlHttp.onreadystatechange=callBack;
		xmlHttp.setRequestHeader("Content-Type","");
		xmlHttp.send("username"+username);
	}

POST请求的特点如下：
· POST 请求不会被缓存
· POST 请求不会保留在浏览器历史记录中
· POST 请求不能被收藏为书签
· POST 请求对数据长度没有要求

GardeniaMinwentel

发布了81 篇原创文章 · 获赞 25 · 访问量 3万+

私信关注