原生js实现ajax
1、什么是Ajax？
Ajax全称：Asynchronous Javascript And XML And HTML（异步JavaScript和XML 或 HTML）。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
2、为什么要使用Ajax？
传统的网页（不使用Ajax），如果想更新内容，就必须重载整个页面，与服务器交互获取数据后刷新整个页面。而我们知道，在一个网页中，我们有时候为了得到一个实时的内容就刷新整个网页、会让用户的体验感变差，因此，使用AJax技术，通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这样就可以对网页需要更新的部分进行局部更新，而不需要更新整个页面。
3、原生Js实现Ajax步骤（以HTML为例）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Js-Ajax</title>
<script>
//定义方法
function fun() {
//发送异步请求
//1.创建核心对象
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
}
//2.建立连接
/**
* 参数
* 1.请求方式：GET、POST
* *get方式，请求参数在URL后边拼接。send方法为空参。
* *post方式，请求参数在send方法中定义。
* 2.请求的URL
* 3.同步或异步请求：true(异步)或false(同步)
*/
xmlhttp.open("GET","ajaxServlet?username=tom",true);
//3.发送请求
xmlhttp.send();
//4.接收并处理来自服务器的响应结果
//获取方式：xmlhttp.responseText
//什么时候获取？当服务器响应成功后再获取
//当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange
xmlhttp.onreadystatechange = function () {
//判断就绪状态是否为4，判断响应状态码是否为200
if(xmlhttp.readyState==4 && xmlhttp.status==200){
//获取服务器的响应结果
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" οnclick="fun();" />
</body>
</html> 
这一行通过GET请求，向ajaxServlet脚本发送username=tom这个请求参数。true为异步，false为同步。
4、服务器端响应脚本
package servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.获取请求参数
String username = request.getParameter("username");
//2.打印username
System.out.println(username);
//3.响应
response.getWriter().write("hello"+username);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
服务器端通过request得到username的值，并且向客户端响应hellotom。
5、通过前端页面点击发送异步请求按钮，会输出hellotom
此时完成了一个最简单的原生js实现Ajax请求实例。
