一、Ajax概述
1．什么是同步，什么是异步
同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待 卡死状态
异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随 意做其他事情，不会被卡死
2．Ajax的运行原理
页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到 服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回 给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面1 功能。
二、js原生的Ajax技术（了解）
js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，要使用js原 生的Ajax完成异步操作，有如下几个步骤：
1）创建Ajax引擎对象
2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
3）绑定提交地址
4）发送请求
5）接受响应数据
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript"> ???function fn1(){ ???????//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象 ???????var xmlHttp = new XMLHttpRequest(); ???????//2、绑定监听 ---- 监听服务器是否已经返回相应数据 ???????xmlHttp.onreadystatechange = function(){ ???????????if(xmlHttp.readyState==4&&xmlHttp.status==200){ ???????????????//5、接受相应数据 ???????????????var res = xmlHttp.responseText; ???????????????document.getElementById("span1").innerHTML = res; ???????????} ???????} ???????//3、绑定地址 ???????xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true); ???????//4、发送请求 ???????xmlHttp.send(); ???????????} ???function fn2(){ ???????//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象 ???????var xmlHttp = new XMLHttpRequest(); ???????//2、绑定监听 ---- 监听服务器是否已经返回相应数据 ???????xmlHttp.onreadystatechange = function(){ ???????????if(xmlHttp.readyState==4&&xmlHttp.status==200){ ???????????????//5、接受相应数据 ???????????????var res = xmlHttp.responseText; ???????????????document.getElementById("span2").innerHTML = res; ???????????} ???????} ???????//3、绑定地址 ???????xmlHttp.open("POST","/WEB22/ajaxServlet",false); ???????//4、发送请求 ???????xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); ???????xmlHttp.send("name=wangwu"); ???????????} ???</script></head><body> ???<input type="button" value="异步访问服务器端" onclick="fn1()"><span id="span1"></span> ???<br> ???<input type="button" value="同步访问服务器端" onclick="fn2()"><span id="span2"></span> ???<br> ???<input type="button" value="测试按钮" onclick="alert()"></body>ie5 ie6版本使用ActiveX对象
注意：如果是post提交
在发送请求之前设置一个头
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");function fn2(){ ???????//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象 ???????var xmlHttp = new XMLHttpRequest(); ???????//2、绑定监听 ---- 监听服务器是否已经返回相应数据 ???????xmlHttp.onreadystatechange = function(){ ???????????if(xmlHttp.readyState==4&&xmlHttp.status==200){ ???????????????//5、接受相应数据 ???????????????var res = xmlHttp.responseText; ???????????????document.getElementById("span2").innerHTML = res; ???????????} ???????} ???????//3、绑定地址 ???????xmlHttp.open("POST","/WEB22/ajaxServlet",false); ???????//4、发送请求 ???????xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); ???????xmlHttp.send("name=wangwu"); ???????总结：
所用异步访问都是ajax引擎
ajax
原文地址：https://www.cnblogs.com/hellowq/p/9480764.html