AJAX的作用与编写

AJAX的作用与编写

一、AJAX是什么

AJAX = Asynchronous JavaScript and XML（异步的JavaScript和XML）。

AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量的数据交换，使网页实现异步更新。（不用加载整个网页就能实现部分更新）

二、传统更新方式与AJAX的区别

传统的开发模式：用户的每一次操作都触发一次返回服务器的HTTP请求，服务器做出处理后，返回一个html页面给用户。

传统更新方式如下：

ajax开发模式：页面将用户的操作通过ajax引擎与服务器进行通信，将返回的结果给ajax引擎，然后ajax将数据插入指定位置。

AJAX的方法：

三、AJAX的编写

1创建ajax对象

1.1、XMLHttpRequest对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

1.2、创建 XMLHttpRequest 对象
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

oAjax=new XMLHttpRequest();

1.3、老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

</pre><pre name="code" class="html" style="font-size: 1.2rem;"><span style="font-weight: normal;">oAjax = new ActiveXObject('Microsoft.XMLHTTP');</span>

1.4、为了使各个浏览器都能兼容（IE5和IE6）,所以要进行兼容性处理（采用if的方法）

<span style="font-size:18px;font-weight: normal;">if(window.XMLHttpRequest) {
		var oAjax = new XMLHttpRequest();
	} else {
		var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
	}</span>

2、连接服务器

2.1、get与post的区别：

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用（传输数据不能太大）。
然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠(安全性能更高)

2.2、open方法：

规定请求的类型、URL 以及是否异步处理请求。

open(method,url,async)

method：请求的类型；GET 或 POST
url：文件在服务器上的位置

async：true（异步）或 false（同步）

3、发送请求

 

send方法：  

     

将请求发送到服务器。

send(string)

string：仅用于 POST 请求

通过上面的了解，我们就用get方法来获取数据和发送请求：

//2.连接服务器
	//open(方法，文件名，异步传输)
	oAjax.open('GET', aa.txt, true);
	//3.发送请求
	oAjax.send();

4、接收返回值

请求状态监控
onreadystatechange事件（请求成功则执行该函数）

readyState属性：请求状态
0    （未初始化）还没有调用open()方法
1    （载入）已调用send()方法，正在发送请求
2    （载入完成）send()方法完成，已收到全部响应内容
3    （解析）正在解析响应内容
4    （完成）响应内容解析完成，可以在客户端调用了

*如果readyState==4时则数据读取成功*

status属性：请求结果（等于200就是成功的）

oAjax.onreadystatechange = function() {
		//oAjax.readyState  浏览器和服务器，进行到哪一步了
		if(oAjax.readyState == 4) //读取完成
		{
			if(oAjax.status == 200) //成功
			{
				funone(oAjax.responseText);
			} else {
				funtwo(oAjax.status);
			}
		}

整体函数总写为：

//1.创建Ajax对象
function ajax(url,funone,funtwo) {

	if(window.XMLHttpRequest) {
		var oAjax = new XMLHttpRequest();
	} else {
		var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
	}
	//2.连接服务器
	//open(方法，文件名，异步传输)
	oAjax.open('GET', url, true);
	//3.发送请求
	oAjax.send();
	//4.接受请求
	oAjax.onreadystatechange = function() {
		//oAjax.readyState  浏览器和服务器，进行到哪一步了
		if(oAjax.readyState == 4) //读取完成
		{
			if(oAjax.status == 200) //成功
			{
				funone(oAjax.responseText);
			} else {
				funtwo(oAjax.status);
			}
		}

	};
}