2017年春第二次Seminar

AJAX——异步的 JavaScript 和 XML技术

主讲人:刘力超

一、软件准备

 

  • Sublime text
  • Google Chrome

二、什么是AJAX

【2017年第二次Seminar】AJAX-异步的 JavaScript 和 XML技术-数字人文技术实验室

传统请求方式,用户输入表单并发送,触发完整HTTP请求,服务器返回相应的网页,页面全部刷新。

AJAX 之前的时代

1.地址栏。用户在地址栏输入 http://baidu.com ,按回车,就向 http://baidu.com 发起了一个请求。(同时页面刷新)

2.a 标签。用户点击页面中的 a 链接,也会发起一个请求。(同时页面刷新)

3.img 标签。页面中如果有 img 标签,那么就会发起一个对此图片的请求(页面没有刷新,但是只能请求图片)类似的还有 link 标签、script 标签,都可以对一类文件的请求。

上面列举的请求发起方式,要么会导致页面刷新,要么只能请求特定类型的文件(图片、CSS 或 JS)。

Gmail 这类复杂的网页应用非常需要一个「可以请求任意类型的数据,并获取数据内容」的方案。

当时微软极具创新意识地提供了一个私有接口 ActiveXObject("Microsoft.XMLHTTP"),并在 IE 5.0 中开放给开发者用。

Gmail 的开发者发现这个接口之后如获至宝,并借此完成了第一个著名的 AJAX 应用——Gmail,用户可以在一个页面里完成收发邮件、设置过滤规则等复杂的功能。

后来其他浏览器也跟进了,提供了类似的接口「XMLHttpRequest」,功能类似,最终 W3C 标准也接纳了 XMLHttpRequest。

到了2005年,google率先在它的应用(诸如google地图、gmail)里使用了ajax技术,这才让这项技术正式风靡开来。

【2017年第二次Seminar】AJAX-异步的 JavaScript 和 XML技术-数字人文技术实验室

【2017年第二次Seminar】AJAX-异步的 JavaScript 和 XML技术-数字人文技术实验室

【2017年第二次Seminar】AJAX-异步的 JavaScript 和 XML技术-数字人文技术实验室

 

综上,AJAX即是使用JavaScript发起一个HTTP的请求,并且获取服务器返回的内容,同时页面没有刷新

三、原生Ajax

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
	<button id="ajax-button" onclick="ajaxGet()">点击执行Ajax请求</button>
	
	<script type="text/javascript">
		function ajaxGet(){
			//创建一个XMLHttpRequest对象,利用对象在浏览器内执行AJAX请求
			var request = new XMLHttpRequest();
			//所要请求的url
			var url = "http://www.abc.com/json";
			//开启一个AJAX请求
			request.open("GET", url);
			//发送AJAX请求,并可携带参数
			request.send();
			//请求状态变化过后获取服务器相应的数据
			request.onreadystatechange = function(){
				//readyState==4说明请求已完成
				if(request.readyState == 4 && request.status == 200){
					console.log(request.responseText);
				}
			}
		}
		
	</script>
</body>
</html>

readyState有五种状态:

  • 0 (未初始化): (XMLHttpRequest)对象已经创建,但还没有调用open()方法;
  • 1 (载入):已经调用open() 方法,但尚未发送请求;
  • 2 (载入完成): 请求已经发送完成;
  • 3 (交互):可以接收到部分响应数据;
  • 4 (完成):已经接收到了全部数据,并且连接已经关闭。

关于status,由于它的状态有几十种,我只列出平时常用的几种:

  • 100——客户必须继续发出请求
  • 101——客户要求服务器根据请求转换HTTP协议版本
  • 200——成功
  • 201——提示知道新文件的URL
  • 300——请求的资源可在多处得到
  • 301——删除请求数据
  • 404——没有发现文件、查询或URl
  • 500——服务器产生内部错误

关于GET请求与POST请求:

Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE

1.GET请求的数据会附在URL之后(就是把数据放置在HTTP协议头中),以?分割URL和传输数据,参数之间以&相连,如:login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0%E5%A5%BD。POST把提交的数据则放置在是HTTP包的包体中。

2.“GET方式提交的数据最多只能是1024字节,理论上POST没有限制,可传较大量的数据。

四、jQuery AJAX

1. $.ajax()  方法

【2017年第二次Seminar】AJAX-异步的 JavaScript 和 XML技术-数字人文技术实验室

【2017年第二次Seminar】AJAX-异步的 JavaScript 和 XML技术-数字人文技术实验室

参见http://www.w3school.com.cn/jquery/ajax_ajax.asp

示例:

$(function(){
	var url = "http://www.abc.com/json/image";
	$.ajax({
		type: "GET",
		url : url,
		success : function(result){
        	console.log(result);
		}
	});
})

 

2.$.get()  方法

【2017年第二次Seminar】AJAX-异步的 JavaScript 和 XML技术-数字人文技术实验室

示例:

$(function(){
	var url = "http://www.123.com/json/image";
	$.get(url).done(function(data){console.log(data)});
})

 

3.$.post()  方法

【2017年第二次Seminar】AJAX-异步的 JavaScript 和 XML技术-数字人文技术实验室

示例:

$(function(){
	var url = "login.php"
	$.post(
		url,
		{
			"username":"liulichao",
			"password":"idontknow"
		},
		function(data){
			console.log(data);
		}
	)
})

 

五、参考文献

http://www.w3school.com.cn

https://zhuanlan.zhihu.com/p/24973714

https://zhuanlan.zhihu.com/p/22564745