JS原生Ajax
Posted AlphaJunS
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS原生Ajax相关的知识，希望对你有一定的参考价值。
1、Ajax概述
异步访问：客户端发送请求到服务器，无论服务器是否返回响应，客户端都可以随意进行其他操作，不会被卡死。
Ajax运行原理：页面发出请求，会将请求发送给浏览器中内置的Ajax引擎，Ajax引擎会提交请求到服务器端，等待服务器响应期间，用户可以进行其他操作，直到服务器端将数据返回给Ajax引擎后，会出发设置的事件，执行自定义js的逻辑代码完成某种功能。
2、使用js原生Ajax的步骤
- 创建Ajax引擎对象
- 为Ajax引擎对象绑定监听
- 绑定提交地址
- 发送请求
- 接受相应数据
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript"> 7 function fn1() { 8 //alert(); 9 // 1、创建ajax引擎对象（所有操作都通过ajax引擎对象完成） 10 var xmlHttp = new XMLHttpRequest(); 11 // 2、为ajax引擎对象绑定监听（监听服务器是否响应） 12 xmlHttp.onreadystatechange = function() { 13 //alert(); 14 // 5、接收响应数据 15 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 16 var res = xmlHttp.responseText; 17 document.getElementById("span1").innerHTML = res; 18 } 19 } 20 // 3、绑定提交地址 21 xmlHttp.open("GET", "/WEB022/ajaxServlet?name=lisi", true); 22 // 4、发送请求 23 xmlHttp.send(); 24 } 25 26 function fn2() { 27 // 1、创建ajax引擎对象 28 var xmlHttp = new XMLHttpRequest(); 29 // 2、为ajax引擎对象绑定监听 30 xmlHttp.onreadystatechange = function() { 31 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 32 // 5、接受响应数据 33 var res = xmlHttp.responseText; 34 document.getElementById("span2").innerHTML = res; 35 } 36 } 37 // 3、绑定提交地址 38 xmlHttp.open("POST", "/WEB022/ajaxServlet", false); 39 // 4、发送请求（POST提交方式需要设置一个头） 40 xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 41 xmlHttp.send("name=zhangsan"); 42 } 43 </script> 44 </head> 45 <body> 46 <input type="button" value="异步访问" onclick="fn1()"><span id="span1"></span> 47 <br> 48 <input type="button" value="同步访问" onclick="fn2()"><span id="span2"></span> 49 <br> 50 <input type="button" value="测试" onclick="alert(661)"><br> 51 </body> 52 </html>
以上是关于JS原生Ajax的主要内容，如果未能解决你的问题，请参考以下文章
Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码