ajax01

AJAX

1.什么是AJAX (阿贾克斯)
	Asynchronous Javascript And Xml
	异步的       JS         和  Xml (JSON)

	异步访问:
		当客户端向服务器端发送请求时，服务器在处理的过程中，客户端无需等待，可以做其他操作

	AJAX的优点:
		1.异步 的 访问方式
		2.局部 的 刷新方式
	
	使用场合:
		1.搜索建议
		2.表单验证
		3.前后端完全分离
			SPA -> Single Page Application
2.AJAX核心对象-异步对象(XMLHttpRequest)
	1.什么XMLHttpRequest
		简称为 "xhr"
		称为 "异步对象",代替浏览器向服务器发送异步的请求并接受响应
	2.创建异步对象
		xhr的创建是由js来提供的
		主流的异步对象是XMLHttpRequest类型的，并且主流浏览器都支持(IE7+,Chrome,Firefox,Safari,Opera)

		支持XMLHttpRequest:
			通过 new XMLHttpRequest()

		不支持XMLHttpRequet:
			通过new ActiveXObject("Microsoft.XMLHTTP")

		判断浏览器的支持性:
			if(window.XMLHttpRequest){
				则说明浏览器支持 XMLHttpRequest
			}else{
				则说明浏览器支持 ActiveXObject("...")
			}
		
		练习1:创建异步对象并输出
			1.创建一个Django程序 - AjaxDemo01
			2.创建一个应用 - ajax
			3.创建路由/视图
			4.在网页/模板中创建一个JS函数 - createXhr
			5.在函数中，创建异步对象并返回(或输出)
				浏览器到底支持XMLHttpRequest还是ActiveXObject
3.XHR的成员
	1.方法 - open()
		作用:创建请求
		语法:xhr.open(method,url,async);
			method:请求方式,取值 'get' 或 'post'
			url:请求地址,取值 字符串
			async:是否采用异步的方式发送请求
				true:异步的
				false:同步的
			示例:使用get方式向02-server的地址发送异步请求
				xhr.open('get','/02-server',true);
	2.属性 - readyState
		作用:表示请求状态，通过不同的请求状态值来表示xhr与服务器的交互情况
			由0-4共5个值来表示5个不同的状态
			0:请求尚未初始化
			1:已经与服务器建立连接
			2:服务器端已经接收请求信息
			3:服务器端处理中...
			4:响应完成
	3.属性 - status
		作用:表示服务器端的响应状态码
			200 : 服务器端正确处理请求并给出响应
			404 : Not Found
			500 : Internal Server Error

		示例:
			if(xhr.readyState==4 && xhr.status==200){
				//可以接收服务器端的响应信息
			}
	4.属性 - responseText
		作用:表示服务器端响应回来的数据
		示例:
			if(xhr.readyState==4 && xhr.status==200){
				//可以接收服务器端的响应信息
				console.log(xhr.responseText);
			}
	5.事件 - onreadystatechange
		作用:每当xhr的readyState值发生改变时要触发的操作 - 回调函数
		示例:
			xhr.onreadystatechange = function(){
					if(xhr.readyState==4 && xhr.status==200){
					//可以接收服务器端的响应信息
					console.log(xhr.responseText);
				}
			}
	6.方法 - send()
		作用:通知xhr向服务器端开始发送请求
		语法:xhr.send(body);
			body:请求主体
			get请求:body的值为null
				xhr.send(null);
			post请求:body的置为 具体的请求数据
				xhr.send("请求数据");
4.AJAX的操作步骤
	1.GET请求
		1.创建 xhr
		2.创建请求 - open()
		3.设置回调函数 - onreadystatechange
			1.判断状态 
			2.接收响应
			3.业务处理
		4.发送请求 - send(null)

注：
使用导入包快捷键：鼠标放在对象上，Alt+回车键快速导入