Ajax使用指北

Ajax是什么？

Ajax 全称为 asynchronous JavaScript and xml：也即，异步的 Js 和 XML

其作用在于使用 js 异步地访问服务器

特点在于：服务器的响应只是数据，局部刷新html页面

Ajax 一个常见的应用场景为：

新用户注册时，提示“用户名已经被注册”

Ajax 的优缺点：

优点：

1. 异步交互，增强用户体验，
2. 性能：服务器压力减轻，只需响应部分内容

缺点：

1. 不能适应全部场景
2. 无端增多了访问服务器的次数，增加了服务器的压力

ajax发送异步请求（四步操作）

1、得到XMLHttpRequest

• 大多数浏览器支持：var xmlHttp = new XMLHttpRequest();

• IE6.0: var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

• IE5.5及更早IE版本： var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

• 编写创建XMLHTTPRequest对象的函数

  try {
  	return new XMLHttpRequest();
  } catch(e) {
  	try {
  		return new ActiveXObject("Msxml2.XMLHttp");
  	}
  	catch(e) {
  		try {
  			return new ActiveXObject("Microsoft.XMLHttp");
  		} catch(e) {
  			alert("");
  			throw e;
  		}
  	}
  }
  

2、第二步（打开与服务器的连接）

• xmlHttp.open(): 用来打开与服务器的连接：需三个参数
  • 请求方式：GET或POST
  • 请求的URL：指定服务器端资源
  • 请求是否为异步：true表示发送异步
• xmlHttp.open(“GET”, “/day23_1/Aservlet”, true);

3、第三步（发送请求）

• xmlHttp.send(null); 如果不给参数可能会导致部分浏览器无法发送
  • 参数：请求体内容。若是GET请求，则必须给null

4、第四步

• 在xmlHttp对象的一个事件上注册监听器：onreadystatechange
• xmlHttp对象一共有5个状态：
  • 0 刚创建，还没调用open()方法
  • 1 请求开始：调用了open()方法，但还没有调用send()方法
  • 2 调用完了send()方法
  • 3 服务器已经开始响应，但不表示响应结束了
  • 4 服务器响应结束（通常我们只关心最后这个状态）
• 得到xmlHttp对象的状态：
  • var state = xmlHttp.readyState; // 可能为0、1、2、3、4
• 得到服务器响应的状态码
  • var status = xmlHttp.status; // 例如，200、404、500
• 得到服务器响应的内容
  • var content = xmlHttp.responseText; // 得到服务器的响应的文本格式的内容
  • var content = xmlHttp.responseXML; // 得到服务器响应的xml响应的内容，它是Document对象

  xmlHttp.onreadystatechange = function() { // xmlHttp的5种状态都会调用本方法
  	if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {  // 双重判断
  		// 获取服务器的响应内容
  		var text = xmlHttp.responseText;
  	}
  }
  

发送POST请求

• open: xmlHttp.open(“POST”, … );
• 添加一步 设置Content-Type 请求头：
  • xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
• send: xmlHttp.send(“username=zhangSan&&password=123”);

跨域

• ajax只能访问与前端页面同源的url

• 同源策略

  • 协议相同
  • 域名相同
  • 端口号相同

• 解决方法

  • Nginx 反向代理

Ajax的其他实现方式

1. 借助 JQuery.
   JQuery load
   $.post()
   $.get()
   等
2. 借助 第三方库，例如，axios