前言
AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术),指的是一套综合了多项技术的浏览器端网页开发技术。Ajax的概念由杰西·詹姆士·贾瑞特所提出。(维基百科)
基本实现步骤
创建XMLHttpRequest对象
1
| const xhr = new XMLHttpRequest();
|
设置xhr对象的事件监听函数
1 2 3 4 5
| xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { ... } }
|
readyState状态码
状态码 |
备注 |
0 |
未执行open函数 |
1 |
已执行open函数,未执行send函数 |
2 |
已执行send函数 |
3 |
正在接收服务器响应的数据 |
4 |
完成接收服务器响应的数据 |
建立连接
- 第一个参数是请求类型
- 第二个参数是访问的资源地址
- 第三个参数为是不是异步
<src>
:资源地址
1
| xhr.open("GET", "<src>", true);
|
发送请求
GET请求示例
1 2 3 4 5 6 7 8 9
| const xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { ... } };
xhr.open("GET", "/doCheck?name="+name.value, true); xhr.send();
|
POST请求示例
1 2 3 4 5 6 7 8 9 10 11
| const xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { ... } }; xhr.open("POST", "/doSave", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(name.value);
|
封装为函数
GET请求
1 2 3 4 5 6 7 8 9 10
| function doAjaxGet(url, params, callback) { const xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { callback(xhr.responseText); } }; xhr.open("GET", `${url}?${params}`, true); xhr.send(); }
|
POST请求
1 2 3 4 5 6 7 8 9 10 11
| function doAjaxPost(url, params, callback) { const xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { callback(xhr.responseText); } }; xhr.open("POST", url, true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(params);
|
封装为框架
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
| (() => { const ajax = function () { } ajax.prototype = { doAjaxGet: function (url, params, callback) { const xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { callback(xhr.responseText); } }; xhr.open("GET", `${url}?${params}`, true); xhr.send(null); } , doAjaxPost: function (url, params, callback) { const xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { callback(xhr.responseText); } }; xhr.open("POST", url, true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(params); } } window.Ajax = new ajax(); })()
|
传参的几种方式
1 2 3 4 5
| <input type="text" id="name"/>
<script> let name = document.getElementById("name"); </script>
|
以字符串拼接传参
1 2
| let params = "name="+name.value; xhr.send(params);
|
以模版字符串传参
1 2
| let params = `name=${name.value}`; xhr.send(params);
|
以JS中的对象传参
1 2
| let params = {"name":name.value}; xhr.send(params);
|
关于浏览器兼容问题的解决
创建createXmlHttpRequest函数
- 创建createXmlHttpRequest函数用于不同浏览器创建不同XMLHttpRequest对象
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| function createXmlHttpRequest() { if(window.XMLHttpRequest) { return new XMLHttpRequest(); } else if(window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("您的浏览器不支持Ajax,请更换浏览器"); return null; } }
|
通过createXmlHttpRequest函数创建XMLHttpRequest对象
1
| const xhr = createXmlHttpRequest();
|
完成