Ajax
Asynchronous JavaScript And XML
异步：
指一段程序执行时不会阻塞其他程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序 ，相反的则为同步，
自己理解的就是类似百度的搜索框输入内容时的提示相关的内容功能，ajax可以在不刷新整体页面的情况下，进行从后台取值，并返回数据到页面，其优势在于不阻塞程序的运行，从而提升整体上的执行效率。
现实生活中，打电话是同步，发短信是异步
XMLHttpRequest
浏览器内置对象，用于在后台与服务器通信，由此我们可以对页面进行部分更新，更不进行刷新整个页面的操作。
当以post方式请求时候，请求头中设置了“Content-type”，“application/x-www-form-urlencoded”,get方式请求就不需要，
api详解：
- xhr.open(); 发起请求，可以是get或者post方式
- xhr.setRequestHeader(); 设置请求头
- xhr.send(); 发送请求主体，get方式使用null作为主体
- xhr.onreadystatechange(){} 监听响应状态
- xhr.readyState = 0：UNSENT open尚未启用
- xhr.readyState = 1：OPENED open 已调用
- xhr.readyState = 2：headers_received 接收到头消息
- xhr.readyState = 3：loading 接收到主体
- xhr.readyState = 4：done 响应完成
- xhr.status 表示响应码 200 为正常
- xhr.statusText 表示响应信息
- xhr.getAllResponseHeaders() 获得全部响应头信息
- xhr.responseText：响应主体
//浏览器兼容处理 undefined未定义的 因为只有ie浏览器中存在这个ActiveXObject对象
if(typeof ActiveXObject !=='undefined'){
alert("ie");
}else{
alert("ii");
}IE浏览器创建ajax对象：
var xhr = new ActiveXObject("Microsoft.XMLHTTP");//最原始的方式 --
var xhr = new ActiveXObject("Msxm12.XMLHTTP");
var xhr = new ActiveXObject("Msxm12.XMLHTTP.3.0");
var xhr = new ActiveXObject("Msxm12.XMLHTTP.5.0");
var xhr = new ActiveXObject("Msxm12.XMLHTTP.6.0");//维护的最高版本主流浏览器创建对象(Firefix火狐，Chrome谷歌，safari新浪，opera北欧浏览器，IE7以上)
var xhr = new XMLHttpRequest();
对服务器发起请求：
浏览器方式请求：打开浏览器，输入地址栏，回车发起请求
常用状态码及其含义： 404 没找到页面(not found) 403 禁止访问(forbidden) 500 内部服务器出错(internal service error) 200 一切正常(ok) 304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )
浏览器与服务器建立连接 xhr.open(method, url, asynch); * 与服务器建立连接使用 * method：请求类型，类似 “GET”或”POST”的字符串。 * url：路径字符串，指向你所请求的服务器上的那个文件。请求路径 * asynch：表示请求是否要异步传输，默认值为true(异步)。
简单的小程序 是以 post请求来发送的消息：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function dd(){
//创建对象
var xhr = new XMLHttpRequest();
//设置请求行，创建新的http请求
xhr.open("post","/dd/d");
//设置请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//设置请求主体，发送请求信息给服务器
xhr.send("a=6&b=9");
//接受服务器响应
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status==200) {
alert(xhr.responseText);
}
}
}
}
</script>
</head>
<body>
<button onclick="dd()" value="ds"></button>
</body>
</html>
下面是java程序
package dd; import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.annotation.WebServlet;
/*
by:wzq
time:2017年11月16日
*/
@WebServlet(name = "d", urlPatterns = { "/d" })
public class Dd extends HttpServlet {
private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String parameter = request.getParameter("a");
System.out.println(parameter);
PrintWriter writer = response.getWriter();
writer.print("dsdsdsdsdsdsdsd");
writer.flush();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
下面是get请求方法是的ajax代码。
<script type="text/javascript">
function dd(){
//创建对象
var xhr = new XMLHttpRequest();
//设置请求行，创建新的http请求
xhr.open("GET","/dd/d?a=6666",true);
xhr.setRequestHeader("Content-type","application/json; charset=utf-8");
//设置请求主体，发送请求信息给服务器
xhr.send();
//接受服务器响应
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status==200) {
alert(xhr.responseText);
}
}
}
}
</script>