孙不服的博客

AJax

2018/06/03 web

一、AJax定义

  • AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
  • AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
  • AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

AJax的优点

  1. 页面无刷新
  2. 不打断用户的操作，用户的体验好。
  3. 按需获取数据，浏览器与服务器之间数据的传输量减少。
  4. 是一个标准技术，不需要下载任何的插件。
  5. 利用客户端(浏览器)的计算能力。

二、AJax使用

2.1 AJax对象

所有现代浏览器均内建 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。例如：IE7+、Firefox、Chrome、Safari 以及 Opera。

2.1.1 创建对象

var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

2.2 发送数据

AJax对象提供了opean()和send()两个方法，具体差别如下表：

方法 描述
open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。(1) method：请求的类型；GET 或 POST; (2) url：文件在服务器上的位置; (3) async：true（异步）或 false（同步）。
send(string) 将请求发送到服务器。string：仅用于 POST 请求

2.2.1 get和post

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

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

GET请求：

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();
//在上面的例子中，您可能得到的是缓存的结果。
//为了避免这种情况，请向 URL 添加一个唯一的 ID：
xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();
//如果您希望通过 GET 方法发送信息，请向 URL 添加信息：
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

POST请求：

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();
//如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

2.3 获取响应

可以通过XMLHttpRequest 对象的 responseText 或 responseXML属性。

属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

2.3.1 responseText 属性

一般情况下使用 responseText 属性。

window.alert(xmlhttp.responseText);

2.3.2 responseXML 属性

处理返回值为XML的情况。

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  }
document.getElementById("myDiv").innerHTML=txt;

2.4 监听事件

通过onreadystatechange 事件监听readyState,readyState 属性存有 XMLHttpRequest 的状态信息。 下面是 XMLHttpRequest 对象的三个重要的属性：

属性 描述
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。readyState `有5个值：0: 请求未初始化;1: 服务器连接已建立;2: 请求已接收;3: 请求处理中;4: 请求已完成，且响应已就绪
status 200: “OK”,404: 未找到页面

当 readyState 等于 4 且状态为 200 时，表示响应已就绪

xmlhttp.onreadystatechange = function() {
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
		document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
	}
}

三、jQuery实现AJax

jQuery中封装了一些AJax的实现，其中有以下种方法：

方法 描述
load(url,[data],[callback]) 载入远程HTML文件代码并插入至DOM中，默认使用GET方式，传递参数时自动转换为POST方式
jQuery.get(url, [data], [callback]) 使用GET方式从服务器端获取数据
jQuery.post(url, [data], [callback]) 使用POST方式来进行异步请求
jQuery.getScript(url,[callback]) 通过 GET 方式请求载入并执行一个JavaScript文件
jQuery.getJSON(url,[data],[callback]) 通过GET方式获取json格式的数据
jQuery.ajax() 使用AJax获取数据如下例： 
$.ajax({
	url: "demo.action", //请求的url地址
	dataType: "json", //返回格式为json
	async: true, //请求是否异步，默认为异步，这也是ajax重要特性
	data: {
		"id": "value"
	}, //参数值
	type: "GET", //请求方式
	beforeSend: function() {
		//请求前的处理
	},
	success: function(req) {
		//请求成功时处理
	},
	complete: function() {
		//请求完成的处理
	},
	error: function() {
		//请求出错处理
	}
});

但一般经常使用$.get()和$.post()方法：

//POST
$.post("demo.action", {
	uname: uname
}, function(result) {
	alert(result);
});
//GET
$.get("demo.action", {
	uname: uname
}, function(result) {
	alert(result);
});

参考： w3school， jQuery学习之jQuery Ajax用法详解

Search

    Table of Contents