学习内容

* Ajax 简介
	* 使用场景 
	* 好处
* JQuery 的 ajax 请求
	* $.ajax() 的使用
	* get 与 post 请求
	* $.get() 的使用
	* $.post() 的使用
	* FormData 的使用
* 原生 ajax 请求
	* 简单原生 ajax
	* onload 与 onreadystatechange 的区别
	* get 请求
	* post 请求

一、Ajax 简介

① Ajax

AJAX 全称是：Asynchronous JavaScript And Xml。（async：表示异步，sync：表示同步）

• 异步的 JavaScript 和 XML。
• 是一种创建交互网页应用的网页开发技术。并不是一种新技术，而是一种解决方案，早在1998年就开始使用
• 异步表示不阻塞：浏览器在请求数据时，并不会阻塞用户后续的操作。理解为浏览器派了一个小弟去服务器拿数据了。
• XML 表示一种数据格式，最初设计 AJAX 时，从服务器返回的数据是 XML 格式的，后面慢慢被 JSON 数据格式取代了。
• 更具体一点，浏览器通过内置对象 XMLHttpRequest 向服务器发起请求，并可以接受服务器返回给浏览器的数据，这一过程或实现这一过程的技术就是 AJAX。
  

② 典型的使用场景

在不更细页面的情况下（页面有没有更新就检查后退按钮），浏览器要从 web 服务器获取数据，此时就可以使用 ajax 技术。通常在秒杀页面，注册表单等经常使用。

③ AJAX 技术的好处：

• 局部更新，提升用户体验，提升性能。
• 分离开发，提高开发效率。在项目实际开发过程中，ajax是一个必不可少的技术，是前后端分离开发的基础。
  • 后端提供写好的业务逻辑接口，可以理解为一个函数，它内部进行一些列操作处理。
  • 前端直接拿到接口文档，直接调用接口获取数据，然后把数据转化成的图文并茂的页面。

二、使用 JQuery 的 AJAX

• 使用基本流程
  • 准备工作：确保服务器端口已经就绪，各接口工作正常。
  • 新建页面，引入 JQuery 文件
  • 参考 API 文档中 $.ajax 格式，发送请求。
• $.ajax() 的基本格式

$.ajax(
	url,
	{
		type: 'get', // post
		data: {id:1},
		success: function (result) {
			console.log(result);
		}
	}
)
// url：表示请求的地址，可以省略域名。
// type：表示请求的类型，常见取值 get，post。如果不写，默认为 'get'
// data：表示发送请求时附加的参数，如果没事参数，可省略
// success：它是一个回调函数，当请求成功之后会自动调用这个函数，它的第一个参数是服务器端返回的数据。

• 回调函数（CallBack Functions）
  • 作用：用于对特定的事件或条件进行响应。
  • 两层含义：
    • 函数。表示他是一个函数，是可以被执行的，能做具体操作的函数。
    • 回调。在某个时刻，或者某个事件发生'自动去调用这个函数'。

① get 与 post 请求

• 不同点：
  • get：获取，得到。这种方式请求用于向服务器请求资源（图片，文件，数据...）。它是最常见的请求方式。它的重点在于，它只是请求，而不会改变服务器上的资源。
  • post：派送，投递。这种方式的请求用于向服务器上提交数据，它的重点在于，它可能会修改服务器上的资源。
• 相同点
  • get 和 post 请求都可以在发送请求时附带一些数据。例如：根据用户名去检查这个用户是否被占用；在论坛上中注册一个账号。
  • get 和 post 请求都能够从服务器上获取返回的数据。
• 实操对比
  • get 传数据直接显示在 url 中
    query string parameters 查询字符串参数
  • post 传递数据更安全
    form Data表单（形式）数据
• 常用场景
  • 查看商品详情（get）
  • 把一件商品放入购物车（post）
  • 修改登录密码（post）
  • 发表一个帖子（post）
  • 删除一个用户（post）

② $.get() 的使用

• 语法：

$.get(
	url,
	data, // key/value 参数
	callback, // 载入成功的回调函数
	type // 返回内容格式，xml，html，script，json，text，_default
)

• 代码示例：
  • 请求接口，忽略返回值：

  	$.get('http://localhost:3001/test');
  

  • 请求接口，传送两个参数，忽略返回值

  	$.get('http://localhost:3001/test',{name:'John',time:'2pm'});
  

  • 显示请求接口的返回值

  	$.get('http://localhost:3001/test',function(data){
  		alert('Data Loaded: ' + data);
  	});
  

  • 显示请求接口的返回结果，并且发送请求参数

  	$.get('http://localhost:3001/test',function(data) {
  		function(data) {
  			alert('Data Loaded: ' + data);
  		}
  	}
  

② $.post() 的使用

• 语法：

$.post(
	url,	// 发送请求地址
	data,	// 待发送 Key/Value 参数
	callback,	// 发送成功时回调函数
	type	// 返回内容格式，xml，html，script，json，text，_default
);

• 代码示例：

  	// 请求接口，忽略返回值
  	$.post('http://localhost:3001/test');
  
  	// 请求接口，并且发送请求参数
  	$.post('http://localhost:3001/test',{name:'mike',time:'2pm'});
  
  	// 请求接口，并且传递数据数组
  	$.post('http://localhost:3001/test',{'choices[]' : ['Jon', 'Susan']});
  
  	// 使用 ajax 请求发送表单数据
  	$.post('http://localhost:3001/test', $('#testform').serialize());
  	// serialize：方法通过序列化表单值，创建 URL 编码文本字符串。您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
  
  	// 输出来自请求接口返回的结果
  	$.post('http://localhost:3001/test', function(data){
  		alert('Data Loaded：' + data);
  	})
  
  	// 向接口发送请求及参数，并输出结果
  	$.post('http://localhost:3001/test',{name:'John',time:'2pm'},function(data){
  		alert('Data Loaded: ' + data);
  	});
  
  	// 获取接口请求，并存储为 XMLHttpResponse 对象，并通过 process() 这个 JavaScript 函数进行处理
  	$.post('http://localhost:3001/test',{name:'John',time:'2pm'},function(data){
  		process(data);
  	},'xml');
  
  	// 获取请求接口返回的 JSON 格式的内容
  	$.post('http://localhost:3001/test',{'func':'getNameAndTime'},function(data) {
  		alert(data.name);
  		console.log(data.time);
  	},'json');
  

③ JQuery FormData 的使用

FormData 是表单元素的集合，当要提交表单内容过多时，可使用 FormData 直接提交表单元素

• 使用步骤
  • 创建FormData实例化对象 var formData = new FormData(表单的DOM对象)
  • 将 formData 当做请求参数传递进去
  • 设置 contentType 与 processData 属性为 false
  • 示例：

  	$.ajax({
  		url:'http://loaclhost:3005/test',
  		data : new FormData($('form')[0]),
  		contentType : false,
  		processData : false,
  		sueecss : function(res) {
  			do something...
  		}
  	})
  

三、使用原生 AJAX

① 原生 AJAX 的简单请求

• XMLHttpRequest 对象
• 使用原生 ajax 步骤
  • new 一个 XMLHttpRequest 实例对象
  • 设置请求信息
  • 设置回调函数，处理请求结果
  • 发送请求
• 示例代码：

// 实例化一个 XMLHttpResponse 对象
var xhr = new XMLHttpResponse();

// 设置请求信息，使用 xhr.open() 建立请求连接 xhr.open('get | post', url);
xhr.open('get','common/getCurrentTime');

// 设置回调函数。返回的数据存放在 xhr.responseText 中，onload 为当请求结束，状态码为4时将回调执行，也可使用 onreadystatechange 状态码改变来执行，其两者区别下面说明
xhr.onload = function() {
	console.info('从服务器返回的数据', xhr.responseText);
};

// 发送请求
xhr.send();

② xhr.onload() 与 xhr.onreadystatechange() 的区别

• 首先明确两个知识点
  • xhr.readyState 状态码
    • 0. 请求未初始化
    • 1. 已建立连接
    • 2. 请求已发送
    • 3. 信息接收中
    • 4. 信息接收完毕
  • HTTP 状态码：
    • 200 - 成功返回网页
    • 404 - 网页不存在
    • 503 - 服务器暂时不可用
• xhr.onload() 当请求码变成 4 时，即信息接收完毕会执行该函数
• xhr.onreadystatechange() 当请求状态码发生变化时会调用，也就是每变化一次将调用一次，另外 xhr.onprogress() 在状态码为 3 时会自动调用一次。所以当服务器正常时，请求过程中状态码从 0~4 的变化，但不一定会正确的得到请求数据，所有还是需要有 http 状态码来判断。
• xhr.onload() 与 xhr.onreadystatechange() 的兼容问题：
  • xhr.onload() 出现在 IE9 及其以后，如果在 IE9 之前得到返回结果就是用 onreadystatechange，当 readyState 为 4 时获取返回信息
  • xhr.onreadystatechange() 有跨浏览器兼容性问题，有时会发现请求失败，那么此时将 xhr.onreadystatechange() 放在 xhr.open() 之前，就可以避免这个问题。

③ get 请求

代码如下：

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 建立 get 请求
xhr.open('get',url);	// 如果有请求参数，需在 url 后面追加参数，例如url + '?id=1&name=client';
// 发送请求
xhr.send();
// 设置回调处理事件
xhr.onload = function() {
	// xhr.responseText 返回结果，如有需要可以转换 JSON 格式
	do something...
}
xhr.onreadystatechange = function() {
	if(xhr.readystate === 4) {
		do something...
	}
}

④ post 请求

代码如下：

// 创建 xhr 对象
var xhr = new XMLHttpRequest();

// 设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');	// 如果将来 send 时传入的是 FormData 就不用设置请求头，如果是其他参数类型则需要设置请求头对请求参数进行处理。

// 建立连接
xhr.open('post',url);	// post 请求的参数不写在 url 的后面
// 发送请求
xhr.send(arg);	// 需要写入请求参数，格式为'id=2&name=client'，也可直接传入 FormData 的实例化对象