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 getpost

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 对象的 responseTextresponseXML属性。

属性 描述
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);
});

参考: w3schooljQuery学习之jQuery Ajax用法详解

Search

    Table of Contents